CSS学习之路

1、css背景

• background-color：背景色

　　　background-color: red 

• background-img：背景图（url 默认为 x，y 平铺） 

　　　background-image: url(../****)

• background-repeat：背景的平铺方式（repeat：默认；repeat-x：沿 x 方向平铺；repeat-y：沿 y 方向平铺；no-repeat：不平铺）

　　　　注：background 与 image 的区别

　　　　　　1、经常在网页中变化的图，使用 image

　　　　　　2、在网页中起到修饰作用的使用 background

• background-position：背景的位置 

　　　background-position: center 

• background-size：背景大小

 　　   background-size: cover 或者 background-size: 30px,30px

• background-attachment：背景随滚动条移动的方式（scroll：滚动；fixed：固定）

　　　background-attachment: fixed 

　　　　注：scroll下的定位模式 position 是根据当前容器来进行偏移的

　　　　　　fixed下的定位模式 position 是根据当前页面整体进行偏移的 

　　　　　　参考：DIVUPS | World-class digital experiences.

2、css边框

• border-style：边框样式（solid：实线；dashed：虚线；dotted：点线） 

　　　border-style: solid 

• border-width：边框大小

　　　border-width: 5px 

• border-color：边框颜色（默认为黑色）

　　　border-color: skyblue 

• border-left/right/top/bottom-style：边框任意边的样式

　　　border-left-color: tomato 

3、css字体样式（字体型号）

• 默认为微软雅黑
• 中文：宋体、楷体、黑体...对中英文均产生效果
• 英文：Arial、'Time New Roman'...仅对英文产生效果（英文中带空格的字体需用单引号包裹）
• font-family：Arial

　　　font-family: 'Times New Roman', Times, serif

• font-size：字体大小

　　　font-size: 30px

• font-weight：字体样式（粗细等）

　　　font-weight: bold

• font-style：字体样式（斜体等 normal：正常（默认）；italic：斜体）

　　　font-style: italic

• color：字体颜色

　　    color: tomato

4、文本修饰

• text-decoration：overline 上划线 、underline 下划线 、line-through 删除线
• text-decoration：none 可删除系统默认下划线（ a 标签自带下划线删除）

　　　　注：text-decoration 后可设置多个属性值

5、css文本大小写（只针对英文）

• text-transform：lowercase 单词小写 、 uppercase 单词大写 、 capitalize 首字母大写

6、css文本缩进（一般针对中文）

• text-indent：32px （默认情况下，一个字符大小为 16px）

7、文本对齐方式

• text-align：center 居中；left 左对齐；right 右对齐

　　　注：align = 'center' 只允许在表格内使用

　　　　　text-align：center 属于样式

8、行高

• 定义：多行段落之间的距离
• 默认行高：不确定具体大小，总比当前字体大1.2倍左右
• line-height：scale（比例值） 

　　　line-height: 1.5 

9、letter-spacing：定义字间距

10、world-spacing：定义词间距（针对英文）

　　注：强制换行（针对英文）

　　　　1、world-break：break-all 非常强烈的折行，特点：不留空白（行填满再这行，不保留单词的完整性）

　　　　2、world-wrao：break-world 不那么强烈的折行，特点：会留白（保留单词完整性的折行）

11、css复合样式

• background：red url() no-repeat
• border：1px skyblue solid

12、font 的复合样式（有固定顺序，且至少有 size 和 family 两个属性）

• weight style size family
• style weight size family
• style weight size / line-height family （数值表达相同时，在复合样式内可用 "/" 隔开）

　　　注：单一样式与复合样式尽量不要混写，如果确实有需要，可以先写复合样式，再单独补充单一样式

　　　小技巧：当行高等于容器高度时，可使文字始终保持居中状态（仅限本行文字）

13、css选择器

• id 选择器 

　　　<div id="kcy"></div> #kcy{color: red;}

• class 选择器

　　　<div class="kcy"></div> .kcy{color: red;}

• 标签 + 类 选择器 

　　　div.kcy{color: red;}

• 标签 选择器 

　　　div{color: red;}

• 群组 选择器 

　　　div,p{color: red;}

• 通配 选择器 

　　　*{margin: 0;}

• 层次 选择器：M N M下的所有N标签（所属关系）、M>N M下的子标签N、M~N 找M下的兄弟标签N（即同级关系，M下的所有N）、M+N 找M下的相邻的N标签（同级关系）
• 属性 选择器 

　　　<h1 title="kcy">kcy</h1> [title]{color: red;}

14、伪类选择器

　　常用于向某些元素添加特殊的效果，一般用于初始样式添加不上时，使用伪类元素进行添加修饰。

　　以下四个标签主要针对 a 标签：

• ：link => 访问前的选择器（只适用于 a 标签）
• ：visited => 访问过后的选择器（只适用于 a 标签）
• ：hover => 鼠标移入的选择器
• ：active => 鼠标按下的选择器

　　　　注：当 a 标签用到以上四个伪类选择器时，需严格按照以上顺序使用执行

　　其他伪类选择器：

• ：after => 在文字之后添加一个文字，常用于一个文中的字体进行不同效果的分开控制
• ：before => 在文字之前添加一个文字 

　　　div::after{content: 'kcy'; color: skyblue;}

• ：checked => 选中之后产生相应效果
• ：disabled => 禁止之后产生相应效果
• ：focus => 获取光标之后产生相应效果

15、结构性伪类选择器

• ：nth-of-type（n） => 寻找集合中的第 n 个
• ：first-of-type => 寻找集合中的第一个
• ：last-of-type => 寻找集合中的最后一个
• ：only-of-type => 唯一一个生效
• ：nth-child（n） => 寻找下级关系中的第 n 个
• ：first-child => 寻找下级关系中的第一个
• ：last-child => 寻找下级关系中的最后一个
• ：only-child => 下级关系中唯一一个生效

16、css继承

• 文字相关样式可以被继承：color、line-height、font-style...
• 布局相关样式不可被继承：border...（默认行为）

　　　注：想让子标签继承相关结构样式，可用

　　　p(子标签){border: inherit;} 

17、css优先级

• 相同样式优先级：当设置相同样式时，后面的样式的优先级高于前面的样式（不建议重复写相同样式）
• 呢哦不样式与外部样式：内部样式与外部样式的优先级相同，如果设置了相同的样式，则后写的样式的优先级高
• 单一样式优先级：style行内（1000） > id（100） > class（10） > tag（1） > * > 继承（根据权重比较）　　

　　　注：！important 可强行更改样式的优先级，权重相当于100000...（不规范写法，不建议使用）

• 标签 + 类 的写法的优先级大于 单类 
• 群组选择器与单一选择器的优先级相同，靠后的有限级高
• 层次选择器：权重（将对应权重相加，权重值高的一方优先级高）、约分（将相同的选择器约掉，再进行比对）

　　　注：层次选择器最多不要超过三层！

18、css盒模型

• 从内到外：content - padding - border - margin
• 类似于：物品 - 填充物 - 盒子 - 多个盒子之间的间隙
• content：width + height（宽高决定 content 区域）
• padding：内边距（位于 content 与 border 之间）
• margin：外边距

　　　注：1、背景（色 / 图）会填充到 margin 以内的区域（背景图不平铺的话，仅出现再 padding 左上角）

　　　　　2、文字位于 content 区域

　　　　　3、padding 不允许负值

　　　　　4、margin 可以出现负值

　　　　　　  margin：30px（上下左右）

　　　　　　  margin：30px（上下） 30px（左右） 

　　　　　　  margin：30px（上） 40px（左右） 50px（下）

　　　　　　  margin：30px 30px 30px 30px（...）