第二天CSS学习心得
今日知识点：
1、css基础选择器优先级
2、css文本相关属性
3、css选择器进阶（6个）
4、盒模型
初识CSS
学习目标
- 能够说出什么是CSS
- 熟悉CSS的语法规范
- 掌握CSS的三种引入方式，能够使用3种引入方式写一个红色的小方块
什么是CSS?
全称
Cascading Style Sheets
通常称为CSS样式表或层叠样式表（级联样式表）
作用
- 为HTML标记语言提供了一种样式描述
- 即【设置HTML页面中的元素的位置、排版、样式外观等】
如文本内容（字体、大小、对齐方式等）、图片的外形（宽、高、边框等）
CSS语法规范
CSS 规则由两个主要的部分构成：选择器、一条或多条声明
选择器:通常是需要改变样式的 HTML 标签。
声明组：以大括号{}括起来
每条声明由一个属性和一个值组成,
属性与属性值之间以【冒号】分隔
多个声明，用【分号】将每个声明分开
CSS引入方法
当读到一个样式表时，浏览器会根据它来格式化 HTML 文档，插入样式表的方法有三种:行间样式表，内部样式表，外部样式
行间样式
概述：
-
通过HTML元素的style属性设置样式称为行间样式
-
代码示例
div -
注：任何HTML元素都可以设置行间样式
内部样式
-
概述：
在HTMLhead标签的内部，由style标签包含的样式称为内部样式
-
代码示例
外部样式
-
概述
-
外部样式表是指将CSS编写在扩展名为.css 的单独文件中,使用link标签引用
- 新建外部样式表
- 头部标签内部使用link标签引用
-
说明
- href="" 资源链接的地址
- rel表示引入文 件与当前文 档的关系
- stylesheet为样式表
-
总结：
- 行间样式适用于某个元素拥有特殊样式时使用，结构 表现【不分离】
- 内部样式适用于单个页面拥有特殊样式时使用，结构表现【半分离】
- 外部样式适用于多个页面拥有相同样式时使用，结构表现【相分离】
CSS选择器
学习目标
- 掌握常用选择器的使用
- 熟悉选择器的优先级关系
- 掌握调试工具的基本使用
什么是选择器
- CSS选择器是CSS规则的第一部分，每个CSS规则都以一个选择器或一组选择器为开始，
- CSS 选择器即用于“查找”（或选取）要设置样式的 HTML 元素的模式
- 选择器可以分为基础选择器、复合选择器
基本选择器
通配（通用）选择器
- 语法 *{ 样式声明 }
- 作用：匹配任意类型的HTML元素
<style>
/* 页面上所有元素都被选择 */
*{
background-color:green;
}
style>
<body>
<p>pp>
<div>div1div>
<div>div2
<div>div3div>
div>
body>
元素名称选择器
- 语法： 元素名称{ 样式声明 }
- 作用：选择所有同一元素名称的所有元素
/* 选择body */
body{
background-color:green;
}
/* 选择页面上所有的div */
div{
width:100px;
height:100px;
background-color:red;
}
/* 选择页面上所有的p */
p{
background-color: pink;
}
类选择器
-
语法
- HTML中通过class属性定义
如： - css中以点进行标识:.
.类名{ 样式声明 }
- HTML中通过class属性定义
-
作用:选择所有带有指定类名的元素
-
多类名的使用
- 语法：空格隔开
<style>
.box{
background-color:red;
}
.size{
width:100px;
height:100px;
}
style>
<body>
<p class="box size">pp>
<div class="box">div1div>
<div>div2
<div class="box">div3div>
div>
body>
id选择器
-
语法
-
HTML中通过id属性定义
如： -
css中以点进行标识:#
#id名称{ 样式声明 }
-
-
作用:选择所有带有指定类名的元素
#box{
background-color:red;
}
div1
注意：具有唯一性，一般用于页面唯一性的元素如头部、底部等，经常和 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 |
复合选择器 权重值 = 基础选择器求和
CSS 表格
学习目标
-
掌握表格常用css属性
-
能够实现1像素表格细线边框
-
概述：使用 CSS 可以大大提高 效率，更灵活的控制HTML 表格的外观表现
表格边框
指定 CSS 表格边框，使用 border 属性，通常定义td,th的边框属性
表格会呈现双边框，是因为表和 th / td 元素有独立的边界。
table存在默认属性border-collapse：separate
表格的折叠边框
border-collapse表示折叠边框
-
取值
- separate：边框独立（默认值）
- collapse：相邻边被合并(细线边框)
-
table{ border-collapse:collapse; } th{ /*简单代过*/ border:1px solid red; } td{ border:1px solid red; }
CSS字体 ,文本属性
学习目标
- 熟练掌握css常用文本属性
- 熟练掌握css常用字体属性
- 能够说出颜色的常用表示方法
font-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两端对齐
-
注：适用于块状元素
u5ZKa5Lic,size_20,color_FFFFFF,t_70,g_se,x_16)
垂直对齐属性(图文对齐上)
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)
- 白色： rgb(255,255,255) 、黑色 : rgb(0,0,0)
-
-
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;
CSS 盒模型
学习目标
- 能够说出盒模型的概念
- 熟练运用边框属性实现边框效果与小三角
- 能够说出margin值的问题及解决
- 能够使用盒模型完成课堂案例
- 掌握overflow的应用
概述
CSS 盒模型本质上是一个盒子，封装周围的 HTML 元素，它包括：外边距、边框、内填充、和实际内容。（即装东西的容器）
所有 HTML 标签可以看作盒子，在 CSS 中，“box model” 这一术语是用来设计和布局时使用的。
（即网页布局 就是利用 CSS 摆盒子）
盒模型就是盒子在网页上实际占据的区域大小，包含width,height,padding,border,margin;
盒模型的宽度= width + padding-left + padding-right +border-left+border-right+margin-left+margin-right;
内容 content
概述 ：CSS通过为元素设置width和height属性值来规定元素的content内容区域的大小。
元素的内容及子元素默认从内容区域开始排列。
width
- 作用：设置宽度
- 取值
- auto默认值。浏览器可计算出实际的宽度。
- 先只讲px
height
- 作用：设置高度
- 取值
- auto默认值。浏览器可计算出实际的宽度。
- 先只讲px
边框 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
- …
- 空格隔开
-
注意：只有当这个值不是 none 时，边框才可能出现。如果边框样式是 none，边框宽度实际上会重置为 0
border-color 边框颜色
- 作用：设置所有边框颜色，或者单独地为各边边框设置颜色
- 取值
- name - 指定颜色的名称，如 “red”
RGB - 指定 RGB 值, 如 “rgb(255,0,0)”
Hex - 指定16进制值, 如 “#ff0000”
- name - 指定颜色的名称，如 “red”
- 语法
- 示例
- 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 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
-
应用：京东产品描述的超出隐藏