一、CSS3基础
1、CSS
CSS( cascading style sheet,层叠式样式表)是用来给HTML标签添加样式的语言。
2、前端三层
语言 | 功能 | |
---|---|---|
结构层 | HTML | 搭建结构、放置部件、描述语义 |
样式层 | CSS | 美化页面、实现布局 |
行为层 | JavaScript | 实现交互效果、数据收发、表单验证等 |
3、CSS本质
CSS就是样式的“清单”,要书写合适的选择器,然后把指定元素的样式“一条一条罗列”出来。
4、书写位置
内嵌式:在学习CSS时,最常使用内嵌式,顾名思义,内嵌在.html文件中。
在<head> </head>
标签对中,书写<style> </style>
标签对,里面书写CSS语句。
外链式:可以将CSS单独存为.css文件,然后使用<link>
标签引入它。
<link rel="stylesheet" href="css/css.css">
rel:关系。stylesheet:样式表。href:路径和文件名。
外链式的优点:多个html网页,可以共用一个css样式表文件
导入式:导入式是最不常见的样式表导入方法
<style>
@import url( css / css.css);
</ style>
使用导入式引入的样式表,不会等待css文件加载完毕,而是会立即渲染HTML结构,所以页面会有几秒中的“素面朝天”的时间。
行内式:样式可以直接通过style属性写在标签身上。
'<h2 style="color: red; ">我是一个二级标题</h2>'
行内式牺牲了样式表的批量设置样式的能力,只能给一个标签设置样式,所以不常用。
5、基本语法
h1 {
color:green;
font-weight:bold;
font-style:italic;
}
h1:选择器;
6、课程重点
1、CSS中文全称是什么?最新版本是?功能是?
2、前端分为哪几层?功能分别是什么?
3、样式表的书写位置有哪些﹖我们常用哪些?
7、课程难点
1、CSS的语法要练熟,不要犯一些低级错误
2、背诵记忆CSS属性是重中之重
二、CSS3选择器
1、标签选择器
标签选择器也称元素选择器、类型选择器,它直接使用元素的标签名当做选择器,将选择页面上所有该种标签。
span{
/* 选择所有的span */
color: red;
}
标签选择器“覆盖面”非常大,所以通常用于标签的初始化。
ul{
/* 去掉小圆点 */
list-style: none;
}
2、id选择器
id属性:标签可以有id属性,是这个标签的唯一标识。同一个页面上不能有相同id的标签。
id的名称只能由字母、数字、下划线、短横构成,且不能以数字开头,字母区分大小写,但习惯上一般为小写字母。
<p id="para1">我是段落</p>
CSS选择器可以使用井号#前缀,选择指定id的标签。
#para1{
color: red;
}
3、class选择器
class属性表示“类名”。类名的命名规范和id的命名规范相同。
'<p class="warning">我是段落</p>'
使用点.前缀选择指定class的标签。
多个标签可以为相同类名。
同一个标签可以同时属于多个类,类名用空格隔开。
.wraning{
color: red;
}
<p class="wraning">我是段落</p>
<p class="wraning spec">我是段落</p>
4、原子类
在做网页项目前,可以将所有的常用字号、文字颜色、行高、外边距、内边距等都设置为单独的类。
.fs12{
font-size: 12px;
}
.fs14{
font-size: 14px;
}
.fs16{
font-size: 16px;
}
5、复合选择器
选择器名称 | 示例 | 示例的意义 |
---|---|---|
后代选择器 | .box .spec | 选择类名为box的标签内部的类名为spec的标签 |
交集选择器 | li.spec | 选择既是li标签,也属于spec类的标签 |
并集选择器 | ul,ol | 选择所有ul和ol标签 |
后代选择器:CSS选择器中,使用空格表示“后代”。
“后代”并不一定是“儿子”。后代选择器可以有很多空格,隔开好几代。
.box .spec em{
color: red;
}
<div class="box">
<p class="spec">我是段落<em>强调文字</em></p>
交集选择器:选择有.spec类的h3标签,此时应该使用交集选择器。
h3.spec{
font-style: italic;
}
并集选择器:并集选择器也叫作分组选择器,逗号表示分组。
ul,ol{
list-style: none;
}
6、伪类
伪类是添加到选择器的描述性词语,指定要选择的元素的特殊状态,超级链接拥有4个特殊状态。
伪类 | 意义 |
---|---|
a:link | 没有被访问的超级链接 |
a:visited | 已经被访问过的超级链接 |
a:hover | 正被鼠标悬停的超级链接 |
a:active | 正被激活的超级链接(按下按键但是还没有松开按键) |
“爱恨准则”
a标签的伪类书写,要按照“爱恨准则”的顺序,否则会有伪类不生效。
LOVE HATE
: link --> :visited --> :hover --> : active
7、元素关系选择器
名称 | 举例 | 意义 |
---|---|---|
子选择器 | div>p | div的子标签p |
相邻兄弟选择器 | img+p | 图片后面紧跟着的段落将被选中 |
通用兄弟选择器 | p~span | p元素之后的所有同层级span元素 |
子选择器
当使用>符号分隔两个元素时,它只会匹配那些作为第一个元素的直接后代元素,即两个标签为父子关系。从IE7开始兼容。
.box>p{
}
注:后代选择器不一定限制是子元素。
.box p{
}
相邻兄弟选择器
相邻兄弟选择器(+)介于两个选择器之间,当第二个元素紧跟在第一个元素之后,并且两个元素都是属于同一个父元素的子元素,则第二个元素将被选中。说白了, a+b就是选择“紧跟在a后面的一个b"。从IE7开始兼容。
img+span{
color: green;
}
<p>
<img src="images/bj/0.jpg" alt="">
<span>这是北京故宫</span><!-- 将被选择 -->
<span>这是北京故宫</span>
</p>
<p>
<img src="images/bj/1.jpg" alt="">
<span>这是北京鸟巢</span><!-- 将被选择 -->
</p>
<span>你好</span>
<span>你好</span>
通用兄弟选择器
通用兄弟选择器(~ ) , a~b选择a元素之后所有同层级b元素。从IE7开始兼容。
h3~span{
font-style: italic;
}
<span>我是后面的span</span>
<h3>我是一个三级标题</h3>
<span>我是后面的span</span><!-- 将被选择 -->
<span>我是后面的span</span><!-- 将被选择 -->
<span>我是后面的span</span><!-- 将被选择 -->
<span>我是后面的span</span><!-- 将被选择 -->
<p>我是一个段落</p>
<span>我是后面的span</span><!-- 将被选择 -->
<span>我是后面的span</span><!-- 将被选择 -->
<div>
<span>多了一个级别的span</span>
<span>多了一个级别的span</span>
</div>
8、序号选择器
举例 | 意义 |
---|---|
:firts-child | 第一个子元素 |
:last-child | 最后一个子元素 |
:nth-child(3) | 第3个子元素 |
:nth-of-type(3) | 第3个某类型子元素 |
:nth-last-child(3) | 倒数第3个子元素 |
:nth-last-of-type(3) | 倒数第3个某类型子元素 |
:first-child表示“选择第一个子元素”,比如下面的例子就表示选择.box1盒子中第一个p。
.box1 p:first-child{ /*注意p*/
color: red;
}
<div class="box1">
<p>1</p> <!--将被选择-->
<p>2</p>
<p>3</p>
<p>4</p>
</div>
:last-child表示“选择最后一个子元素”,比如下面的例子就表示选择.box1盒子中最后一个p。
.box1 p:last-child{
color: blue;
}
:nth-child()可以选择任意序号的子元素。
.box2 p:nth-child(3){
color: green;
}
<div class="box2">
<p>1</p>
<p>2</p>
<p>3</p><!-- 将被选择 -->
<p>4</p>
</div>
:nth-child()可以写成an + b的形式,表示从b开始每a个选一个,注意不能写为b + an。
2n+1等价于odd,表示奇数。
.box3 p:nth-child(2n+1){
color: orange;
}
等价于
.box3 p:nth-child(odd){
color: orange;
}
2n等价于even,表示偶数。
.box3 p:nth-child(2n+1){
color: orange;
}
等价于
.box3 p:nth-child(even){
color: orange;
}
:nth-of-type()将选择同种标签指定序号的子元素。
.box4 p:nth-of-type(3){
color: blue;
}
<div class="box4">
<p>我是1号p</p>
<p>我是2号p</p>
<h3>我是1号h3</h3>
<h3>我是2号h3</h3>
<p>我是3号p</p><!-- 将被选择 -->
<p>我是4号p</p>
<h3>我是3号h3</h3>
<h3>我是4号h3</h3>
</div>
:nth-last-child()和:nth-last-of-type()都是倒数选择。
.box5 p:nth-last-child(2){
color: red;
}
<div class="box5">
<p>我是1号p</p>
<p>我是2号p</p>
<p>我是3号p</p><!-- 将被选择 -->
<p>我是4号p</p>
</div>
9、属性选择器(实际用很少,了解即可)
举例 | 意义 |
---|---|
img[alt] | 选择有alt属性的img标签 |
img[alt=“故宫”] | 选择alt属性是故宫的img标签 |
img[alt^=“北京”] | 选择alt属性以北京开头的img标签 |
img[alt$=“夜景”] | 选择alt属性以夜景结尾的img标签 |
img[alt*=“美"] | 选择有alt属性中含有美字的img标签 |
img[ alt~=“手机拍摄”] | 选择有alt属性中有空格隔开的手机拍摄字样的img标签 |
img[alt|=“参赛作品”] | 选择有alt属性以“参赛作用-”开头的img标签 |
注:
[alt] 有这个属性
[alt = “北京故宫”] 精确匹配
[alt ^= “abc”] 开头匹配
[alt $= “abc”] 结尾匹配
[alt *= “abc”] 任意位置匹配
[alt |= “abc”] abc-开头
[alt ~= “abc”] abc为空格分开的独立部分,左右都需要分开
注:简写:书写width、height、border时,只需要打w200键入enter,其他依次类推,就可以了。
10、CSS3新增伪类
伪类 | 意义 |
---|---|
:empty | 选择空标签 |
:focus | 选择当前获得焦点的表单元素 |
:enabled | 选择当前有效的表单元素 |
:disabled | 选择当前无效的表单元素 |
:checked | 选择当前已经勾选的单选按钮或者复选框 |
:root | 选择根元素,即标签 |
11、伪元素
CSS3新增了“伪元素”特性,顾名思义,表示虚拟动态创建的元素。伪元素用双冒号表示,IE8可以兼容单冒号。
伪元素 | 意义 |
---|---|
::before | 其将成为匹配选中的元素的第一个子元素,必须设置content属性表示其中的内容 |
::after | 其将成为匹配选中的元素的最后一个子元素,必须设置content属性表示其中的内容 |
::selection | 应用于文档中被用户高亮的部分(使用鼠标圈选的部分) |
::first-letter | 选中某元素中(必须是块级元素)第一行的第一个字母 |
::first-line | 选中某元素中(必须是块级元素)第一行全部文字 |
a::before {
content: '☆';
}
a::after {
content: '❤';
}
.box1 {
width: 400px;
height: 300px;
border: 1px solid #000;
}
.box1::selection {
background-color: springgreen;
color: deeppink;
}
.box1::first-letter {
font-size: 50px;
}
.box1::first-line {
text-decoration: underline;
}
12、层叠性和选择器权重计算
层叠性:多个选择器可以同时作用于同一个标签,效果叠加。
层叠性的冲突处理:id权重> class权重>标签权重。
复杂选择器权重计算:复杂选择器可以通过( id的个数,,class的个数,标签的个数)的形式,计算权重。
!important提升权重:如果我们需要将某个选择器的某条属性提升权重,可以在属性后面写!important。(慎用)
/* 权重(2,0,1) */
#box1 #box2 p {
color: red;
}
/* 权重(2,1,2) */
#box1 div.box2 #box3 p {
color: green;
}
/* 权重(0,3,1) */
.box1 .box2 .box3 p {
color: blue;
}
/* 权重(0,1,1) */
.list li {
color: red;
}
/* 权重(0,1,0) */
.spec {
color: blue;
}
<div id="box1" class="box1">
<div id="box2" class="box2">
<div id="box3" class="box3">
<p>我是段落</p>
</div>
</div>
</div>
<ul class="list">
<li>列表项</li>
<li class="spec">列表项</li>
<li class="spec">列表项</li>
<li>列表项</li>
</ul>
13、重点内容
1、CSS选择器有哪些?请按CSS2.1和CSS3分别回答
2、类名的使用很灵活,它有哪些用法?
3、什么是伪类?什么是伪元素?
14.难点内容
选择器权重计算(面试常考)
三、文本与字体属性
1、常用文本样式属性
color属性:color属性可设置文本内容的前景色。
color属性主要可以用英语单词、十六进制、rgb()、 rgba()等表示法.
color属性–十六进制表示法:十六进制表示法是所有设计软件中都通用的颜色表示法,设计师给我们的设计图上面标注的颜色,通常为十六进制表示:color:#ff0000。
比如十六进制ff就是十进制的255,每种颜色分量都是0~255的数字。
如果颜色值是#aabbcc的形式,可以简写为#abc。
黑色是#000,白色是#fff,常见的灰色有#ccc、 #333、#2f2f2f等。
color属性- rgb()表示法:颜色也可以用rgb()表示法。
例:color: rgb(255,o, 0);
color属性- rgba()表示法:颜色也可以用rgba()表示法,最后一个参数表示透明度,介于e到1之间,0表示纯透明,1表示纯实心。
例:color: rgba(255,0,0,.65)。
font-size属性:font-size属性用来设置字号,单位通常为px。今后课程上老师还会介绍em、rem单位。例:font-size: 30px。
网页文字正文字号通常是16px,浏览器最小支持10px字号。
font-weight属性:font-weight属性设置字体的粗细程度,通常就用normal和bold两个值。
示例 | 意义 |
---|---|
font-weight: normal; | 正常粗细,与400等值 |
font-weight: bold; | 加粗,与700等值 |
font-weight: lighter; | 更细,大多数中文字体不支持 |
font-weight: bolder; | 更粗,大多数中文字体不支持 |
font-style属性:font-style属性设置字体的倾斜。
示例 | 意义 |
---|---|
font-weight: normal; | 取消倾斜,比如可以把天生倾斜的i、em等标签设置为不倾斜 |
font-weight: italic; | 设置为倾斜字体(常用) |
text-decoration属性:text-decoration属性用于设置文本的修饰线外观的(下划线、删除线)
示例 | 意义 |
---|---|
text-decoration: none; | 没有修饰线 |
text-decoration: underline; | 下划线 |
text-decoration: line-through; | 删除线 |
2、字体属性详解
font-family属性:用于设置字体。例:font-family:“微软雅黑”。
字体可以是列表形式,一般英语字体放到前面,后面的字体是前面的字体的“后备”字体。
font-family: serif,“Times New Roman”,“微软雅黑”。
注:字体名称中有空格,必须用引号包裹。
中文字体也可以称呼它们的英语名字:
中文字体名 | 等价的英语字体名 |
---|---|
font-family:“微软雅黑" | font-family: “Microsoft Yahei” |
font-family:“宋体” | font-family: “SimSun” |
字体通常必须是用户计算机中已经安装好的字体,所以一般来说设置为微软雅黑和宋体较多,设置成其他字体较少。
3、段落和行相关属性
text-indent属性:定义首行文本内容之前的缩进量,缩进两个字符。应该写作:text-indent: 2em;
em表示字符宽度。
line-height属性用于定义行高。
line-heigh属性的单位可以是以px为单位的数值:line-height: 30px;
line-heigh属性也可以是没有单位的数值,表示字号的倍数,这是最推荐的写法:line-height: 1.5;
line-heigh属性也可以是百分数,表示字号的倍数:line-height: 150%;
单行文本垂直居中:设置行高=盒子高度,即可实现单行文本垂直居中。
设置text-align: center,即可实现文本水平居中
font合写属性:font属性可以用来作为font-style, font-weight,font-size,line-height和font-family属性的合写.
font: 20px/1.5 Arial,“微软雅黑”;
20px/1.5表示字号/行高,Arial,"微软雅黑"表示字体。
4、继承性
文本相关的属性普遍具有继承性,只需要给祖先标签设置,即可在后代所有标签中生效。
color |
---|
font-开头的 |
list-开头的 |
text-开头的 |
line-开头的 |
因为文字相关属性有继承性,所以通常会设置body标签的字号、颜色、行高等,这样就能当做整个网页的默认样式了。
就近原则:在继承的情况下,选择器权重计算失效,而是“就近原则”。
/* 就近原则,谁描述的近,听谁的 */
#box1 #box2 {
color: red;
}
.box1 .box3 {
color: blue;
}/*为蓝色*/
/* (3,0,0) 注意继承的选择器,权重可以看做是0,权重没有选中的大 */
/* #box1 #box2 #box3 {
color: red;
}
p {
color: green;
} */
/*为绿色,p被选中了*/
5、课程重点
1、背诵属性:文字颜色、字体、倾斜、加粗和下划线
2、什么是行高?如何制作单行文本垂直居中?
3、如何使用font属性快速设置加粗、字号、行高、字体?
6、课程难点
什么是继承性?哪些属性有继承性?什么是就近原则?
四、盒模型
1、盒模型
所有HTML标签都可以看成矩形盒子,由width、height、padding、border构成,称为“盒模型”。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qfAsaUqp-1620462091889)(C:/Users/dell/AppData/Roaming/Typora/typora-user-images/image-20210506223056462.png)]
width、height不是盒子总宽高。
盒子的总宽度= width +左右padding +左右border。
盒子的总高度= height + 上下padding +上下border。
2、width和height属性
width属性:width属性表示盒子内容的宽度。
width属性的单位通常是px,移动端开发也会涉及百分数、rem等单位。
当块级元素(div、h系列、li等)没有设置width属性时,它将自动撑满,但这并不意味着width可以继承。
height属性:height属性表示盒子内容的高度。
height属性的单位通常是px,移动端开发也会涉及百分数、rem等单位。
盒子的height属性如果不设置,它将自动被其内容撑开,如果没有内容,则height默认是0。
3、padding属性详解
padding是盒子的内边距,即盒子边框内壁到文字的距离。
padding是四个方向的,四个方向的padding,可以分别用小属性进行设置。
小属性 | 意义 |
---|---|
padding-top | 上padding |
padding-right | 右padding |
padding-bottom | 下padding |
padding-left | 左padding |
padding的四数值写法:
padding属性如果用四个数值以空格隔开进行设置,分别表示上、右、下、左的padding。
padding: | 10px | 20px | 30px | 40px |
---|---|---|---|---|
上 | 右 | 下 | 左 |
padding的三数值写法:
padding属性如果用三个数值以空格隔开进行设置,分别表示上、左右、下的padding。
padding: | 10px | 20px | 30px |
---|---|---|---|
上 | 左右 | 下 |
padding的二数值写法:
padding属性如果用二个数值以空格隔开进行设置,分别表示上下、左右的padding。
padding: | 10px | 20px |
---|---|---|
上下 | 左右 |
4、margin属性详解
margin是盒子的外边距,即盒子和其他盒子之间的距离。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FGis0pmF-1620462091891)(C:/Users/dell/AppData/Roaming/Typora/typora-user-images/image-20210507000150157.png)]
margin也有四个方向:
小属性 | 意义 |
---|---|
margin-top | 上margin,“向上踹” |
margin-right | 右margin,“向右踹” |
margin-bottom | 下margin,“向下踹” |
margin-left | 左margin,“向左踹” |
margin的塌陷:竖直方向的margin有塌陷现象:小的margin会塌陷到大的margin中,从而margin不叠加,只以大值为准。
一些元素(比如body、ul、p等)都有默认的margin,在开始制作网页的时候,要将他们清除。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-v60gIMwa-1620462091892)(C:/Users/dell/AppData/Roaming/Typora/typora-user-images/image-20210507000507916.png)]
盒子的水平居中:将盒子左右两边的margin都设置为auto,盒子将水平居中
文本居中是text-align: center;和盒子水平居中是两个概念
盒子的垂直居中,需要使用绝对定位技术实现
.box {
margin: 0 auto; /*上下是o,左右自动*/
}
文本居中是text-align: center;和盒子水平居中是两个概念
盒子的垂直居中,需要使用绝对定位技术实现。
注:/* 行高等于盒子高,让文字垂直居中 */
5、盒模型计算
* {
margin: 0;
padding: 0;
}
.box {
width: 400px;
height: 300px;
border: 6px solid blue;
margin: 40px auto;
}
.box .c1 {
/* 老大实际占有的宽度是400px,实际占有的高度时200px,并且向下踹20px */
/* 它只给老二留下了80px */
width: 388px;
height: 188px;
border: 6px solid green;
margin-bottom: 20px;
}
.box .c2 {
/* 老二还剩下400px宽度,80px高度的总空间 */
width: 388px;
height: 48px;
padding: 10px 0;
border: 6px solid orange;
}
<div class="box">
<div class="c1">1</div>
<div class="c2">2</div>
</div>
6、box-sizing属性
将盒子添加了box-sizing: border-box;之后,盒子的width,height数字就表示盒子实际占有的宽高(不含margin)了,即padding、border变为“内缩”的,不再“外扩”。
.box {
box-sizing: border-box;
width: 200px;
height: 200px;
border: 10px solid #000;
padding: 10px;
}
注:box-sizing属性大量应用于移动网页制作中,因为它结合百分比布局、弹性布局等非常好用,在PC页面开发中使用较少。
7、display属性
行内元素和块级元素
display属性类型 | 是否能并排显示 | 是否能设置宽高 | 当不设置width属性时 | 举例 |
---|---|---|---|---|
块级元素 | 否 | 是 | width自动撑满 | div,section,header,h系列,li,ul等 |
行内元素 | 是 | 否 | width自动收缩 | a,span,em,b,u,i等 |
行内块
img和表单元素是特殊的行内块,它们既能够设置宽度高度,也能够并排显示。
行内元素和块级元素的相互转换
使用display: block;即可将元素转为块级元素。
使用display : inline;即可将元素转为行内元素,将元素转为行内元素的应用不多见。
使用display : inline-block;即可将元素转为行内块。
元素的隐藏
使用display: none;可以将元素隐藏,元素将彻底放弃位置,如同没有写它的标签一样。
使用visibility: hidden;可以也可以将元素隐藏,但是元素不放弃自己的位置。
8、课程重点
什么是width和height ?它们是元素的实际大小么?
元素实际大小和元素空间尺寸分别指什么?
box-sizing属性的作用是什么?
margin的塌陷
用四个数值、三个数值、两个数值描述padding和margin
实现盒子居中
9、课程难点
盒模型的计算,尤其是父子盒模型的计算
行内元素和块级元素的相互转换