1.css的发展历程
从HTML被发明开始,样式就以各种形式存在,不同的浏览器结合他们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。
随着HTML的成长,为了满足页面设计者的需求,HTML添加了很多显示功能。但是随着这些功能的增加,HTML变得越来越杂乱,而且HTML页面也越来越臃肿,于是CSS便诞生了。
CSS用于控制网页的样式和布局, 修饰页面效果,可以配合脚本语言动态的对网页各元素进行格式化,在提升用户体验方面功不可没。
-
CSS1: W3C 推荐,CSS1 发布于 1996 年 12 月 17 日。1999 年 1 月 11 日,此推荐被重新修订。
-
CSS2:W3C 推荐,CSS2 发布于 1999 年 1 月 11 日。CSS2 添加了对媒介(打印机和听觉设备)和可下载字体的支持。
-
CSS3:将 CSS 划分为多个小模块: 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局、弹性盒子等。
2.css网页的美容师
CSS的出现,拯救了混乱的HTML,也拯救了我们web开发者,让我们的网页更加丰富多彩。
CSS最大的贡献就是:让HTML从样式中脱离苦海,实现了HTML专注做结构,样式使用CSS来实现。
如果JavaScript是网页的魔法师,那么CSS就是网页的美容师。
3.css初识
CSS(Cascading Style Sheets的缩写)
CSS通常称为CSS样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局等外观显示样式。
CSS以HTML为基础,提供了丰富的功能,如字体、颜色、背景的控制及整体排版等。而且还可以针对不同的浏览器设置不同的样式。
4.css样式规则
使用CSS时,需要了解CSS样式规则,具体格式如下:
CSS规则主要由两个主要部分构成:选择器,以及一条或多条声明。
在上面的样式规则中:
1.选择器用于指定css样式作用的HTML对象,花括号内是对该对象设置的具体样式。
2.属性和属性值之间以“键值对”的形式出现。
3.属性是对指定的对象设置的样式属性,例如字体大小、文本颜色等。
4.属性和属性值之间用英文“:”连接。
5.多个键值对之间使用英文“;”区分。
示例
h1 { /*选择器*/
color: red; /*声明*/
font-size: 14px; /*声明*/
}
5.css引入方式
1.行内样式
直接在标签的属性中使用style声明,在style属性中添加css声明即可。
由于要将表现(样式)和内容(结构)混杂在一起,行内样式表会损失掉样式表的许多优势。请慎用这种方法,例如当样式仅需要在一个元素上应用一次时。
<!--在标签内部再嵌套一个内嵌标签来设置样式-->
<h1>这是一个<span style="color: red;">行内样式表</span>的css</h1>
2.内部样式表(内联样式)
定义在head或body标签中,使用style标签.
当单个文档需要特殊的样式时,就应该使用内部样式表。
/*内部定义的style样式*/
<style type="text/css">
h1 {
background-color: deeppink;
color: blue;
}
</style>
3.外部样式表
定义在外部的css文件中,需要在head中引入相应的css文件
当样式需要应用于很多页面时,外部样式表将是理想的选择。在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观。每个页面使用<link> 标签链接到样式表。
(1)html文件中:使用link来导入css文件
/*关联外部的css样式文件*/
<link type="text/css" rel="stylesheet" href="../css/test.css" />
type:定义链接文档的类型,在这里需要指定为"text/css",表示链接的外部文件为css样式表。
rel:定义当前文档与被链接文档之间的关系,在这里需要指定为"stylesheet",表示被链接的文档是一个样式表文件。
href:定义所链接外部样式表文件的url,可以是相对路径,也可以是绝对路径。
(2)css文件中:定义CSS样式
h1{
background-color: rosybrown;
color: #0000FF;
}
4.三种样式表总结
样式表样式表 | 优点 | 缺点 | 使用情况 | 控制范围 |
---|---|---|---|---|
行内样式表 | 书写方便,权重高 | 没有实现结构与样式相分离 | 较少 | 控制一个标签(少) |
内部样式表 | 部分结构和样式相分离 | 没有彻底分离 | 较多 | 控制一个页面(中) |
外部样式表 | 完全实现结构和样式相分离 | 需要引入 | 最多,强烈推荐 | 控制整个站点(多) |
3种样式表的优先级:
1.行内样式表 > 内部样式表 = 外部样式表
2.当内部样式表和外部样式表同时存在时,采用就近原则来使用样式
6.css字体属性
1.font-size:字号大小
font-size属性用于设置字号,该属性的值可以使用相对长度单位,也可以使用绝对长度单位。其中,相对长度单位比较常用,推荐使用像素单位px,绝对长度单位使用较少。
(1)tips:
现在网页中普遍使用14px+。
尽量使用偶数的数字字号,ie6等老式浏览器支持奇数会有bug。
<style>
h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
p {
font-size: 14px;
}
</style>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
相对长度单位 | 说明 |
---|---|
em | 相对于当前对象内文本的字体尺寸,如果父盒子字体大小为16px,1em=16px |
px | 像素 |
绝对长度单位 | 说明 |
in | 英寸 |
cm | 厘米 |
mm | 毫米 |
pt | 点 |
(2)em
em:相对长度单位。相对于当前对象内文本的字体尺寸。如当前行内文本的字体尺寸未被人为设置,则相当于浏览器的默认字体尺寸。1em=16px 24px/16px=1.5em
(3)px
px:像素(Pixel),相对于设备的长度单位,像素是相对于显示器屏幕分辨率而言的。譬如,WINDOWS的用户所使用的分辨率一般是96像素/英寸。而MAC的用户所使用的分辨率一般是72像素/英寸。
(4)in
in:英寸(Inch),绝对长度单位。
(5)cm
cm:厘米(Centimeter),绝对长度单位。
(6)mm
mm:毫米(Millimeter),绝对长度单位。
(7)pt
pt:点(Point),绝对长度单位,是1/72英寸。1in=72pt=96px
其中:1in = 2.54cm = 25.4 mm = 72pt = 96px = 6em(windows) ;
容器的大小我们经常用px做单位,字体大小(font-size)很多国内的人使用px做单位,其实用px做字体单位唯一的致命缺点就是在IE下无法用浏览器字体缩放的功能。或者以前的按住Ctrl+滚动鼠标的中间的滚轮。
2.font-family:字体
font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等。例如将网页中所有段落文本的字体都设置为微软雅黑,可以使用如下CSS样式代码:
p {
font-family:"微软雅黑";
}
/*可以同时指定多个字体,中间以逗号隔开,表示如果浏览器不支持第一个字体,则会尝试下一个,直到找到合适的字体*/
常用技巧:
各种字体之间必须使用英文状态下的逗号“,”分隔。
中文字体需要加英文状态下的引号,英文字体一般不需要加引号。当需要设置英文字体时,英文字体名必须位于中文字体名之前。例如:font-family: Arial, "微软雅黑"; 。
如果字体名中包含空格、#、$等符号,则该字体必须加英文状态下的单引号或双引号,例如:font-family: "Times New Roman";。
尽量使用系统默认字体,保证在任何用户的浏览器中都能正确显示。
3.CSS Unicode字体
在CSS中设置字体名称,是可以直接写中文的。但是在文件编码(GB2312、utf-8等)不匹配时会产生乱码的错误。xp系统不支持类似“微软雅黑”的中文。
方案一:可以使用英文来替代,比如:font-family:"Microsoft Yahei"; 。
方案二:在CSS中直接使用Unicode编码来写字体名称可以避免这些错误。使用Unicode写中文字体名称,浏览器是可以正确解析的。比如:font-family:"\5FAE\8F6F\96C5\9ED1",表示设置字体为“微软雅黑”。
在Unicode编码表中,中文的 取值范围是\u4e00~\u9fa5
字体名称 | 英文名称 | Unicode编码 |
---|---|---|
宋体 | Simsun | \5B8B\4F53 |
新宋体 | NSimsun | \65B0\5B8B\4F53 |
黑体 | SimHei | \9ED1\4F53 |
微软雅黑 | Microsoft YaHei | \5FAE\8F6F\96C5\9ED1 |
楷体_GB2312 | KaiTi_GB2312 | \6977\4F53_GB2312 |
隶书 | LiSu | \96B6\4E66 |
幼圆 | YouYuan | \5E7C\5706 |
华文细黑 | STXihei | \534E\6587\7EC6\9ED1 |
细明体 | MingLiU | \7EC6\660E\4F53 |
新细明体 | PMingLiU | \65B0\7EC6\660E\4F53 |
4.font-weight:字体粗细
字体加粗除了用 b 和 strong 标签外,还可以使用CSS来实现,但CSS是没有语义的。
font-weight属性用于定义字体的粗细,其可用属性值:normal、bold、bolder、lighter、100~900(100的整数倍)。
<style type="text/css">
p {
font-weight: normal;
}
div {
font-weight: bold;
}
span {
font-weight: bolder;
}
</style>
<p>这是normal的文本</p>
<div>这是bold的文本</div>
<span>这是bolder的文本</span>
5.font-style:字体风格
字体倾斜除了用 i 和 em 标签外,可以使用CSS实现,但CSS是没有语义的。
font-style属性用于定义字体风格,如设置斜体、倾斜或正常字体,其可用属性值如下:
normal:默认值,浏览器会显示标准的字体样式。
italic:浏览器会显示斜体的字体样式。
oblique:浏览器会显示倾斜的字体样式。
<style>
p {
font-style: normal;
}
div {
font-style: italic;
}
span {
font-style: oblique;
}
</style>
<p>这是一个段落,正常。</p>
<div>这是一个段落,斜体。</div>
<span>这是一个段落,斜体。</span>
6.font综合设置字体样式
font属性用于对字体样式进行综合设置,其基本语法如下:
选择器 {
font: font-style font-weight font-size/line-height font-family;
}
注意:使用font属性时,必须按照上面语法格式中的顺序书写,不能更换顺序,各个属性以空格隔开。
其中不需要的属性可以省略(取默认值),但必须保留font-size、font-family属性,否则font属性将不起作用。
<style type="text/css">
p{
font: italic bold 12px/30px Georgia, serif;
}
</style>
<p>这是一个设置了字体样式的文本</p>
7.CSS文本属性
1.color 文本颜色
color属性用于指定文本的颜色,有3种表现形式。
(1)color-name:使用颜色名称,如:red, transparent
(2)hex-number:使用十六进制数表示,取值是0~f,每个颜色使用两位表示,如:#ff0000表示红色
(3)rgb-number:使用rgb颜色值表示,取值0~255,如rgb(255,0,0),rgba(100%, 0%, 0%, 0.5)
需要注意的是,如果使用RGB代码的百分比颜色值,取值为0时也不能省略百分号,必须写为0%。a的值使用小数表示
<style type="text/css">
h1 {
color: red;
}
h2 {
color: #00ff00;
}
h3 {
color: rgb(0, 0, 255);
}
</style>
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
2.text-align 文本对齐方式
text-align用于指定元素文本的水平对齐方式,取值有left、right、center、justify(两端对齐文本)
<style type="text/css">
h1 {
text-align: left; /*左对齐*/
}
h2 {
text-align: center; /*居中对齐*/
}
h3 {
text-align: right; /*右对齐*/
}
p {
text-align: justify; /*分散对齐,主要针对英文段落中出现空格时,由于两边对齐,空格的大小会有变化*/
}
</style>
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<p>当我年轻的时候,我梦想改变这个世界;当我成熟以后,我发现我不能够改变这个世界,
我将目光缩短了些,决定只改变我的国家;当我进入暮年以后,我发现我不能够改变我们的国家,
我的最后愿望仅仅是改变一下我的家庭,但是,这也不可能。当我现在躺在床上,行将就木时,
我突然意识到:如果一开始我仅仅去改变我自己,然后,我可能改变我的家庭;在家人的帮助和鼓励下,
我可能为国家做一些事情;然后,谁知道呢?我甚至可能改变这个世界。”</p>
3.text-decoration 文本修饰
text-decoration用于对文本添加修饰,如下划线、删除线等。有如下取值:
(1)none:默认,定义标准的文本,没有任何修饰。
(2)underline:定义在文本下方的一条线
(3)overline:定义在文本上方的一条线
(4)line-through:定义穿过文本的一条线
<style type="text/css">
h1 {
text-decoration: none;
}
h2 {
text-decoration: overline;
}
h3 {
text-decoration: line-through;
}
h4 {
text-decoration: underline;
}
h5 {
text-decoration: blink;
}
</style>
4.text-transform 文本转换
text-transform用于转换文本的大小写(主要用于英文),其取值有:
none:默认
capitalize:文本中每个单词以大写字母开头
uppercase:所有单词字母都大写
lowercase:所有单词字母都小写
<style>
h1 {text-transform:uppercase;}
h2 {text-transform:lowercase;}
h3 {text-transform:capitalize;}
</style>
5.text-indent 文本缩进
text-indent 属性规定文本块中首行文本的缩进。取值有:
数值:表示像素值
百分比:基于父元素宽度的百分比的缩进。
注意: 负值是允许的。如果值是负数,将第一行左缩进。
<style>
p {
text-indent:50px;
}
</style>
<!-- 小技巧: 首行缩进2字符使用 2em -->
6.text-shadow 文本阴影
text-shadow用于设置文本的阴影效果。语法格式是
text-shadow: h-shadow v-shadow blur color;
-
h-shadow:必需。水平阴影的位置。允许负值。horizontal, X轴往右是正值
-
v-shadow:必需。垂直阴影的位置。允许负值。 vertical,Y轴向下是正值
-
blur:可选。模糊的距离。
-
color:可选。阴影的颜色。
<style type="text/css">
h1 {
text-shadow: 2px 2px #FF0000;
}
h2 {
text-shadow: 2px 2px 8px #FF0000;
}
h3 {
color: white;
text-shadow: 2px 2px 4px #000000;
}
h4 {
text-shadow: 0 0 3px #FF0000;
}
</style>
7.direction文本方向
direction 用于指定文本的方向。取值如下:
ltr:默认的,文本方向从左到右 left to right
rtl:文本方向从右到左。right to left
<style type="text/css">
p {
direction: ltr;
}
div {
direction: rtl;
}
</style>
8.letter-spacing 字符间距
letter-spacing 属性增加或减少字符间的空白(字符间距),使用数值表示,可以是负数。主要用于汉字
<style>
h1 {
letter-spacing:2px;
}
h2 {
letter-spacing:-3px;
}
</style>
9.word-spacing 字间距
word-spacing属性增加或减少单词与单词之间的空白,允许使用负值。主要用于英文段落
<style>
p {
word-spacing:30px;
}
</style>
10.line-height 行高
line-height 用于设置文字行与文字行之间的距离。取值如下:
number:设置数字,此数字会与当前的字体尺寸相乘来设置行间距。
length:设置固定的行间距 px em 。
%:基于当前字体尺寸的百分比行间距。
注意:一般情况下,行距比字号大7 8像素即可。
<style>
span {
line-height:2;
}
p {
line-height:20px;
}
div {
line-height:100%;
}
</style>
8.CSS注释
css规则是使用 /*需要注释的内容*/ 进行注释的。例如:
p {
font-size: 14px; /*设置字体的大小是14像素*/
}
/* 快捷键 ctrl + / 或者ctrl + shift + /*/
9.基本选择器(重点)
要想将CSS样式应用于特定的HTML元素,首先需要找到该目标元素。在CSS中,执行这一任务的样式规则部分被称为选择器。
1.标签选择器(元素选择器)
标签选择器是指用HTML标签名作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式。其基本语法格式如下:
标签名{属性1:属性值1; 属性2:属性值2; ...}
标签选择器最大的优点是能快速为页面中同类型的标签统一样式,同时这也是它的缺点,不能设计差异化样式。
h1 {
color: red;
}
p {
color: green;
}
2.id选择器
id选择器使用“#”进行标识,后面紧跟id名,基本语法格式如下:
#id名{属性1:属性值1; 属性2:属性值2; ...}
<标签名 id="id值"></标签名>
该语法中,id名即为HTML元素的id属性值,大多数HTML元素都可以定义id属性,元素的id值是唯一的,只能对应于文档中某一个具体的元素。用法基本与类选择器相同。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.lin { /*类选择器, 在元素中使用class属性*/
color: blue;
}
#xue { /*id选择器, 在元素中使用id属性*/
color: red;
}
</style>
</head>
<body>
<div class="lin">林黛玉</div> <!-- 使用类选择器 -->
<div id="xue">薛宝钗</div> <!-- 使用id选择器 -->
</body>
</html>
3.类选择器
类选择器使用“.”(英文点)进行标识,后面紧跟类名,其基本语法格式如下:
定义:
.类名{属性1:属性值1; 属性2:属性值2; ...}
调用:
<标签名 class="类名"></标签名>
类选择器最大的优势是可以为元素对象定义单独或相同的样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.demo {
color: red;
}
</style>
</head>
<body>
<div class="demo">这是一个div</div>
</body>
</html>
4.多类名选择器
我们可以给标签指定多个类名,从而达到更多的选择目的。
<!--在class属性中使用多个类名,表示同时满足多个样式 -->
<div class="font20 red fontWeight">西游记</div>
<div class="font20">红楼梦</div>
<div class="font14 fontWeight">三国演义</div>
<div class="font14">水浒传</div>
<style>
.font20 {
font-size: 20px;
}
.font14 {
font-size: 14px;
}
.red {
color: red;
}
.fontWeight {
font-weight: bold;
}
</style>
多类名选择器在后期布局较为复杂的情况下使用较多。
5.id选择器和类选择器区别
W3C标准规定,在同一个页面内,不允许有相同名字的id对象出现,但是允许相同名字的class。
类选择器(class)好比人的名字,可以重复使用,如:小明、小明
id选择器(id)好比人的身份证号,是唯一的,不允许重复,只能使用一次。
6.通配符选择器
通配符选择器用“*”号表示,它是所有选择器中作用范围最广的,能匹配页面中所有的元素。其基本语法格式如下:
*{属性1:属性值1; 属性2:属性值2; ...}
例如下面的代码,使用通配符选择器定义CSS样式,清除所有HTML元素的默认边距。
* {
margin: 0; /*定义外边距*/
padding: 0; /*定义内边距*/
}
通配选择器较少使用。
7.伪类选择器
伪类选择器用于向某些选择器添加特殊的效果。比如给链接添加特殊效果,比如可以选择第1个,第n个元素。
伪类选择器使用“:”冒号来表示,比如 :link{}
(1)链接伪类选择器
链接伪类选择器主要针对于a标签
a:link /*未访问的链接*/
a:visited /*已访问的链接*/
a:hover /*鼠标移动到链接上*/
a:active /*选定的链接*/
注意:
a:hover 必须在 a:link 和 a:visited 之后。
a:active 必须在 a:hover 之后,需要严格按顺序才能看到效果。
所以,写的时候顺序尽量不要颠倒,按照l o v e h a t e来记忆
<style>
a:link { /*未访问的链接*/
font-size: 16px;
color: grey;
font-weight: 700;
}
a:visited { /*已访问的链接 表示已经点击过一次的状态*/
font-size: 16px;
color: orange;
font-weight: 700;
}
a:hover { /*鼠标移动到链接上*/
font-size: 16px;
color: red;
font-weight: 700;
}
a:active { /*选定的链接 鼠标点击不松开的状态*/
font-size: 16px;
color: blue;
font-weight: 700;
}
</style>
实际工作中,链接伪类选择器使用简写即可
a { /*a是标签选择器,所有的链接*/
font-weight: 700;
font-size: 16px;
color: grey;
}
a:hover { /*:hover 是链接伪类选择器 鼠标移动到链接上*/
color: red; /*鼠标经过时,文本由原来的灰色变为红色*/
}
(2)结构(位置)伪类选择器(CSS3)
:first-child 获取第一个子元素
:last-child 获取最后一个子元素。注意:IE8不支持X:last-child。
:nth-child(n) 选取某个元素的一个或者多个特定的子元素。可以使用数字(n从1开始)、关键字(even偶数、odd奇数)或公式<2n-1>(n从0开始,当表达式的值小于等于0时,将不选择任何子元素)。
:nth-last-child(n) 选择某个元素的一个或多个特定的子元素,从这个元素的最后一个子元素开始获取。可以使用数字(n从1开始)、关键字(even偶数、odd奇数)或公式(n从0开始)。
p:first-child { /*第一个子元素*/
color: red;
}
p:last-child { /*最后一个子元素*/
color: blue;
}
p:nth-child(2) { /*第二个子元素*/
color: blue;
}
p:nth-last-child(2) { /*倒数第2个子元素*/
color: pink;
}
p:nth-child(3n) {
color: purple;
}
-
:first-of-type 选择特定元素的第一个子元素
-
:last-of-type 选择特定元素的最后一个子元素
-
:nth-of-type(n) 只计算父元素中指定的某种类型的子元素
-
:nth-last-of-type(n) 只计算父元素中指定的某种类型的子元素,从这个元素的最后一个元素开始获取
p:first-of-type { /*第一个p元素*/
color: red;
}
p:last-of-type { /*最后一个p元素*/
color: green;
}
p:nth-of-type(2) { /*第2个p元素*/
color: red;
}
p:nth-last-of-type(2) { /*倒数第2个p元素*/
color: red;
}
-
:only-child
匹配没有任何兄弟元素的元素
<ol>
<li>First
<ul>
<li>This list has just one element.</li>
</ul>
</li>
<li>Second
<ul>
<li>This list has three elements.</li>
<li>This list has three elements.</li>
<li>This list has three elements.</li>
</ul>
</li>
</ol>
li:only-child {
color: red;
list-style-type: square;
}
-
:only-of-type` 代表了任意一个元素,这个元素没有其他相同类型的兄弟元素
<div>I am `div` #1.</div>
<p>I am the only `p` among my siblings.</p>
<div>I am `div` #2.</div>
<div>I am `div` #3.
<i>I am the only `i` child.</i>
<em>I am `em` #1.</em>
<em>I am `em` #2.</em>
</div>
p :only-of-type{
}
-
:empty 现在的元素里面没有任何的内容或子节点
-
:root 匹配文档的根节点
li:only-child { /*匹配父元素中只有一个子元素*/
color: blue;
}
p:only-of-type { /*匹配父级中唯一的子元素,如整个文档只有一个p元素*/
color: green;
}
div:empty { /*匹配没有内容和子节点的元素*/
width: 100px;
height: 50px;
background-color: red;
}
:root { /*匹配文档的根元素*/
background-color: #dde6ef;
}
E:nth-child和E:nth-of-type的区别:
-
E:nth-child :对父元素里面所有孩子排序选择(序号是固定的),先找到第n个孩子,然后看看是否与E匹配
-
E:nth-of-type:对元素里面指定子元素进行排序,先去匹配,然后再找第n个孩子
为了方便记忆,把CSS的结构伪类选择器归为四类:
-
通用子元素(不同类型)过滤器::nth-child(n)(顺序过滤)和 :nth-last-child(n)(逆序过滤)
-
通用子类型元素(同一类型)过滤器::nth-of-type(n)(顺序过滤)和 :nth-last-of-type(n)(逆序过滤)
-
特定位置的子元素::first-child, :last-child, :first-of-type, :last-of-type
-
特定状态的元素::root(根节点)、:only-child(独子元素)、:only-of-type(独子类型元素)、:empty(孤节点)
(3)目标伪类选择器
:target
选择器用于选取页面中的某个target
元素。那什么是target
元素呢?target
元素,说白了就是该元素的id
被当做页面的超链接来使用。
如下示例:当点击个人生活链接时,对应的目标就更改样式
<a href="#live">个人生活</a>
<h2 id="live">个人生活</h2>
<p>
家庭 刘德华的父亲刘礼在启德机场做过消防员的工作。20世纪60年代,刘礼开了一间小吃杂货店以赚钱维持家用。刘德华在家中还有三位姐姐,一位妹妹以及一位弟弟(刘德盛)。
</p>
:target {
color:red;
}
10.CSS复合选择器
复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签。
1.交集选择器
交集选择器由两个选择器构成,其中第一个为标签选择器,第二个为class选择器或者id选择器,两个选择器之间不能有空格,如h1.red。
记忆技巧:交集选择器是并且的意思,即...又...的意思
注意点:
1、选择器之间没有任何的连接符号
2、选择器可以是class,也可以是id,还可以是标签,但标签要放在前面
比如: p.one 表示选择类名既是.one 且是段落标签。
<style type="text/css">
p.red {
color: red;
}
p#pink {
color: pink;
}
.red#pink {
color: blue;
}
</style>
<p class="red">段落1</p>
<p id="pink">段落2</p>
<p class="red" id="pink">段落3</p>
2.并集选择器
并集选择器是各个选择器通过逗号连接而成的,任何形式的选择器,都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同,或部分相同,就可以使用并集选择器。
记忆技巧:并集选择器表示 和 的意思,只要使用逗号分隔,所有选择器都会执行后面的样式。
比如: .one, p, #id {color:red;} 表示.one p #id这3个选择器都会执行同一个样式,通常用于集体声明。
<style type="text/css">
div,
p,
.pig,
#sanzang {
color: red;
}
</style>
<div>这是一个div</div>
<p>段落</p>
<h1>孙悟空</h1>
<h1 class="pig">猪八戒</h1>
<h2>沙悟净</h2>
<h2 id="sanzang">唐三藏</h2>
3.兄弟选择器
兄弟选择器是CSS3.0新增的一个选择器,语法格式: A~B 或者 A+B
‘+’选择器则表示某元素后相邻的兄弟元素,也就是紧挨着的,是单个的。
‘~’选择器则表示某元素后所有同级的指定元素,强调所有的。
<head>
<style>
div+p {
color: red;
}
</style>
</head>
<body>
<div>
<p>我是一个段落</p>
</div>
<p>我是相邻的兄弟</p>
<p>我是一个段落</p>
</body>
<head>
<style>
div~p{
color: red;
}
</style>
</head>
<body>
<div>我是一个div</div>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
</body>
4.后代选择器
后代选择器又称为包含选择器,用来选择元素或元素组的后代。其写法就是把外层标签写在前面,中间用空格分隔。当标签发生嵌套时,内层标签就成为外层标签的后代。
<style type="text/css">
div p {
color: red;
}
.wangjianlin p {
color: green;
}
#wang p{
color: blue;
}
</style>
<p>王者荣耀</p>
<div>
<p>王源</p>
</div>
<div class="wangjianlin">
<p>王思聪</p>
</div>
<div id="wang">
<p>王宝强</p>
</div>
5.子元素选择器
子元素选择器只能选择作为其元素子元素的元素。其写法就是父亲标签写在前面,子级标签写在后面,中间跟一个“>”进行连接,
<style type="text/css">
.nav li { /*后代选择器*/
color: blue;
}
.nav > li { /*子元素选择器*/
color: red;
}
</style>
/*子级元素选择器会覆盖后代选择器,但是只覆盖了一级菜单(.nav的儿子)*/
<ul class="nav">
<li>一级菜单
<ul>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
</ul>
6.伪元素选择器(CSS3)
(1)E::first-letter 块级文本的第一个单词或字
(2)E::first-line 文本的第一行
(3)E::selection 可改变选中文本的样式
注意:“.”一个点是类选择器, “:”一个冒号是伪类选择器, “::”两个冒号是伪元素选择器。
<style>
p::first-letter {
color: red;
font-size: 50px;
}
p::first-line {
color: green;
}
p::selection {
color: blue;
}
</style>
<h2>锦上添花</h2>
<p>锦上添花,读音:jǐn shàng tiān huā ,汉语成语。释义:意指在美丽的锦织物上再添加鲜花。
比喻略加修饰使美者更美,引申比喻在原有成就的基础上进一步完善。
出处: 宋 黄庭坚 《了了庵颂》:“又要 涪翁 作颂,且图锦上添花。”
此外, 清 李渔 《凰求凤·让封》:“三位夫人恭喜贺喜,又做了状元的夫人,又进了簇新的房子,
又释了往常的嫌隙,真个是锦上添花。” 毛泽东 《在延安文艺座谈会上的讲话》二:“对于他们,
第一步需要还不是‘锦上添花’,而是‘雪中送炭’。所以在目前条件下,普及工作的任务更为迫切。”
</p>
(4)E::before和E::after 在E元素内部的开始位置和结束位置创建一个元素,该元素为行内元素,且必须结合content属性使用。
注意:before与after表示在盒子内部的前端和后端插入内容。
<div>今年</div>
div::before {
content: "我";
}
div::after {
content: "18岁";
}
11.CSS三大特性
1.CSS层叠性
是浏览器处理冲突的一个能力。如果一个属性通过两个选择器设置到同一个元素上,那么这个时候一个属性就会将另一个属性层叠掉 。
2.CSS继承性
作用:子元素可以继承父元素的样式。 特殊性:
并不是所有的属性都可以继承, 只有以color/font-/text-/line-开头的属性才可以继承。
在CSS的继承中不仅仅是儿子可以继承, 只要是后代都可以继承 。
a标签的颜色和下划线的设置不能继承,必须对a标签本身进行设置。
h标签的字体大小不能修改,必须对h标签本身进行修改。
3.CSS优先级
(1)什么是优先级?
优先级表示当多个选择器选中同一个标签, 并且给同一个标签设置相同的属性时, 如何层叠就由优先级来确定
(2)优先级判断
1、如果使用的是同类型的选择器,那么谁写在后面就听谁的。就近原则
2、如果使用的是不同类型的选择器,那么会按照选择器的优先级来层叠。
!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
(3)优先级之!important
用于提升选择器中某个属性的优先级, 可以将被指定属性的优先级提升为最高 。
1、!important只能提升被指定的属性的优先级, 其它的属性的优先级不会被提升 。
2、!important必须写在属性值得分号前面,与属性值之间加上一个空格 。
3、!important前面的感叹号不能省略 。
(4)优先级权重
当多个选择器混合在一起使用时, 我们可以通过计算权重来判断谁的优先级最高 。
权重计算规则
(1)内联样式,如: style=””,权值为1,0,0,0。
(2)ID选择器,如:#content,权值为0,1,0,0。
(3)类,伪类和属性选择器,如.content E:link E[attr],权值为0,0,1,0。
(4)元素选择器和伪元素选择器,如div p ::before,权值为0,0,0,1。
(5)通配符、子选择器、相邻选择器等的。如\*、>、+,权值为0,0,0,0。
(6)继承的样式没有权值。!important的权重最高
<style>
a { /*特殊性值:0,0,0,1*/
color: yellow;
}
div a { /*特殊性值:0,0,0,2*/
color: green;
}
.demo a { /*特殊性值:0,0,1,1*/
color: black;
}
.demo input[type="text"] { /*特殊性值:0,0,2,1*/
color: blue;
}
.demo *[type="text"] { /*特殊性值:0,0,2,0*/
color: grey;
}
#demo a { /*特殊性值:0,1,0,1*/
color: orange;
}
div#demo a { /*特殊性值:0,1,0,2*/
color: red;
}
</style>
<!--适用第1行规则-->
<a href="">第一条应该是黄色</a>
<div class="demo">
<!--适用第4、5行规则,第4行优先级高-->
<input type="text" value="第二条应该是蓝色" />
<!--适用第2、3行规则,第3行优先级高-->
<a href="">第三条应该是黑色</a>
</div>
<div id="demo">
<!--适用第5、6行规则,第6行优先级高-->
<a href="">第四条应该是红色</a>
</div>
12.CSS书写规范
1.空格规范
【强制】选择器与 { 之间必须包含空格。
示例: .nav { }
【强制】属性名与之后的:之间不允许包含空格, :与属性值之间必须包含空格。
示例: font-size: 14px;
2.选择器规范
【强制】当一个rule包含多个Selector时,每个选择器声明必须独占一行。
.post,
.page,
.comment {
color: red;
}
【建议】选择器的嵌套层级应不大于3级,位置靠后的限定条件应尽可能精确。
.nav ul li ul li a
可以写为:
.nav li a
3.属性规范
【强制】属性定义必须另起一行。
.selector {
color: red;
font-size: 14px;
}
【强制】属性定义后必须以分号结尾。
.selector {
color: red;
font-size: 14px;
font-family: "Microsoft Yahei";
}
13.标签显示模式
HTML标签一般分为块标签和行内标签两种类型,它们也称块元素和行内元素。
1.块级元素(block-level)
每个块元素通常都会独自占据一整行或多整行,可以对其设置高度、宽度、对齐等属性,常用于网页布局和网页结构的搭建。
常见块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<form>等,其中<div>标签是最典型的块元素。
div非常符合布局,所以通常叫CSS+div布局
块级元素的特点:
总是从新行开始
宽度、高度、外边距以及内边距都可以控制
宽度默认是容器的100%
可以容纳内联元素和其他块元素
2.行内元素(inline-level)
行内元素(内联元素)不占有独立的区域,仅仅靠自身的字体大小和图像尺寸来支撑结构,一般不可以设置宽度、高度、对齐等属性,常用于控制页面中文本的样式。
常见的行内元素有:<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等,其中<span>标签是最典型的行内元素。
行内元素的特点:
和相邻行内元素在一行上。
宽、高无效,但水平方向的padding和margin可以设置,垂直方向的无效。
默认宽度就是它本身内容的宽度。
行内元素只能容纳文本或其他行内元素(a特殊)。
注意:
-
只有文字才能组成段落,因此p标签中不能放块级元素,示例:p标签中放div,查看源代码(有bug)
-
链接里面不能在放链接。
3.块级元素和行内元素区别
块级元素的特点:
(1)总是从新行开始
(2)宽高、内外边距都可以控制
(3)宽度默认为容器的100%
(4)可以容纳内联元素和其他块元素 文字类的块级标签(p,h1~h6,dt)内部不能嵌套块级标签
行内元素的特点:
(1)和相邻行内元素在一行上
(2)宽高无效,可以设置水平方向的内外边距,垂直方向不可设置。
(3)默认宽度就是它本身内容的宽度
(4)行内元素只能容纳文本和其他行内元素
4.行内块元素(inline-block)
在行内元素中有几个特殊的标签——<img />、<input />,可以对它们设置宽高和对齐属性,有些资料可能会把它们称为行内块元素。
行内块元素的特点:
(1)和相邻行内元素(行内块)在一行上,但是之间会有空白间隙。
(2)默认宽度就是它本身内容的宽度。
(3)宽高、内外边距都可以控制。
5.标签显示模式转换 display
块转行内:display:inline;
行内转块:display:block;
块、行内元素转换为行内块:display:inline-block;
<style type="text/css">
div {
width: 100px;
height: 100px;
background-color: pink;
display: inline; /*块级元素转为行内元素,宽高会失效*/
}
span {
width: 100px;
height: 100px;
background-color: skyblue;
display: block; /*行内元素转为块级元素,可以设置宽高*/
}
a {
width: 50px;
height: 50px;
background-color: deeppink;
/*行内元素转为行内块元素,可以设置宽高,在一行内显示*/
display: inline-block;
}
p {
width: 100px;
height: 100px;
background-color: red;
/*块级元素转为行内块元素,可以设置宽高,在一行内显示*/
display: inline-block;
}
</style>
14.CSS背景(background)
CSS可以添加背景颜色和背景图片。
background-color | 背景颜色 |
---|---|
background-image | 背景图片地址 |
background-repeat | 是否平铺 |
background-position | 背景位置 |
background-attachment | 背景固定还是滚动 |
背景的合写(复合属性) | background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置 |
1.背景颜色(background-color )
background-color属性设置一个元素的背景颜色。元素的背景是元素的总大小,包括填充和边界(但不包括边距)。
指定背景颜色透明时可使用transparent作为属性值。
background-color: red;
background-color: transparent; /*透明*/
2.背景图片(background-image)
background-image属性设置一个元素的背景图像。元素的背景是元素的总大小,包括填充和边界(但不包括边距)。默认情况下,background-image放置在元素的左上角,并重复垂直和水平方向。
提示:请设置一种可用的背景颜色,这样的话,假如背景图像不可用,可以使用背景色带代替。
background-image: url('图片路径'); /*设置图片显示*/
<style>
#example1 {
width: 500px;
height: 300px;
background-image: url('../img/a1.PNG');
}
</style>
<div id="example1"></div>
3.背景平铺(background-repeat)
设置如何平铺对象的 background-image 属性。默认情况下,重复background-image的垂直和水平方向。
background-repeat: repeat-y;
值 | 说明 |
---|---|
repeat | 背景图像将向垂直和水平方向重复 |
repeat-x | 只有在水平方向会重复背景图像 |
repeat-y | 只有在垂直方向会重复背景图像 |
no-repeat | 不会重复 |
background-image: url('paper.gif');
background-repeat: no-repeat;
4.背景位置(background-position)
background-position属性设置背景图像的起始位置
语法:
/*取值有left、right、top、bottom、center,如果仅指定一个关键字,
其他值将会是"center"*/
background-position: center;
background-position: 30% 20%;
background-position: 50px 100px;
5.背景附着(background-attachment)
background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。
语法:
background-attachment:fixed;
属性值:
值 | 说明 |
---|---|
scroll | 背景图片随页面的其余部分滚动。默认 |
fixed | 背景图像是固定的 |
6.背景简写
background属性的值书写顺序官方并没有强制标准。为了可读性,建议如下:
background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置
background: transparent url('./img/logo.png') repeat-y scroll 50% 0;
7.背景透明(CSS3)
CSS3支持背景半透明的语法格式:
background: rgba(0, 0, 0, 0.3);
alpha的取值范围在0~1之间
同样可以给文字和边框透明,都是使用rgba的格式来写
color: rgba(255, 0, 0, 0.3);
border: 1px solid rgba(255, 0, 0, 0.5);
8.背景缩放(CSS3)
通过background-size设置背景图片的尺寸。其参数设置如下:
1.可以设置长度单位(px)或百分比(设置百分比时,参照盒子的宽高)。
2.设置为cover时,会自动调整缩放比例,保证图片始终填充满背景区域,如有溢出部分则会被隐藏。
3.设置为contain时,会自动调整缩放比例,保证图片始终完整显示在背景区域。
background-image: url(../img/blue.jpg);
background-size: 300px 100px;
/*background-size: contain;*/
/*background-size: cover;*/
div {
width: 500px;
height: 500px;
background-color: pink;
background-image: url(img/boy.png);
background-size: 300px 100px;
background-repeat: no-repeat;
}
插入图片和背景图片的区别
-
插入图片在更改图片大小时使用属性 width 和 height ,更改图片位置使用 margin 或 padding 盒模型。
-
背景图片在更改图片大小时使用 background-size 属性,更改图片位置时使用background-position属性。
-
一般情况下背景图片适合做一些小图标使用,产品展示之类的就用插入图片
<style>
section {
width: 400px;
height: 400px;
border: 1px solid #000;
}
section img {
width: 300px; /*插入图片更改大小使用 width 和 height 属性*/
height: 200px;
margin-top: 20px; /*插入图片更改位置可以使用 margin 或 padding 盒模型*/
margin-left: 50px;
}
aside {
width: 400px;
height: 400px;
border: 1px solid goldenrod;
background: #FFC0CB url(img/blue.jpg) no-repeat;
background-size: 300px 200px; /*背景图片更改大小要使用background-size*/
background-position: 50px 100px; /*背景图片更改位置要使用background-position*/
}
</style>
<section> <!-- 插入图片 -->
<img src="img/blue.jpg"/>
12345 <!-- 插入的图片会将盒子中的文本挤压到图片之后显示-->
</section>
<aside> <!-- 背景图片 -->
12345 <!-- 背景图片则是被当成背景使用,文本还是显示在盒子中背景图片之上 -->
</aside>
9.背景颜色渐变(CSS3)
CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡。
CSS3 定义了两种类型的渐变(gradients):
线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向
径向渐变(Radial Gradients)- 由它们的中心定义
A、线性渐变
a. 从上到下的线性渐变
background: linear-gradient(red, blue);
b. 从左到右的线性渐变
background: linear-gradient(to right, red, yellow, blue, green);
c. 对角方向的线性渐变
background: linear-gradient(to bottom right, red, blue);
B、径向渐变
a. 颜色结点均匀分布的径向渐变
background: radial-gradient(red, green, blue);
b. 颜色结点不均匀分布的径向渐变
background: radial-gradient(red 5%, green 10%, blue 50%);
c. 形状为圆形的径向渐变
background: radial-gradient(circle, red, green, blue);
10.凹凸文字
<div class="to">我是凸起的文字</div>
<div class="ao">我是凹下的文字</div>
<style>
body {
background-color: grey;
font: bold 6em "micro"
}
div {
margin: 30px;
color: grey;
}
/*上阴影为黑色#000,下阴影为白色#fff*/
.to {
text-shadow: -1px -1px 1px white, 1px 1px 1px #000;
}
.ao {
text-shadow: -1px -1px 1px #000, 1px 1px 1px white;
}
</style>
11.空心文字
<p>我是空心的文字,酷不酷?</p>
p {
font-size: 50px;
/*伪空心元素,与背景色有关*/
-webkit-text-fill-color: white;
-webkit-text-stroke-color: blue;
-webkit-text-stroke-width: 2px;
}
15.盒子模型(CSS重点)
所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子,也就是一个装内容的容器。每个矩形都由元素的内容、内边距(padding)、边框(border)和外边距(margin)组成
1.盒子模型(Box Model)
2.盒子边框(border)
边框就是元素最外层的包装。CSS边框属性允许你指定一个元素边框的样式和颜色。
语法:
border: border-width border-style border-color
-
border-width:用于指定边框的粗细。
-
border-style:用于定义边框的样式。
-
border-color:用于设置边框的颜色。
盒子边框总结表
设置内容 | 样式属性 | 常用属性值 |
---|---|---|
上边框 | border-top-style: 样式; border-top-width: 宽度; border-top-color: 颜色; border-top: 宽度 样式 颜色; | |
右边框 | border-right-style: 样式; border-right-width: 宽度; border-right-color: 颜色; border-right: 宽度 样式 颜色; | |
下边框 | border-bottom-style: 样式; border-bottom-width: 宽度; border-bottom-color: 颜色; border-bottom: 宽度 样式 颜色; | |
左边框 | border-left-style: 样式; border-left-width: 宽度; border-left-color: 颜色; border-left: 宽度 样式 颜色; | |
样式综合设置 | border-style:上边 [右边 下边 左边] | none无(默认)、solid(单实线) dashed(虚线)、dotted(点线)、 double(双实线) |
宽度综合设置 | border-width:上边 [右边 下边 左边] | 像素值 使用关键字thick、medium(默认值)、 thin |
颜色综合设置 | border-color:上边 [右边 下边 左边] | 颜色名称、#十六进制、rgb(r,g,b)、 rgb(r%,g%,b%) |
边框综合设置 | border: 四边宽度 四边样式 四边颜色 |
还可以设置边框的颜色为"transparent"。
注意: border-color单独使用是不起作用的,必须得先使用border-style来设置边框样式。
border-style属性可以有1-4个值:
-
border-style:dotted solid double dashed;
-
上边框是 dotted
-
右边框是 solid
-
下边框是 double
-
左边框是 dashed
-
-
border-style:dotted solid double;
-
上边框是 dotted
-
左、右边框是 solid
-
下边框是 double
-
-
border-style:dotted solid;
-
上、下边框是 dotted
-
右、左边框是 solid
-
-
border-style:dotted;
-
四面边框是 dotted
-
实例:
<p>设置盒子四个边框的颜色</p>
p {
border-style:solid;
border-color:#ff0000 #00ff00 #0000ff rgb(250,0,255);
}
表格的细线边框
table {
border-collapse: collapse; /*表示边框合并在一起*/
}
实例:
<table cellpadding="0" cellspacing="0">
<tr>
<td>123</td>
<td>123</td>
<td>123</td>
</tr>
<tr>
<td>123</td>
<td>123</td>
<td>123</td>
</tr>
</table>
table {
width: 700px;
height: 500px;
border: 1px solid deeppink;
border-collapse: collapse; /*合并单元格的线*/
}
td {
border: 1px solid deeppink;
}
圆角边框(CSS3):
使用 CSS3 border-radius 属性,你可以给任何元素制作 "圆角"。radius 半径(距离)
语法格式:
border-radius: 左上角 右上角 右下角 左下角; /*4个值*/
border-radius: 左上角 右上/左下 右下角; /*3个值*/
border-radius: 左上/右下 右上/左下; /*2个值*/
border-radius: 四个圆角值相同; /*1个值*/
实例:
#rcorners {
border-radius: 5px 50px;
background: #8AC007;
width: 200px;
height: 150px;
}
3.内边距(padding)
padding属性用于设置内边距。是指边框与内容之间的距离。
padding-top: 上内边距
padding-right: 右内边距
padding-bottom: 下内边距
padding-left: 左内边距
padding: 上右下左内边距
注意:属性后面的数值可变,表示不同的含义。
值的个数 | 表达意思 |
---|---|
1个值 | padding: 四周内边距 |
2个值 | padding: 上下、左右内边距 |
3个值 | padding: 上、左右、下内边距 |
4个值 | padding: 上、下、左、右内边距 |
4.外边距(margin)
margin属性用于设置外边距。设置外边距会在元素之间创建“空白”,这段空白通常不能放置其他内容。
margin-top: 上外边距
margin-right: 右外边距
margin-bottom: 下外边距
margin-left: 左外边距
margin: 上 右 下 左
注意:行内元素可以设置水平方向的内外边距,但不能设置垂直方向的内外边距。
(1)外边距实现盒子居中
可以让一个盒子实现水平居中,需要满足两个条件:
1、必须是块级元素。
2、盒子必须指定了宽度。
只需要给左右的外边距都设置为auto,就可以使块级元素水平居中。
实际工作中常用这种方式来进行网页布局,示例如下:
.header {
width: 960px;
margin: 0 auto; /*表示上下外边距为0,左右水平居中*/
}
(2)清除元素的默认内外边距
为了更方便地控制网页中的元素,制作网页时,可以使用如下代码清除元素默认的内外边距:
* {
padding: 0; /*清除内边距*/
margin: 0; /*清除外边距*/
}
需要注意的是:行内元素只有左右内外边距,是没有上下内外边距的。
(3)文字水平居中和盒子水平居中
<div id="box1">
这是一个div盒子
</div>
div {
width: 300px;
height: 200px;
border: 1px solid deeppink;
margin: 0 auto; /*盒子居中使用 margin */
text-align: center; /*文本居中使用 text-align*/
}
5.外边距合并
使用margin定义块元素的垂直外边距时,可能会出现外边距的合并。
(1)相邻块元素垂直外边距的合并
当上下相邻的两个块元素相遇时,如果上面的元素有下外边距margin-bottom,下面的元素有上外边距margin-top,则他们之间的垂直距离不是margin-bottom与margin-top之和,而是取两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并(也称为外边距塌陷)。
(2)嵌套块元素垂直外边距的合并
对于两个嵌套关系的块元素,如果父元素没有上内边距及上边框,则父元素的上外边距会与子元素的上外边距合并,合并后的外边距为两者中的较大者。即使父元素的上外边距为0,也会发生合并。
解决方案:
1.可以为父元素定义1像素的上边框border或上内边距padding
2.可以为父元素添加overflow: hidden;
6.盒子模型布局的稳定性
优先使用宽度(width),其次使用内边距(padding),最后使用外边距(margin)
width > padding > margin
原因:
1.margin会有外边距合并,还有在ie6下margin容易出bug。
2.padding会影响盒子大小,需要进行加减计算。box-sizing:border-box;
3.width没有问题。我们经常用宽度剩余法 、 高度剩余法来做
7.盒子阴影
语法格式:box-shadow: 水平位置 垂直位置 模糊距离 阴影尺寸(影子大小) 阴影颜色 内/外阴影;
值 | 描述 |
---|---|
h-shadow | 必需。水平阴影的位置,允许负值 |
v-shadow | 必需。垂直阴影的位置,允许负值 |
blur | 可选。模糊距离 |
spread | 可选。阴影的尺寸 |
color | 可选。阴影的颜色 |
inset | 可选。将外部阴影(outset)改为内部阴影 |
外部阴影是默认的,不能写。想要内部阴影inset
.box {
width: 200px;
height: 200px;
box-shadow: 0 15px 30px rgba(0, 0, 0, .1);
transform: translate3d(0, -2px, 0);
}
16.浮动(Float)
1.什么是文档流
文档流处在网页的最底层,它表示的是一个页面中的位置,我们所创建的元素默认都处在文档流中
元素在文档流中的特点:
块元素:
块元素在文档流中会独占一行,块元素会自上向下排列
行内元素:
行内元素在文档流中只占自身的大小,会默认从左向右排列
2.什么是浮动?
元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制,浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。
浮动的元素虽然会脱离正常的文档流,但它还是会影响到正常文档流中的文字排版。
在CSS中,通过float属性来定义浮动,其基本语法如下:
选择器 {
float: 属性值;
}
属性值 | 描述 |
---|---|
left | 元素向左浮动 |
right | 元素向右浮动 |
none | 元素不浮动(默认值) |
Float(浮动),最早用来控制图片,以便其他元素(特别是文字)实现环绕图片的效果,但它在布局时一样非常有用。
3.浮动的特点
(1)浮动会脱离标准流
如果一个元素按照正常的标准流来显示,会在html中所属的位置上占位,后面的元素会紧跟着它,但是浮动脱离了标准流,以后我们在看到浮动的元素之后,不能以正常的标准流里进行判断
(2)浮动会影响元素的显示方式
浮动后的行内元素是可以设置宽高 ,块级元素是内容的宽高,说白了会改变他的模式display为inline-block
float就是隐性的把内联元素转化为块元素,这是对内部的特性就是有物理特性,但是他不占据一行。对外是内联元素的属性
17.常见的布局
1.布局流程
为了提高网页制作的效率,布局时通常需要遵守一定的布局流程,具体如下:
1、确定页面的版心(可视区)。
2、分析页面中的行模块,以及每个行模块中的列模块。
3、制作HTML结构。
4、CSS初始化,然后开始运用盒子模型的原理,通过DIV+CSS布局来控制网页的各个模块。
18.定位
1.元素的定位属性
元素的定位属性主要包括定位模式和边偏移两部分
(1)边偏移
边偏移属性 | 描述 |
---|---|
bottom | 底部偏移量,定义元素相对于其父元素下边线的距离 |
top | 顶端偏移量,定义元素相对于其父元素上边线的距离 |
left | 左侧偏移量,定义元素相对于其父元素左边线的距离 |
right | 右侧偏移量,定义元素相对于其父元素右边线的距离 |
定位要与边偏移一起搭配使用,如top: 100px; left:30px;
(2)定位模式
在CSS中,position属性用于定义元素的定位模式,其基本语法如下:
选择器 {
position: 属性值;
}
position属性的常用值
属性值 | 描述 |
---|---|
static | 默认值,自动定位。 |
relative | 相对位置,相对于其原文档流的位置进行定位 |
absolute | 绝对定位,相对于其上一个已经定位的父元素进行定位 |
fixed | 固定定位,相对于浏览器窗口是固定位置 |
2.静态定位static
静态定位是所有元素的默认定位方式,当position属性的取值为static时,可以将元素定位于静态位置。所谓静态位置就是各个元素在HTML文档流中默认的位置。
在静态定位状态下,无法通过偏移属性(top、bottom、left、right)来改变元素的位置。
一般用来清除定位,比如一个原来有定位的盒子,不写定位了,就可以加static
3.相对定位relative
设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状,它原本所占的空间仍保留。
如果对一个元素进行相对定位,它将出现在它所在的位置上。然后,可以通过设置垂直或水平位置,让这个元素“相对于”它的起点进行移动。
示例:如果将 top 设置为 20px,那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像素,那么会在元素左边创建 30 像素的空间,也就是将元素向右移动。
4.绝对定位absolute
设置为绝对定位的元素框从文档流完全删除,并相对于其包含块(父元素)定位,包含块可能是文档中的另一个元素或者是初始包含块(body)。元素原先在正常文档流中所占的空间会关闭,就好像该元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。
绝对定位使元素的位置与文档流无关,因此不占据空间。 脱标
绝对定位的元素相对于最近一级已经定位的父元素来定位 (相对于定位的父元素来移动)
普通流中其它元素的布局就像绝对定位的元素不存在一样:
注意:绝对定位的元素的位置相对于最近的已定位祖先元素,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块。
-
父级没有定位
父亲没有定位,孩子以浏览器为基准点对齐
-
父级有定位
父亲有定位,则以父亲为基准点对齐
-
子绝父相
意思是:子级是绝对定位的话,父级要用相对定位。
子绝父相的由来:
相对定位 占有位置 不脱标
绝对定位 不占有位置 完全脱标
实例:用定位实现盒子的水平/垂直居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="fa">
<div class="son"></div>
</div>
</body>
<style>
.fa{
height: 400px;
width: 400px;
border: 1px solid black;
position: relative;
}
.fa .son{
height: 200px;
width: 200px;
border: 1px solid black;
position: absolute;
left: 100px;
top: 100px;
/* margin-top: 100px; */
/* margin-left: -100px; */
}
</style>
</html>
5.固定定位
固定定位是绝对定位的一种特殊形式,它以浏览器窗口作为参照物来定义网页元素。当position属性的取值为fixed时,即可将元素的定位模式设置为固定定位。
当对元素设置固定定位后,它将脱离标准文档流的控制,始终依据浏览器窗口来定义自己的显示位置。不管浏览器滚动条如何滚动,也不管浏览器窗口大小如何变化,该元素都会始终显示在浏览器窗口的固定位置。
6.叠放次序(z-index)
当多个元素同时设置定位时,定位元素之间有可能发生重叠。
拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的上面。 z-index的值越大,元素越靠上
<h1>This is a heading</h1>
<img src="./img/a0.png" width="100" height="140" />
<p>因为图像元素设置了 z-index 属性值为 -1, 所以它会显示在文字之后。</p>
img {
position:absolute;
left:0px;
top:0px;
z-index: -1;
}
在CSS中,要想调整重叠定位元素的堆叠顺序,可以对定位元素使用z-index层叠等级属性,其取值可为正整数、负整数、0.
注意:
-
z-index的默认值是auto,同级元素越靠后,定位元素在层叠元素中越靠上;
-
z-index嵌套关系
① 父级z-index为auto时,子元素在z-index正负值上才会与父元素产生层叠效果
③ 不同父元素且父元素设置z-index情况下,子元素依照自己父元素的z-index发生层叠(即“拼爹”);
④ 在上一条情况的基础上,修改子元素的z-index只会影响该子元素的层叠效果,对父元素不产生影响;
-
如果取值相同,根据书写顺序,后来者居上。
-
数字后面不能加单位。
-
只有相对定位、绝对定位、固定定位有此属性,其余标准流、浮动、静态定位都无此属性。
-
flex盒子的子元素也可以设置z-index属性(后面了解)
19.CSS3转换transform
CSS3 转换是使元素改变形状、尺寸和位置的一种效果。 转换可以对元素进行移动、缩放、旋转、拉长或拉伸。
1.2D转换
2D转换表现在平面上,主要方法有:
(1)translate() 根据左(X轴)和顶部(Y轴)位置给定的参数,从当前元素位置移动。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="box"></div>
<style>
.box{
height: 100px;
width: 100px;
background-color: aqua;
transform: translate(100px,100px);/*向右移动100px,向下移动100px*/
}
</style>
</body>
</html>
特点:
-
translate最大的优点:不会影响其他元素的位置
-
translate中的百分比单位是相对于自身元素的
transform: translate(50%,50%);
-
对行内标签没有效果
(2)rotate() 在一个给定度数顺时针旋转的元素。负值是允许的,这样是元素逆时针旋转。 需要带单位deg
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div></div>
<style>
div {
height: 200px;
width: 200px;
background-color: aqua;
transform: rotate(30deg);
/* -ms-transform: rotate(30deg); IE 9 */
/* -webkit-transform: rotate(30deg); Safari and Chrome */
}
</style>
</body>
</html>
(3)scale() 该元素放大或缩小的大小,取决于宽度(X轴)和高度(Y轴)的参数 ,正数表示放大,小数表示缩小。
div {
transform: scale(2,3); /* 标准语法 */
-ms-transform:scale(2,3); /* IE 9 */
-webkit-transform: scale(2,3); /* Safari */
}
(4)skew() 包含两个参数值,分别表示X轴和Y轴倾斜的角度,如果第二个参数为空,则默认为0,参数为负表示向相反方向倾斜。
- skewX(<angle>);表示只在X轴(水平方向)倾斜。
- skewY(<angle>);表示只在Y轴(垂直方向)倾斜。
div {
transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg); /* IE 9 */
-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
}
2.3D转换
透视原理: 近大远小 。
(1)translate()方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
height: 200px;
width: 200px;
background-color: aqua;
transform: translate3d(100px, 100px, 100px);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
20.CSS3过渡 transition
1.如何实现
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。使用transition来实现。
格式: transition:要过渡的属性 花费时间 运动曲线 何时开始
(1)属性(必须):想要变化的css属性,宽度高度,背景颜色,内外边距都可以,如果想要所有的属性都变化过渡,写一个all就可以
(2)花费时间(必须):单位是秒(必须写单位) 比如0.5s
(3)运动曲线:单位是ease(可以省略)
(4)何时开始:单位是秒(必须写单位)可以设置延迟触发时间 默认是0s(可以省略)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
height: 200px;
width: 200px;
background-color: aqua;
transition: all 2s;
-webkit-transition: all 2s;
}
div:hover {
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
2.多项改变
要添加多个样式的变换效果,添加的属性由逗号分隔:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
height: 200px;
width: 200px;
background-color: aqua;
transition: width 2s, height 2s, transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
}
div:hover {
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
3.过渡元素
属性 | 描述 | CSS |
---|---|---|
transition | 简写属性,用于在一个属性中设置四个过渡属性。 | 3 |
transition-property | 规定应用过渡的 CSS 属性的名称。 | 3 |
transition-duration | 定义过渡效果花费的时间。默认是 0。 | 3 |
transition-timing-function | 规定过渡效果的时间曲线。默认是 "ease"。 | 3 |
transition-delay | 规定过渡效果何时开始。默认是 0。 | 3 |
transition-timing-function属性值如下表:
值 | 描述 |
---|---|
linear | 规定以相同速度开始至结束的过渡效果(等于 cubic-bezier(0,0,1,1))。 |
ease | 规定慢速开始,然后变快,然后慢速结束的过渡效果(cubic-bezier(0.25,0.1,0.25,1))。 |
ease-in | 规定以慢速开始的过渡效果(等于 cubic-bezier(0.42,0,1,1))。 |
ease-out | 规定以慢速结束的过渡效果(等于 cubic-bezier(0,0,0.58,1))。 |
ease-in-out | 规定以慢速开始和结束的过渡效果(等于 cubic-bezier(0.42,0,0.58,1))。 |
cubic-bezier(n,n,n,n) | 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。 |
21.CSS3动画 animation
动画是使元素从一种样式逐渐变化为另一种样式的效果, 可以改变任意多的样式任意多的次数。请用百分比来规定变化发生的时间,或用关键词 "from" 和 "to",等同于 0% 和 100%。0% 是动画的开始,100% 是动画的完成。
1.基本使用
(1)语法from to(2)案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 100px;
height: 100px;
background: red;
animation: mymove 5s;
position: absolute;
left: 0px;
top: 0px;
}
/*@keyframes是关键字不能更改 name是自定义的变量*/
@keyframes mymove {
from {
left: 0px;
}
to {
left: 600px;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
2.动画运动
animation-timing-function 规定动画的速度曲线。 animation-timing-function 使用名为三次贝塞尔(Cubic Bezier)函数的数学函数,来生成速度曲线。您能够在该函数中使用自己的值,也可以预定义的值:
(1)linear:线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
(2)ease:平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
(3)ease-in:由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
(4)ease-out:由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
(5)ease-in-out:由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
(6)cubic-bezier(<number>, <number>, <number>, <number>):特定的贝塞尔曲线类型,4个数值需在[0, 1]区间内
animation-timing-function: cubic-bezier(0,.99,.22,1);
在应用 CSS3 渐变/动画时,有个控制时间的属性 <animation-timing-function>
。它的取值中除了常用到的 贝萨尔曲线以外,还有个让人比较困惑的 steps()
函数。
steps(n,start/end) 第一个参数 number 为指定的间隔数,即把动画分为 n 步阶段性展示,第二个参数默认为 end,设置最后一步的状态,start 为结束时的状态,end 为开始时的状态。
3.动画延时
animation-delay 属性定义动画什么时候开始。
/*延迟2s,只有第一次会延迟*/
animation-delay:2s;
4、循环次数animation-iteration-count
/*循环3次 */
animation-iteration-count:3;
/*无限循环 */
animation-iteration-count:infinite;