文章目录
系列文章目录前言一、css层叠样式表 1.css组成2.css引入方式3.文字样式4.文本属性二、选择器 1.基本选择器2.最高样式引入3.伪链接选择器4.伪结构选择器5.特定元素选择器6.目标伪类选择器7.复合选择器8.兄弟选择器9.后代选择器10.属性选择器11.伪元素选择器总结前言
CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。
CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等。而且还可以针对不同的浏览器设置不同的样式。
一、css层叠样式表
1.css组成
CSS主要有两个部分构成:选择器和声明(一条或多条)
css的书写：
选择器（变量名）{
样式（键值对）
a:值
：值a
}
选择器用于指定css样式作用的HTML对象，花括号内是对该对象设置的具体样式。
属性和属性值之间以“键值对”的形式出现。
属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等。
属性和属性值之间用英文“：”连接。
多个键值对之间使用英文“；”区分。
2.css引入方式
优先级：
1、行内样式表 > 内部样式表 = 外部样式表
2、当内部样式表和外部样式表同时存在时，采用就近原则来使用样式
1、行内样式引入（增加style属性）
<!--在标签内部再嵌套一个内嵌标签来设置样式--><span style="color: red;">行内样式表</span>
2、内联样式引入（style标签）
/*内部定义的style样式*/<style type="text/css">div {background-color: pink;}</style>
3、外联引入样式（文件引入，以link方式作为关联）
定义在外部的css文件中，需要在head中引入相应的css文件
/*关联外部的css样式文件*/<link type="text/css" rel="stylesheet" href="../css/test.css" />
type:定义链接文档的类型，在这里需要指定为"text/css",表示链接的外部文件为css样式表。
rel：定义当前文档与被链接文档之间的关系，在这里需要指定为"stylesheet"，表示被链接的文档是一个样式表文件。
href：定义所链接外部样式表文件的url，可以是相对路径，也可以是绝对路径。
3.文字样式
font-size: 14px; 字号大小，浏览器不支持12px以下文字大小 ，1em=16px
font-family: Arial, Helvetica, sans-serif; 字体，多个属性用逗号隔开，依次匹配，多个单词用'' "
font-weight: lighter;字体粗细b,strong，以100作为倍数,或者字母400normal,700bold,boldter,lighter
font-style: italic; 字体风格i,em,属性值normal,italic,oblique
font: font-style font-weight font-size/line-height font-family; 综合设置,必须保留font-size、font-family属性，否则font属性将不起作用。
4.文本属性
1）文本颜色
color:red;
color-name;名称
hex-number十六进制颜色(常用)
rgba(opacity)(0,255,0-255,0-1)
hsla(0-360/100)
2）文本对齐方式
text-align: center;left;right;justify;(两端对齐)
justify; /*分散对齐，主要针对英文段落中出现空格时，由于两边对齐，空格的大小会有变化*/
一定要注意元素的性质是否为独占一行（非独占一行会失效）
3)文本装饰
text-decoration: none：/*默认*/
text-decoration: underline; /* 下划线 */
text-decoration: overline;/* 上划线*/
text-decoration: line-through blue; /* 删除线 */
4)文本转换
text-transform: none：默认
text-transform: capitalize：文本中每个单词以大写字母开头
text-transform: uppercase：所有单词字母都大写
text-transform: lowercase：所有单词字母都小写
5）文本间距
letter-spacing: -10px; /* 文字间距 */
word-spacing: 10px; /*字母间距 */
6）行高
width: 250px;
height: 250px;
background-color: red;
line-height: 220px;
/* 一行文字上下，使用单行文本，当值等于盒子的高度，就会达到垂直居中 */
7）文本方向
direction: ltr; /* ltr默认的从左到右，rtl从右到左 */
8）文本缩进
text-indent: 2em;文本首行缩进，首行缩进2字符
9）文本阴影
text-shadow: h-shadow v-shadow blur color;
h-shadow：必需。水平阴影的位置。允许负值。horizontal， X轴往右是正值
v-shadow：必需。垂直阴影的位置。允许负值。 vertical，Y轴向下是正值
blur：可选。模糊的距离。
color：可选。阴影的颜色。
二、选择器
1.基本选择器
行内样式选择器：style
id选择器：id
类选择器：class
元素选择器：当前页面所有特定元素
通配符选择器：* 作用：清除浏览器，默认样式，增加运行时间,减少重复的代码，会影响页面加载速度
权重对比：
行内样式选择器>id选择器>class选择器>元素选择器（tag选择器）>*通配符选择器
唯一性特点：class可以有多个，id不能有多个
css允许使用多个id或重复使用，但是在js阶段会报错
2.最高样式引入
！important 只要给定该元素，该元素的样式就会按照给定的css来，该元素应该整个页面的权重结构
3.伪链接选择器:
执行顺序：
a:link /*未访问的链接*/
a:visited /*已访问的链接*/
a:hover /*鼠标滑动到链接*/
a:active /*鼠标点击的链接*/
4.(位置)结构伪类选择器
:first-child获取第一个子元素
:last-child获取最后一个子元素。注意：IE8不支持X:last-child。
:nth-child(n)获取某个元素的第n个子元素。关键字（even偶数、odd奇数）。
:nth-last-child(n)获取某个元素的最后第n个子元素。关键字（even偶数、odd奇数）。
:first-of-type选择特定元素的第一个子元素
:last-of-type选择特定元素的最后一个子元素
:nth-of-type(n)只计算父元素中指定的某种类型的子元素
:nth-last-of-type(n)只计算父元素中指定的某种类型的子元素，从这个元素的最后一个元素开始获取
:nth-child先找到第n个孩子，然后匹配
:nth-of-type先去匹配，然后再找第n个孩子
5.特定元素选择器
:only-child匹配没有任何兄弟元素的元素
:only-of-type 匹配同类型只有一个孩子的元素
:empty 元素里面没有任何的内容或子节点
:root 匹配文档的根节点
6.目标伪类选择器target
<style>/* 返回顶部 */p:target {color: blue;}</style>
<a href="#one">情人节</a><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><p id="one">跳转！</p>
7.复合选择器
1)交集选择器
由两个选择器构成，其中第一个为标签选择器，第二个为class选择器或者id选择器，两个选择器之间不能有空格。
p.one类名既是.one 且是段落标签
p#two.one id名,类名既是.one 且是段落标签
2)并集选择器
由各个选择器通过逗号连接而成的，任何形式的选择器，都可以作为并集选择器的一部分。
p,div 和
8.兄弟选择器
"+"以自己为出发点，跟它最接近的弟弟，只选择一个。
"~"选择除了它以外它所有的弟弟。
9.后代选择器
div>p子代
div p后代
10.属性选择器
11.伪元素选择器
::first-letter块级文本的第一个单词或字
::first-line文本的第一行
::selection滑动选择文本
::before {
content: "行内元素";
}
::after {
content: "行内元素";
}
ctrl+f 查找，替换
总结
以上就是今天要讲的内容，本文仅仅简单介绍了选择器的使用。
