HTML5+CSS3⾃学笔记（⼆）CSS3基础知识
⼀. 基础认知
1.1 CSS引⼊⽅式
1.1.1 内嵌式：CSS写在style标签中
提⽰：style标签虽然可以写在页⾯任意位置，但是通常约定写在head标签中
1.1.2 外联式：CSS写在⼀个单独的.CSS⽂件中
提⽰：需要通过link标签在⽹页中引⼊ <link rel="stylesheet" href=" "></link>
1.1.3 ⾏内式：CSS写在标签的style属性中，不推荐使⽤
1.2 CSS书写顺序：顺序改变样式不会改变，但是会提⾼浏览器的加载速度
1）浮动/display
2）盒⼦模型：margin、border、padding 宽度⾼度背景⾊
3）⽂字样式
⼆. 基础选择器
1.1 标签选择器：以标签命名的选择器
结构：标签名{CSS属性名： 属性值；}
作⽤：通过标签名，到页⾯中所有这类标签，设置样式
1.2 类选择器
结构：.类名{CSS属性名： 属性值；}
作⽤：通过类名，到页⾯中所有这类标签，设置样式
注意：⼀个标签可以有多个类名，类名可以重复
1.3 id选择器
结构：#id属性值{CSS属性名： 属性值；}
作⽤：通过id属性值，到页⾯中带有这个id属性值的标签，设置样式，⼀般配合js使⽤
注意：id属性值在⼀个页⾯中是唯⼀的，不可重复，⼀个标签只能有⼀个id属性值，⼀个id选择器只能选中⼀个标签
1.4 通配符选择器
结构：*{CSS属性名： 属性值；}
作⽤：到页⾯中所有的标签，设置样式
⼆. ⽂字基本样式
1.1 字体⼤⼩：font-size：数字+px（⾕歌浏览器的默认字体是16）
1.2 字体粗细：font-weight：normal(400)，bold(700)
1.3 字体样式：font-style：italic(倾斜)，normal(正常)
1.4 字体系列：font-family，默认字体为微软雅⿊
1.5 font复合属性：style weight size/line-height family，可以实现连写（顺序固定），前两个可以胜省略
1.6 ⽂本样式
1.6.1 ⽂本缩进： text-indent，⼀般⾸⾏缩进两个字符，数字+em（⼀个字的⼤⼩）
1.6.2 ⽔平对齐⽅式：text-align，取值有left、center、right，除⽂本外，其他标签元素要居中，需要设置元素的⽗亲元素。
1.6.3 ⽂本修饰：text-decoration，取值有underline、none、line-through(删除线)、overline（上划线）
1.7 ⾏⾼：line-height 数字+px或者是当前font-size的倍数
三. 选择器进阶
1.1 后代选择器：空格
作⽤：选择所有相关的后代，包括⼉⼦、孙⼦、重孙⼦…
语法：⽗选择器1 后代选择器2 {CSS}
1.2 ⼦代选择器：>
作⽤：只选择⼉⼦元素
1.3 并集选择器：，
作⽤：同时选择多组标签，设置相同的样式
语法：选择器1，选择器2 {CSS}
1.4 交集选择器
作⽤：到页⾯中既能被选择器1选中，⼜能被选择器2选中的标签，设置样式（如果有标签选择器，必须写在最前⾯）。
语法：选择器1.选择器2
1.5 伪类选择器
作⽤：⿏标悬停在元素上的状态，设置样式
语法：选择器：hover {CSS}
1.6 Emmett语法：提速
四. 背景相关标签和属性
1.1 背景颜⾊：background-color rgba()其中a是透明度，取值为0-1
1.2 背景图：background-image：url(' ')
1.3 背景平铺：background-repeat
取值效果
repeat⽔平和垂直⽅向都平铺
no-repeat不平铺
repeat-x沿着x轴平铺
repeat-y沿着y轴平铺
1.4 背景位置：background-position：⽔平⽅向位置垂直⽅向位置
取值：left、right、center、top、bottom，也可以设置像素值
1.5 背景相关属性连写（不分顺序）：color image repeat position
五. 元素显⽰模式
1.1 块级元素：独占⼀⾏，可以设置宽⾼,div、p、h
1.2 ⾏内元素：⼀⾏可以显⽰多个，不可以设置宽⾼，宽⾼默认由内容撑开，a、span
1.3 ⾏内块元素：⼀⾏可以显⽰多个，可以设置宽⾼，input、text-area、img
1.4 显⽰模式转换
属性效果
display：block转换成块级元素
display：inline-block转换成⾏内块元素
display：inline转换成⾏内元素
六. CSS特性
1.1 继承性
特性：⼦元素默认继承⽗亲元素样式的特点，⽂字控制属性都可以继承，控制标签的都不能继承。
1.2 层叠性
特性：同⼀个标签可以设置不同的样式，若是设置了相同的样式，则最后的样式会⽣效。当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果。
1.3 优先级
特性：不同选择器具有不同的优先级，优先级⾼的选择器样式会覆盖优先级低选择器样式
优先级公式：继承<；通配符选择器<；标签选择器<；类选择器<id选择器<⾏内样式<！imortant
七. 盒⼦模型基本知识
html网页设计css1.1 盒⼦：内容区域(content)、内边距区域(padding)、边框区域(border)、外边距区域(margin)构成。
1.2 border的属性：像素 线型 颜⾊，单⽅向的边框设置：border-⽅位词(left\right\top\botto)
1.3 padding属性：内边距设置从上边距开始顺时针设置，使⽤padding确定内容与边框的关系更灵活，⽽不是直接固定死标签的⼤⼩。
1.4 内减模式：设置border或者padding时盒⼦就会被撑⼤，为了解决这个问题，给盒⼦添加属性box-size:border-box，浏览器会⾃动计算多于⼤⼩，⾃动在内容中减去。
1.5 清除默认样式：margin：0；padding：0
1.6 版⼼居中：⽹页的有效内容 margin:0 auto;
1.7 外边距折叠现象：
1.7.1 垂直布局的两个盒⼦：两个盒⼦分别设置上下margin时会合并⽽不是相加，最终两个盒⼦的距离取得是margin的最⼤值，所以⼀般只给⼀个盒⼦设置margin
1.7.2 互相嵌套的两个盒⼦，⼉⼦的margin-top会作⽤在⽗亲上，导致⽗亲⼀起往下移动。
解决办法：给⽗元素设置padding-top或者设置overflow：hidden
⼋. CSS浮动
1.1 结构伪类基本⽤法
1.1.1结构伪类选择器：根据元素的结构关系查元素
选择器说明
E:first-child{}匹配⽗元素中的第⼀个⼦元素
E:last-child{}匹配⽗元素中的最后⼀个⼦元素
E:nth-child(n){}匹配⽗元素中的第n个⼦元素
E:nth-last-child(n){}匹配⽗元素中的倒数第n个⼦元素
1.1.2 结构伪类公式：n可以是数字，也可以是公式
功能公式
偶数2n、even
奇数2n+1、2n-1、odd
到前5个数-n+5
到从第5个数往后n+5
1.1.3 伪元素：由CSS模拟出的标签效果，⽤来做装饰性的不重要的⼩图
伪元素作⽤
::before在⽗元素内容的最前添加⼀个伪元素
::after在⽗元素内容的最后添加⼀个伪元素
注意：必须设置content属性才能⽣效、伪元素默认是⾏内元素
1.2 浮动的作⽤
问题：当代码中的⾏内块标签或⾏内标签在写时换⾏，那么会产⽣⼀个空格的的距离
解决：使⽤float属性
1.3 浮动的特点
1）浮动元素会脱离标准流，但是⾥⾯的内容不会
2）浮动元素⽐标准流⾼半个级别，可以覆盖标准流中的元素
3）浮动元素是顶对齐，下⼀个浮动元素会在上⼀个浮动元素后⾯左右浮动
4）浮动后的标签具有⾏内块的特性
5）浮动后的元素不能通过text-align和margin：0 auto居中盒⼦
1.4 清除浮动：⽗⼦级标签，⼦级浮动，如果⽗级没有⾼度，那么后⾯的标准流盒⼦会受影响。解决办法：
1）⽗级元素可以加⾼度的就加⾼度。
2）额外标签法：在⽗元素内容的最后添加⼀个块级元素，给添加的块级元素设置clear:both 3）单伪元素：⽤伪元素代替额外标签。在⽗元素标签中添加clearfix属性，然后添加CSS样式
.clearfix::afetr{
content:'';
display:block;
clear:both;
/*下⾯的可以不写，为了兼容性*/
height: 0;
visibility: hidden;
}
4）双伪标签：在⽗元素标签中添加clearfix属性，然后添加CSS样式
/*before：解决外边距塌陷问题*/
。clearfix::before,
.clearfix::after{
content:'';
display:table;
}
/*真正清除浮动的标签*/
.clearfix::after{
clear: both;
}
5）直接给⽗元素设置overflow：hidden

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。