层叠样式表（cascading style sheet)
1 认识标签语义化
赋予标签意义，使每个标签各有各自的含义，在合适的位置使用合适的标签对，当用户在进行信息的搜集时使其更加排列向前，便于提高用户的体验（优化搜索引擎）
当一个网页去掉样式后，结构内容依旧非常清晰（表示这是一个非常好的语义化网页）
网页加上样式表的样子.png
去掉样式表之后的样子.png
比如：＜ｐ＞段落标签，< div >快标签
- 语意重的地方多用有语意的标签
- 网页中常见的样式：网页中背景颜色，文本的颜色和大小，图片的大小以及位置的定位
- CSS书写环境用＜style></style>来进行搭建（style标签对放在head头部）
- 元素的显示模式=标签+标签属性+标签内容
- 使用结构语法：
元素{元素属性1:属性值；
元素属性2:属性值；
}（使用多个属性时用分号隔开）
2 认识元素中常见的各种类型
1 认识基本元素的类型
- 块状元素(block)
1 在标注文档流中，所属标签独自霸占一行，且从上到下依次排列
2 常见块状元素：p/h1-h6/div/ul-li/ol-li/
3 块状元素在样式表中可以设置宽度和高度 - 内联元素（inline）
1 在标准文档流中。所属标签会依次从左到右，且从上到下排列
2 常见内联元素：a/strong/span/del/
3 内联元素在样式表中不可以设置宽度和高度 - 内联块元素（inline-block）
1 在标准文档流中，所属标签会依次从从左到右且从上到下依次进行排列
2 常见内联块元素：img/input
3 内联块元素在样式表中可以设置宽和高
2 元素类型之间的装换
- 快元素转换内联元素：使用display：inline-block（让块元素具有内联元素的属性）
- 内联元素装换为快元素：使用display：block（让内联元素具有快元素的属性）
3 CSS常用属性
- text-align:文字对齐方式（left、center，right，justify（一般要设置宽度））
- text-indent：文字缩进（用em单位）
- color:文字颜色
- font-size：文字字体大小
- text-decoration:去掉下划线
- list-style：去掉序列列表的序列号
4 居中对齐
- 在父级块元素中设置text-align:center（内联元素和内联块元素）
- 在内联块(行内元素)元素和内联元素(行内快元素)中设置了宽和高的时候text-align:center（不会起作用）
- 在块级元素设置margin：0 auto（进行居中）
3 认识元素选择器
1 基础选择器：
- 复合选择器：标签选择器，类选择器，id选择器，通配符选择器
2 复合选择器：悬着器的叠加使用
- 并集选择器(标签选择器+内选择器组合使用，最多只能使用一次)
- 交集选择器(多个选择器同时设置一个属性)
1 id选择器
- 每个元素只能有一个id选择，id选择器会限制次数
- 使用结构语法：id=“id值” (#)
2 类选择器
- 类选择命名规范（开头不要以数字开头，可以使用字母大小写，单词缩写或者单词命名不可用标签名代替）
- 使用结构语法：class="命名值"（.）
3 子代选择器
- 父级元素下的第一个元素（用>来进行指定）
- 使用结构语法：body>div（body>div）
4 标签选择器
- 直接使用标签元素进行选择
- 使用结构语法：body（直接写标签）
5 多个选择器
- 多个元素设置同一个属性
- 使用结构语法:.p,h,a（中间用逗号隔开）
6 后代选择器
- 父级元素下的同级标签，
- 使用结构语法：body div（用空格隔开）
7 组合选择器
- 多个类型的选择器进行同一个属性设置
- p.a#id
8 通配符选择器
- 为全部标签进行同一个属性进行设置
- 使用结构语法：使用*
9 伪选择器（一般用在a标签）
- a:link：默认属性
- a:visited:鼠标访问过后显示的样式
- a:hover:鼠标悬停时显示的信息
- a:action:鼠标点击时显示的样式
4 css书写位置
1 css构造函数中书写(在head中使用)
2 行内式(直接在标签中使用属性)
3 外部式(将css中要设置的各种属性在外部的一个单独css文件中进行编辑)
三种样式比较.png
5 css三大特征
1 :继承
- 子级元素可以继承父级的一部分特征
- 并不是所有的属性都会被继承
- 文字类的属性基本会被子级继承
2 :层叠
- 同一个属性，前面的css属性会被后面相同的css属性代替
3 :优先级(相对于选择器)
- 在同一个属性里面，属性会继承权重高的属性
- 权重值对比(标签选择器<类选择器<id选择器<行内样式<!important)
- 权重值会叠加(id选择器+标签选择器>id选择器)
- 多个选择器的时候！继承属性值的权重为零
优先级.png
6 认识字体
1 font-常见字体的属性
- 字体大小：font-size
- 字体粗细：font-weight
- 字体颜色：color
- 字体斜体：font-style
- 字体行高：line-height
- 文字缩进：text-indent(文字可以为负值)
- 文字对齐方式：text-align
- 文字的字体:font-family(chrome浏览器查找字体:escape("查找的字体"))
1 .2字体的css书写顺序
- 样式:font-style(比如:italic,斜体)
- 粗细
- 大小(字体设置时必须添加此属性)
- 行高(只能放在字体属性的最后，因为fon有默认的行高)
- 字体样式(字体设置时必须添加此属性)
1 text-认识文本的各种属性
- 文本下划线：text-decoration：none(去掉下划线)
- 文本下划线：text-decoration：underline(设置文本下划线)
- 文本
7 图片和背景色(img，background-img:url("图片文件路径"))
1 背景色
- background-color：设置背景色
- background-image：背景图片
- background-repeat：no-repeat(背景图片不重铺)
- background-repeat：x(水平重铺)
- background-repeat：y(垂直居中)
- background-position：背景定位(六个方向取值)
- background-attachment:图片滚动(scroll fixed)
2 背景图和插入图的区别
- 背景图相对于更容易被定位
- 插入图片容易占位
- 插入图片语义高，容易被搜索引擎收录
- 插入图片有bug(使用vertical-align:bottom)对块状元素不起作用
8 盒子模型
1 border-边框(常见属性)
- border-color：边框颜色
- border-style：边框样式（solid，dashed，dotted，none）
- border-width：边框粗细(normal,bold)
- border-collapse：边框合并
- 边框使用顺序：粗细、样式，颜色
2 padding-内边距(盒子和盒子里面的内容)
- 内边距取值有四个(top,right,bottom,left)
- 内边距会撑开盒子(原有的宽度和高度会累加)
- 内边距的top和bottom不起作用
- 内边距内容宽度=盒子内容的宽度+左右的边框+左右的外边距+左右的内边距
- 内边距内容高度=盒子内容的高度+上下的边框+上下的外边距+上下的内边距
3 margin-外边距（盒子和盒子之间的距离）
- 外边距的取值有四个（top，right，bottom，left）
- 外边距的top和bottom对行内样式不起作用
4 盒子外边框合并
4.1 父子级的边框合并问题
- 为父级顶部设置边框
- 为父级顶部设置内边距
- 直接为父级盒子设置overflow：hidden
5 居中(margin:0 auto)块元素居中对齐
- margin-left:auto(盒子左边的区域充满)
- margin-right:auto(盒子右边的区域充满)
9 浮动-font
1 认识浮动的基本结构
- 浮动可以让块元素在一行显示(也可以让内联元素变成内联块元素的属性)
- 浮动取值(left/right)
- 浮动不脱离标注流(盒子会脱离标准流)
2 浮动的对齐方式
- 当两个兄弟级的并列的盒子，(他们的顶端会对齐)
- 兄弟级的并列的盒子，a不浮动b浮动(他们的底端会对齐)
- 当兄弟级的盒子都浮动的时候(浮动的时候都要浮动)
- 浮动的书写位置显示(left/right)
- 浮动的模式转换
3 浮动造成的塌陷
- 为父级盒子设置高度
- 在子级元素的最后添加另一个盒子:clear:both
- 为父级盒子加:overflow：hidden(强制检测自身高度)
注意事项：父级元素中有两个子集元素在进行一左一右的浮动时候，当两个元素高度不一样的时候，下面的元素会被阻挡或者产生其他不知道的影响
4 溢出隐藏
- overflow：hidden(隐藏溢出的内容)
- overflow：auto(自动判断内容是否溢出)
- overflow：visible(显示溢出的内容)
- overflow：scroll(当内容溢出的时候自动设置滚动条)
5 元素的浮动和display的区别
- 元素会脱离标注文档流(同时会让周围的元素环绕当前浮动的元素)
- display对其的方式是以基线为准(可以使用vertical属性来设置对其方式)，float是以顶部作为对其
- 浮动后不能设置父级元素的text-align:center
- display:inline-block(多个元素之间会有空隙)//可以使用负边距来解决
10 定位-position
1 静态定位(static)
- 网页的默认显示模式
2 相对定位(relative)
- 相对于自己原来的位置进行定位
- 取值有四个(left/right/top/bottom)可以取负值
- 脱离标注流
- 初始的位置被自身占位
- 取值方向(正值往盒子里面走、负值往外面走)
3 绝对定位(absolute)
- 脱离标准流
- 取值有四个(left/top/right/bottom)
- 使用定位的坐标来进行定位
4 固定定位(fixed)
- 网页的窗口相应位置进行定位
- 取值有四个(left/top/right/bottom)
- 脱离标准流
5 定位注意的问题(绝对定位)
5.1 当父级元素没有定位，子级元素定位
-
子级定位坐标会以第一屏为基准
-
父级有定位,子级会以最近的具有定位的父级进行绝对定位(使用规则-"子绝父相")
-9.1
网友评论