CSS中的选择器和常用文本属性

1.1选择器
1.1.1通用选择器：选中页面中所有的标签。
*{
属性名:属性值;
color:red;
}
1.1.2标签选择器：选中html中的标签。
li{
}
1.1.3类选择器（class选择器）：在html标签中，使用class="class名"调用选择器。
.class名{
}
1.1.4ID选择器：在html标签中，使用id="id名"调用选择器。
#id名{
}
1.1.5交集选择器：选择器1选择器2选择器3......{}，没有间隔。
#first.li1{
}
必须满足交集选择器中出现的所有选择器。
1.1.6并集选择器：选择器1,选择器2,选择器3,......{}，逗号分隔。
#first,.li1{
}
只要满足其中任意一个，即可全部生效。
1.1.7后代选择器：选择器1 选择器2 选择器3 ......{}，空格分隔。
div .li1{
}
必须满足后一个选择器是前一个选择器的后代（子代、孙代、重孙代......）
1.1.8子代选择器：选择器1>选择器2>选择器3>......{}，用>分隔。
div>ul>.li1{
}
div{
}
后一个选择器是前一个选择器的直接子代才会生效，隔代（中间包含其它标签）则不会生效。
1.2小结
1.2.1选择器的命名规则
只能由字母、数字、下划线、减号构成，且开头不能是数字。
1.2.2选择器的优先级
①首先遵循近者优先原则，作用于最里层标签的选择器优先生效。
②作用于同一层标签时，优先级如下：行级样式表>ID选择器>class选择器>标签选择器>通用选择器。
③行级样式表>页内样式表。
1.2.3ID选择器与class选择器的区别
①写法不同。
②优先级不同。
③在同一个HTML文件中，id是唯一的，id选择器只能作用于一个标签上，class选择器可以作用于多个标签。
1.2.4选择器按权重计算优先级
①只有交集、后代、子代选择器才有优先级的累加，并集选择器相当于写了多个选择器，没有总优先级。
②近者优先。
③当作用于同一层时，标签选择器，占权重1；
class选择器，占权重10；
id选择器，占权重100；
行级样式表 style=""，占权重1000。
④如果计算出的优先级相同，则后写的选择器生效。
#div.div{}
.div#div{}
2.1文本属性
2.1.1颜色单位表示
①使用颜色名称表示：red/blue/green
②十六进制数：#ffffff #000
③rgb(255,255,0)
④rgba(255,255,0,0.2)：第四位表示透明度，0表示全透明，1表示不透明
2.1.2常用文本属性
①font-style：设置斜体：italic/normal。
②font-weijht：字体粗细：bold/normal/lighter或用100~900数值，400=normal、700=bold。
③font-size：字体大小：px/%（浏览器默认大小的百分比，默认16px）
④line-height：行高
⑤font-family：字体，多个字体之间用逗号分隔，若电脑不支持第一个则依次顺延。
例：font-family:"隶书","宋体",sans-serif;
最后一个是字体族，sans-serif/serif，当前面的字体都不被支持时，推荐浏览器从规定的字体族中选择一个。
⑥缩写形式：font-style font-weight font-size/line-height font-family
例：font:italic bold 18px/1.8 "黑体","微软雅黑",sans-serif;
⑦color：字体颜色
⑧text-align：对齐，center水平居中。
⑨letter-spacing：字符间距
⑩text-decoration:underline下划线、overline上划线、line-through删除线
①①overflow：超出范围的文字处理，hidden隐藏、scroll滚动条、auto自动。
①②white-space:nowrap;设置文字在一行显示，不断行。
2.1.3常见背景属性
①background-color：背景色
② background-image：背景图
③background-repeat：no-repeat不重复、repeat重复、repeat-x(y)横(纵)向重复。
④background-position:
>>>两个属性，一个写“上中下” 一个写“左中右”，空格分割；例如 :left top;
>>>百分数，第一个写x轴位置，第二个写y轴位置。例如：0% 100%位于左下角；
如果只写一个，默认第二个为50%；
>>>坐标点，第一个写x轴位置，第二个写y轴位置。例如：0px 0px位于左上角；
如果只写一个，默认第二个为50%；
总结：图片相对于父容器移动，左负右正，上负下正。
⑤background-origin：表示图片相对于哪个位置定位（图片的左上角与谁的左上角对齐）border-box：外边框、padding-box：内边框、content-box内容框。
⑥background-size:图片的大小，有三种常见写法：
>>>直接写像素大小，例如background-size:500px 100px; 宽为500，高为100；
>>>contain，把图片放到最大尺寸。由父容器的宽或高中较短的一边决定；
>>>cover，图片覆盖父容器全部区域。
2.1.4常见的列表属性：list-style
也可以通过url导入图片，设置为小图标；

 

2.1.5超链接的常见属性：

去掉超链接下划线：text-decoration:none;
2.1.6常见的伪类：

：focus 元素获得焦点：即鼠标点击上以后，鼠标再点击其余地方就会失去焦点。

转载于:https://www.cnblogs.com/xiaoxiaoz/p/7138071.html