CSS
分为两大部分, 一个是CSS的属性, 另一个是CSS选择器
常见的
文字属性
font-style 样式
font-size 文字大小
取值: px(像素 pixel)
font-family 文字字体
font-family:"楷体";
默认宋体
设置备选
:font-family:"字体1", "备选方案1" 中文字体包括英文 ,英文不包括中文 英文字体放在前面 (中文字体也有自己的英文名)
企业开发中最常见的字体
中文: 宋体/黑体/微软雅黑 ,英文: "Times New Roman"/Arial
宋体 SimSun 黑体 SimHei 微软雅黑 Microsoft YaHei
文字缩写
font: style weight size family;
style 、weight可以省略
文本属性
text-decoration 文本添加装饰
nong: 取消线
underline: 加下划线
line-through: 加删除线
overline: 加上划线
text-align 水平对齐
取值: left right center
text-indent 文本缩进
取值: em (2em表示两个汉字)
颜色属性
rgb代表三原色, 其中r(red 红色) g(green 绿色) b(blue 蓝色)
红色: rgb(255,0,0);
绿色: rgb(0,255,0);
蓝色: rgb(0,0,255);
黑色: rgb(0,0,0);
白色: rgb(255,255,255);
灰色: rgb(200,200,200);
只要让红色/绿色/蓝色的值都一样就是灰色
rgba a代表透明度, 取值是0-1,越小越透明
十六进制 本质就是RGB 取值0-F, 逢十六进一
#FFEE00 FF表示R EE表示G 00表示B。 两位一样可简写#FE0
CSS选择器
#标签 (id选择器).biao'qi (类选择器)
标签 (标签选择器)
选择器1 选择器2 (后代选择器 )
选择器1>选择器2 (子元素选择器)
选择器1选择器2 (后代选择器 )
选择器1+选择器2 相邻兄弟选择器)
选择器1~选择器2 (通用兄弟选择器)
* (通配符选择器)
序选择器
:first-child 同级别第一个标签:nth-of-type()
属性选择器
[attribute]
[attribute=value] 属性值的匹配
[attribute^=value] 属性值以value开头
[attribute$=value] 属性值以value结尾
[attribute*=value] 属性值包含value
CSS三大特性
继承性 、层叠性、 优先级
继承性
父元素设置的属性 被子元素获得只有以color/font-/text-/line-开头的属性才可以继承,后代都可以继承
a标签的文字颜色和下划线是不能继承的 ,h标签的文字大小是不能继承的
应用场景: body一般用于设置网页上的一些共性信息, 例如网页的文字颜色, 字体,文字大小等内容
层叠性
多个选择器选中"同一个标签", 又设置了"相同的属性优先级
解决层叠性的属性设置,排列优先级。
三种方式
通过继承性设置: 谁离目标标签比较近就听谁的
相同选择器(直接选中) : 同类型的选择器, 谁写在后面就听谁的
不同选择器(直接选中): id>类>标签>通配符>继承>浏览器默认
注意点: 通配符选择器也是直接选中
优先级权重
数选择器的类型 ,大的 优先级最高 , 一样大数个数, 数量多的优先级高注意点: 直接选中标签的才需要计算权重, 否则一定会听直接选中的
!important
写在要提升属性的后面,将被指定的属性的优先级为最高
Div标签
配合CSS网页布局
span标签
配合css设置局部信息HTML将所有的标签分为两类, 容器级和文本级
容器级可以嵌套所有的标签,文本级只能嵌套文字/图片/超链接
容器级 div h ul ol dl li dt dd ..
文本级:span p buis strong em ins del ...
CSS将所有的标签分为两类, 块级元素和行内元素(其实还有一类, 行内块级)
常见块级元素: p
div h ul ol dl li dt dd 会独占一行
可以设置宽高, 如果没设置, 跟父元素一样宽
常见行内元素: span buis strong em ins del 不会独占一行
不可以设置宽高, 如果没设置, 跟内容一样宽
行内块级元素:img 不独占一行 又可以设置宽度和高度
display属性 模块转换
display: nline-block 转成行内块级
本内容收集与网络,部分转载极客江南,并将内容提炼整理。