今日知识点:
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 style="width:100px;height:100px;background-color:red;">div</div>
-
注:任何HTML元素都可以设置行间样式
内部样式
-
概述:
在HTMLhead标签的内部,由style标签包含的样式称为内部样式
-
代码示例
<head> <style>css样式 </style>
外部样式
-
概述
总结:
- 行间样式适用于某个元素拥有特殊样式时使用,结构 表现【不分离】
- 内部样式适用于单个页面拥有特殊样式时使用,结构表现【半分离】
- 外部样式适用于多个页面拥有相同样式时使用,结构表现【相分离】
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中以点进行标识:.
.类名{ 样式声明 }
- HTML中通过class属性定义
-
作用:选择所有带有指定类名的元素
-
多类名的使用
- 语法:空格隔开
<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 |
复合选择器 权重值 = 基础选择器求和
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 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
-
应用:京东产品描述的超出隐藏