今日知识点：
1、css基础选择器优先级
2、css文本相关属性
3、css选择器进阶（6个）
4、盒模型
5、语义化的作用‘
HTML语义化（谈谈你对HTML语义化理解-从以下两方面阐述）
div,span ul,ol,h1,em,strong,ins ,del
什么是语义化：
在合适的位置用合适的标签体验文档的结构（白话）
语义化是指用合理的HTML标记以及其特有的属性去格式化文档内容。（例如标题用 h1-h6、段落用 p 标签，合理得给图片添加alt属性等）
语义化的好处（为什么要语义化）：
- 在没有 CSS 的情况下，页面也能呈现出很好地内容结构。
- 使代码更具【可读性】，便于团队开发和维护。
- 有利于 SEO搜索引擎优化（和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息。爬虫依赖于语义化标签来确定上下文和各个关键字的权重）。
- 有利于【用户体验】（例如：title、label 标签、alt属性的灵活运用）
CSS选择器
学习目标
- 掌握常用选择器的使用
- 熟悉选择器的优先级关系
- 掌握调试工具的基本使用
什么是选择器
- CSS选择器是CSS规则的第一部分，每个CSS规则都以一个选择器或一组选择器为开始，
- CSS 选择器即用于“查找”（或选取）要设置样式的 HTML 元素的模式
- 选择器可以分为基础选择器、复合选择器
基本选择器
通配（通用）选择器
- 语法 *{ 样式声明 }
- 作用：匹配任意类型的HTML元素
<style>
/* 页面上所有元素都被选择 */
*{
background-color:green;
}
</style>
<body>
<p>p</p>
<div>div1</div>
<div>div2
<div>div3</div>
</div>
</body>
元素名称选择器
- 语法： 元素名称{ 样式声明 }
- 作用：选择所有同一元素名称的所有元素
/* 选择body */
body{
background-color:green;
}
/* 选择页面上所有的div */
div{
width:100px;
height:100px;
background-color:red;
}
/* 选择页面上所有的p */
p{
background-color: pink;
}
类选择器
-
语法
- HTML中通过class属性定义 如：
- css中以点进行标识:. .类名{ 样式声明 }
-
作用:选择所有带有指定类名的元素
-
多类名的使用
- 语法：空格隔开
<style>
.box{
background-color:red;
}
.size{
width:100px;
height:100px;
}
</style>
<body>
<p class="box size">p</p>
<div class="box">div1</div>
<div>div2
<div class="box">div3</div>
</div>
</body>
id选择器
-
语法
-
HTML中通过id属性定义 如：
-
css中以点进行标识:#
#id名称{ 样式声明 }
-
-
作用:选择所有带有指定类名的元素
#box{
background-color:red;
}
<div id="box">div1</div>
注意：具有唯一性，一般用于页面唯一性的元素如头部、底部等，经常和 JavaScript 搭配使用
类与id的命名规则
- 见词知义，尽量用英文；
- 始终建议以字母开头，可以包含数字、字母、下划线等
- 不要以数字开头
- 多个单词可以以驼峰式（newsCont）、下划线连接（news_cont）、中划线连接（news-cont）等
总结
-
总结使用频率
- 基础选择器中最常用是类选择器(写界面的时候不要使用id挑选元素，以类选择器)
- id用于页面中唯一模块
- 元素名称选择器定义的全局样式，单独使用要慎重
- *号通常用于重置样式【最不常用】
-
总结id与类的区别总结
-
基础选择器的优先级
-
对比
-
渗透调试工具的使用
- F12/右键-检查 - 左边是 HTML 元素结构，右边是 CSS 样式 - Ctrl+滚轮 可以放大、缩小开发者工具代码大小 - Ctrl + 0 复原浏览器大小 - 右边 CSS 样式可以改动数值（左右箭头或者直接输入）和查看颜色 - 如果点击元素，发现右侧没有样式引入，极有可能是类名或者样式引入错误 - 如果有样式，但是样式前面有黄色叹号提示，则是样式属性书写错误 - 如果有样式，但是样式被中划线贯穿，说明可能存在书写顺序 或优先级问题 -
结论
最终排序：id（身份证号是XX的学生）> 类（名叫王小帅的学生） >元素名称（所有男生） > *(所有学生) 选择范围越精确，优先级越高,权重越大
-
| 选择器 | 权重值（优先级） |
|---|---|
| * | 0 |
| tagName标签名 | 1 |
| class | 10 |
| id | 100 |
id>class>tagName>* 权重值越大的选择器优先级越高！！
CSS字体 ,文本属性
学习目标
-
熟练掌握css常用文本属性
-
熟练掌握css常用字体属性
-
能够说出颜色的常用表示方法
字体类型，字体大小 ，字体颜色，字体粗细，字体斜正，字体行高 复合属性： 属性值不只一个 font:字体斜正 字体粗细 字体大小/字体行高 字体类型;
字体斜正font-style:normal正体/italic斜体
字体粗细font-weight:100-900 ; 值越大越粗 400正常 》400粗 <400细
取决于字体类型
字体大小font-size: 16px默认字体大小/12px浏览器展示的最小字体
字体行高line-height:1.5/150%/npx;
行高= 文字字体大小font-size+上下等分的行间距(浏览器默认给的是文字字体大小1.3125倍)
阅读的时候最舒服的行高是1.5倍
1. 行高可以上下移动文字
2. 文字的高度就是行高区域 文字一定在行高区域里是垂直居中的！！！
行高= 盒子的高度 实现单行文本垂直居中！！
字体类型
font-family:'Microsoft YaHei',"5b8b4f53",'黑体','楷体';
规则：
1. 包含中英文字体 英文字体在前，中文字体写在后面
2. 多个字体以逗号隔开 中英文字体都提供几个 备选项
3. 中文字体 那么字体名字不要写中文！！ 会乱码
写字体的英文名称或者是字体的编码名称
4. 字体类型是有两个英文单词或者编码呈现时要加"" or ''
font-family: Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif;
英文字体：微软雅黑 ,Helvetica,Times New Roman,arial;
中文字体: 宋体，楷体，.....
sans-serif不是字体类型 它是字体系列
字体两个系列： 衬线serif 无衬线 sans-seriffont-family：
-
作用：设置文本的字体系列
-
语法：font-family:字体名称
-
常用值：
-
一个字体名称或系列名称（介绍常用字体名称、字体系列）
- 微软雅黑 Microsoft YaHei
- 宋体 simsun
- 黑体 HeiTi
- 楷体 KaiTi
-
-
-
多个字体名称
-
逗号分开 如果浏览器不支持第一个字体，则会尝试下一个（回退机制）
.box{
/*font-family:"微软雅黑","宋体";*/
/*font-family:"宋体","微软雅黑"; *//*与上一个相比产生的效果不同，谁在前使用哪一个*/
font-family:"微软雅黑abc","宋体"; /*第一个任意改写一个系统不存在的字体，会按照第二个字体显示*/
}
```-
注意如果字体名称包含空格、汉字、特殊字符，必须加引号。
.box{font-family: "Microsoft YaHei";}
font-size
-
作用：设置字体的大小
-
语法：font-size:值
-
常用值：
- 长度值（通常是像素px）
- 百分比（相对于父元素计算）
-
em
- 相对单位
- 如果用于字号，相当于父元素字号计算，如果用于其它属性，相对于当前元素的字号
-
大多数浏览器的默认值字号：16px
font-style
-
作用：设置字体的大小
-
语法：font-style:值
-
常用值：
- normal默认值
- italic斜体显示
font-weight
-
作用：设置字体粗细
-
语法：font-weight:值
-
常用值：
- normal默认值
- bold加粗
- 100-900九级字重， 400相当于normal,700相当于bold
- 字体粗细也取决于字体类型，不一样类型粗细也不一样
- 注：不是所有字体都内置了九级字重
line-height
-
作用：设置行高（效果是产生文本行间距）
-
语法：line-height:值
-
特性:实现单行文本的垂直居中
-
测量：文字高+行间距
-
常用值
-
normal默认。设置合理的行间距。
-
px 设置固定的行间距。
-
number设置数字，此数值会与当前的字号相乘来设置行间距。
-
-
-
百分比:相对于font-size计算
.box{ /*line-height:2;*/ line-height:200%; /*产生的效果一致都是字号的两倍*/ } -
font简写
-
作用：设置所有字体属性
-
语法：font: 字体风格 字体加粗 字号/行高 字体;
- 依次【空格】隔开
-
总结：只有当【字号和字体】同时存在简写才是有效的，简写属性可以精简简代码
.box2{ /* font:italic bold 20px "宋体"; */ font:20px "宋体"; }
文本水平对齐方式、垂直对齐、缩进 ,修饰 ，是否换行显示，单词间距，字母间距，首字母样式..
text-align：
-
作用：设置文本的水平对齐方式
-
语法：text-align:值
-
常用值
- left居左对齐 [默认值]。
- right居右对齐。
- center居中对齐。
- justify两端对齐
-
注：适用于块状元素
-
垂直对齐属性(图文对齐上)
vertical-align:top顶线/bottom底线/baseline基线/middle中线;
文本特性元素： 都是以基线对齐的(文字+图片) 而图片的底边就是图片的基线！！
一般来说 我们要修改图片的对齐方式为中线对齐！！但是如果效果不好可以自己去调整！！！
text-decoration
-
作用：设置文本装饰
-
语法：text-decoration:值
-
常用值
- none 默认。定义标准的文本。 【常用】
- underline 定义文本下的一条线 【常用】
- line-through 定义穿过文本的一条线。【比较常用】
- overline 定义文本上的一条线。 【不常用】
text-indent
-
作用：设置文本块首行的缩进
-
语法：line-height:值
-
常用值
- 默认值：0
- 长度值，px,em(更方便)
- 百分比: 相对于元素内容宽进行计算
- 允许负值
color
-
作用：设置文字的颜色
-
语法：color:颜色值
-
常用值
-
颜色的常用表式方法
-
颜色名称：如red、blue等
-
十六进制颜色表示方法
-
语法：如#ff0000
-
说明：#rrggbb r,g,b取值范围为00-ff
- r red 红色
- g green 绿色
-
b blue 蓝色
-
认识常见颜色的写法
-
白色（#ffffff）、黑色（#000000） 红色（#ff0000）、绿色(#00ff00)、蓝色(#0000ff)
-
颜色简写
-
-
rgb颜色表示方法
- 语法：rgb(255,0,0)
- 说明：rgb(r,g,b) r,g,b取值范围为0-255
-
认识常见颜色的写法
- 白色： rgb(255,255,255) 、黑色 : rgb(0,0,0) 红色： rgb(255,0,0) 、绿色： rgb(0,255,0) 、蓝色： rgb(0,0,255)
-
-
transparent透明色rgba(0,0,0,0)
-
color,font-,line-,text-,list- ，cursor都有继承性 除了 text-decocation
控制文本换行属性
控制文本换行 white-space:normal正常(换行)/nowrap不换行，强制一行显示/pre格式化输出
文字转换属性
文本转换属性text-transform:capitalize首字母大写 /lowercase 小写 /uppercase全大写
字符间距
p {
/* 文字间距 letter-spacing:px/em/rem
*/
letter-spacing: 4px;
}
单词间距
单词间距 word-spacing:px/em/rem
word-spacing: 30px;
复合选择器
概述：由两个或多个基础选择器通过不同的方式组合而成的选择器
常用复合选择器
后代元素选择器
-
语法
- E F{ 样式声明 }
- 空格连接一个或多个选择器
-
作用
- 选择E元素内部包含的所有F元素
-
代码示例
.box a{ color:Red; }
子元素选择器
-
语法
- 示例：E>F{ 样式声明 }
- 描述：>大于号 连接一个或多个选择器
-
作用：选择E元素内部包含的所有直接子元素F （第一嵌套层级）
-
代码示例
.box > a{ color:Red; } <div class="box"> <a href="#">这个a会被应用样式</a> <p> <a href="#">这个a不会被应用样式</a> </p> </div>
相邻选择器
-
语法
- 示例：E+F{ 样式声明 }
- 描述：+加号 连接一个或多个选择器
-
作用：E元素之后紧跟着的兄弟元素F
-
代码示例
.box + p{ background-color:red } <p>这个P元素不会被应用样式</p> <div class="box">box</div> <p>这个P元素会被应用样式</p>
交集选择器
-
语法
- 示例：E.F{ 样式声明 }
- 描述：无连接符
-
作用: 选择同时被所有选择器交集选中的元素
-
代码示例
p.box{ background-color:red } <p class="box">这个元素会被应用样式</p> <div class="box">这个元素不会被应用样式</div>
并集选择器
- 语法
- 示例：E，F{ 样式声明 }
- 描述：逗号 连接一个或多个选择器
- 作用：使用逗号分隔的列表来对选择器进行分组，给列表中每一个选择器选中的元素设置样式
- 代码演示
伪类选择器
超链接的四种状态伪类
-
语法
-
语法：：冒号标识
-
代码示例：
a:link{ css样式 }链接未被访问 a:visited{ css样式 }链接被访问过后 a:hover{ css样式 }链接被鼠标悬停 a:active{ css样式 }链接被激活（强调鼠标按下抬起）
-
-
总结： （1）注意书写顺序 l-h-v-a， （2）实际工作中最常用的是:hover, （3）可以与其它选择器结合灵活使用
复合选择器的优先级问题
复合选择器的优先级是组成它的基础选择器的优先级的累加
- 举例代码演示分析：
- 扩展举例课堂问答：
- 第一组： #box .box span{ } #box p span{ }
- 第二组： .box p{ } .box > p{ }
- 第三组： .box * { } .box p { }
- 第四组： body div ul li ul li p span a i {} .ibox{}
总结
（1）连接符不参与优先级计算
（2）*的优先级为0
（3）同级之间比较个数，不同级之间不可跨越
传统布局核心--CSS 盒模型
学习目标
- 能够说出盒模型的概念
- 熟练运用边框属性实现边框效果与小三角
- 能够说出margin值的问题及解决
- 能够使用盒模型完成课堂案例
- 掌握overflow的应用
概述
CSS 盒模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边距、边框、填充、和实际内容。（即装东西的容器）
所有 HTML 标签可以看作盒子，在 CSS 中，"box model" 这一术语是用来设计和布局时使用的。 （即网页布局 就是利用 CSS 摆盒子）
盒模型=外边距margin+内部距padding+边框border+有效内容（width，height）
盒模型宽度= 左外边距+右外边距+左内边距+右内边距+左侧边框+右侧边框+width
内容 content
概述 ：CSS通过为元素设置width和height属性值来规定元素的content内容区域的大小。 元素的内容及子元素默认从内容区域开始排列。
width
- 作用：设置宽度
- 取值
- auto默认值。浏览器可计算出实际的宽度。
- 先只讲px
height
- 作用：设置高度
- 取值
- auto默认值。浏览器可计算出实际的宽度。
- 先只讲px
width:
div角色 块元素 width:auto 取的是父盒子有效内容宽度！！
span角色 行内元素 width:auto 取的是自身内容撑开的宽度！！
width:300px;
width:100%; 取得是父盒子有效宽度的100%
width:20rem;取得的就是html字体大小的20倍
height:
块，行内类型 height:auto 由内容撑开的高度
height:npx;
height:100%;
height:30rem;
min-width最小宽度,max-width最大宽度
min-height最小高度 max-height最大高度边框 border
边框是围绕内容和内边距之间的一条或多条线，通过边框属性指定一个元素的边框的宽度、样式和颜色
border-width边框宽度
- 作用
- 设置所有边框宽度，或者单独地为各边边框设置宽度
- 取值
- 长度值
- 不允许指定负长度值。
- 语法
- 空格隔开1-4个值
- 1个值 设置所有边框宽度
- 2个值 设置上下、左右
- 3个值 设置上、左右、下
- 4个值 设置上、右、下、左
- 代码示例
- border-width:10px;
- border-width:10px 20px
- 空格隔开1-4个值
border-style边框样式
-
作用
- 设置标签所有边框的样式，或者单独地为各边设置边框样式。
-
取值
-
none 定义无边框。 dotted 定义点状边框。 dashed 定义虚线。 solid 定义实线。 double 定义双线。双线的 宽度等于 border-width 的值。
-
-
语法
- 空格隔开 1-4个值
- 1个值 设置所有边框
- 2个值 设置上下、左右
- 3个值 设置上、左右、下
- 4个值 设置上、右、下、左
- 示例
- border-style:solid;
- border-width:solid dashed
- ...
- 空格隔开 1-4个值
-
注意：只有当这个值不是 none 时，边框才可能出现。如果边框样式是 none，边框宽度实际上会重置为 0
border-color 边框颜色
- 作用：设置所有边框颜色，或者单独地为各边边框设置颜色
- 取值
- name - 指定颜色的名称，如 "red" RGB - 指定 RGB 值, 如 "rgb(255,0,0)" Hex - 指定16进制值, 如 "#ff0000"
- 语法
- 示例
- border-color:red;
- border-width:red blue;
- ...
- 1-4个值 空格隔开
- 1个值 设置所有边框
- 2个值 设置上下、左右
- 3个值 设置上、左右、下
- 4个值 设置上、右、下、左
- 示例
简写
授课思路：
（1）先讲四个边简写与讲师演示
（2）简单介绍单个边语法及拆份写法引导学员自主尝练习（讲师可不进行演示）
定义四个边
- 语法：border:样式 宽度 颜色 空格隔开
- 代码示例
单个方向定义
- 说明： 每个边框都可以设置样式宽度颜色 border-方向：宽度 样式 颜色 语法：空格隔开
拆分语法
border-方向-width: border-方向-color border-方向-style
注意:边框会影响盒子实际大小，样式、宽度、颜色无书写顺序要求
内边距 padding
CSS padding（内边距）属性，定义元素边框与标签内容之间的空间。 padding 可以单独改变元素的上、下、左、右边距，也可以一次改变所有的属性。
单个方向设置
- padding-bottom 设置标签的下内边距。 padding-left 设置标签的左内边距。 padding-right 设置标签的右内边距。 padding-top 设置标签的上内边距。
- 代码演示（强调：padding会影响盒子的实际大小）
- 取值
- 先讲px,
- 不可使用负值，
简写
- 语法：padding空格隔开1-4个值
- 规则：1个值：表示【四个方向】的内边距值 2个值：分别表示【上下，左右】的内边距值 3个值：分别表示【上，左右，下】的内边距值 4个值：分别表示【上，右，下、左】的内边距值
- 代码演示
外边距margin
概述：用于设置盒子与盒子之间的距离。margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性
单个方向定义
- margin-bottom 设置标签的下内边距。 margin-left 设置标签的左内边距。
- margin-right 设置标签的右内边距。
- margin-top 设置标签的上内边距。
- 代码示例
简写
- 语法：空格隔开
- 取值1-4个规则
- 取值
- px,
- auto浏览器自动计算
- 允许使用负值
- 外边距应用
- 外边距实现已知宽度的块级盒子居中
【综合案例:企业公告.jpg 】
外边距问题
典理情形一
- 结构关系：嵌套块元素的垂直外边距塌陷
- 问题描述 ：当父元素没有padding,margin,border时子元素与父元素直接相临，子元素的margin值会传递给父元素并且再次与父元素的margin值发生合并最终的结果最终结果是正值取两者中的较大值，负值取绝对值较大的值
- 表现：父子元素公用一个外边距
- 解决方法
- 给父元素设置边框或内边距（慎用）
- 父元素overflow:hidden,改变渲染规则
典型情形二
- 结构 关系：相邻元素垂直外边距合并
- 问题描述 ：当两个块级兄弟元素垂直方向上的margin值直接相遇,会发生合并，最终结果是正值取两者中的较大值，负值取绝对值较大的值
- 表现：两个外边距合并成一个
- 解决方法
- 方法1.尽量只定义其中一个的margin值
- 方法2.给其中一个盒子加父元素overflow:hidden,改变渲染规则
- 其他情况同上【简单带过——如后代元素出现同类问题等】
总结：
（1）设问通过对盒模型的实际使用对比出它与快递盒子的不同之处？ （2）总结盒子模型占位的计算：width/height + padding + margin （3）提示学生注意实际开发的过程 中要明确测量的宽高是内容宽还是包括了padding的占位宽高 （4）垂直方向上相遇的margin值出现折叠问题
overflow详解
概述：溢出元素内容区的内容会如何处理
-
取值
- visible 默认值。内容不会被修剪，会呈现在元素框之外。
- hidden 内容会被修剪，并且其余内容是不可见的。
- scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
- auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
-
应用：京东产品描述的超出隐藏
扫一扫
299
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
