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就是网页的美容师。

化妆前后对比图.png

有人说:没有不漂亮的女人,只有不会打扮的女人。

我想说:没有不好看的网页,只有不会CSS的前端

网页添加CSS和不添加CSS的对比:

带有CSS的页面:

有CSS的网页.png

没有CSS的页面:

没有CSS的网页.png

3、CSS初识

CSS(Cascading Style Sheets的缩写)

CSS通常称为CSS样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局等外观显示样式。

CSS以HTML为基础,提供了丰富的功能,如字体、颜色、背景的控制及整体排版等。而且还可以针对不同的浏览器设置不同的样式。

4、CSS样式规则

使用CSS时,需要了解CSS样式规则,具体格式如下:

CSS规则主要由两个主要部分构成:选择器,以及一条或多条声明

CSS样式规则.png

在上面的样式规则中:

  1. 选择器用于指定css样式作用的HTML对象,花括号内是对该对象设置的具体样式。
  2. 属性和属性值之间以“键值对”的形式出现。
  3. 属性是对指定的对象设置的样式属性,例如字体大小、文本颜色等。
  4. 属性和属性值之间用英文“:”连接。
  5. 多个键值对之间使用英文“;”区分。

示例

h1 {  /*选择器*/
    color: red;    /*声明*/
    font-size: 14px;  /*声明*/
}

5、CSS引入方式

5.1 行内样式表(内联样式)

直接在标签的属性中使用style声明,在style属性中添加css声明即可。

由于要将表现(样式)和内容(结构)混杂在一起,行内样式表会损失掉样式表的许多优势。请慎用这种方法,例如当样式仅需要在一个元素上应用一次时。

<!--在标签内部再嵌套一个内嵌标签来设置样式-->
<h1>这是一个<span style="color: red;">行内样式表</span>的css</h1>

5.2 内部样式表

定义在head或body标签中,使用style标签.

当单个文档需要特殊的样式时,就应该使用内部样式表。

/*内部定义的style样式*/
<style type="text/css">
    h1 {
        background-color: deeppink;
        color: blue;
    }
</style>

5.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;    
}

5.4 三种样式表总结

样式表样式表优点缺点使用情况控制范围
行内样式表书写方便,权重高没有实现结构与样式相分离较少控制一个标签(少)
内部样式表部分结构和样式相分离没有彻底分离较多控制一个页面(中)
外部样式表完全实现结构和样式相分离需要引入最多,强烈推荐控制整个站点(多)

3种样式表的优先级:

1、行内样式表 > 内部样式表 = 外部样式表

2、当内部样式表和外部样式表同时存在时,采用 就近原则 来使用样式

6、CSS字体属性

6.1 font-size:字号大小

font-size属性用于设置字号,该属性的值可以使用相对长度单位,也可以使用绝对长度单位。其中,相对长度单位比较常用,推荐使用像素单位px,绝对长度单位使用较少。

tips:

  1. 现在网页中普遍使用14px+。
  2. 尽量使用偶数的数字字号,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
  • em

em:相对长度单位。相对于当前对象内文本的字体尺寸。如当前行内文本的字体尺寸未被人为设置,则相当于浏览器的默认字体尺寸。1em=16px 24px/16px=1.5em

font-size: 24px

font-size: 1.5em

  • px

px:像素(Pixel),相对于设备的长度单位,像素是相对于显示器屏幕分辨率而言的。譬如,WINDOWS的用户所使用的分辨率一般是96像素/英寸。而MAC的用户所使用的分辨率一般是72像素/英寸。

  • in

in:英寸(Inch),绝对长度单位。

  • cm

cm:厘米(Centimeter),绝对长度单位。

  • mm

mm:毫米(Millimeter),绝对长度单位。

  • pt

pt:点(Point),绝对长度单位,是1/72英寸。1in=72pt=96px

96px

p6pt

其中:1in = 2.54cm = 25.4 mm = 72pt = 96px = 6em(windows)

容器的大小我们经常用px做单位,字体大小(font-size)很多国内的人使用px做单位,其实用px做字体单位唯一的致命缺点就是在IE下无法用浏览器字体缩放的功能。或者以前的按住Ctrl+滚动鼠标的中间的滚轮。

所以多人建议使用html em单位,对于用惯了px的人用em肯定不是很方便,这里提供一些转换公式和对照表供大家参考:

X表示待转换的数值

X = 14px

px to em:Example: Xpx / 16px = 0.875em

px to %:Example: Xpx / 16px * 100 = 87.5%

px to pt:Example: Xpx * 72 (72 points = 1 inch) / 96 (96 pixels per inch in Windows, 72 in Mac) = 10.5pt

X = 0.8em

em to px:Example: Xem * 16px = 12.8px

em to %:Example: Xem * 100 = 80%

X = 50

% to px:Example: X * 16px / 100 = 8px

% to em:Example: X / 100 = .5em

X = 0.16pt

pt to px:Example: Xpt * 96ppi (或72ppi) = 16px

6.2 font-family:字体

font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等。例如将网页中所有段落文本的字体都设置为微软雅黑,可以使用如下CSS样式代码:

p {
    font-family:"微软雅黑";
}
/*可以同时指定多个字体,中间以逗号隔开,表示如果浏览器不支持第一个字体,则会尝试下一个,直到找到合适的字体*/

常用技巧:

  1. 各种字体之间必须使用英文状态下的逗号“,”分隔。
  2. 中文字体需要加英文状态下的引号,英文字体一般不需要加引号。当需要设置英文字体时,英文字体名必须位于中文字体名之前。例如:font-family: Arial, "微软雅黑"; 。
  3. 如果字体名中包含空格、#、$等符号,则该字体必须加英文状态下的单引号或双引号,例如:font-family: "Times New Roman";。
  4. 尽量使用系统默认字体,保证在任何用户的浏览器中都能正确显示。

6.3 CSS Unicode字体

在CSS中设置字体名称,是可以直接写中文的。但是在文件编码(GB2312、utf-8等)不匹配时会产生乱码的错误。xp系统不支持类似“微软雅黑”的中文。

方案一:可以使用英文来替代,比如:font-family:"Microsoft Yahei"; 。

方案二:在CSS中直接使用Unicode编码来写字体名称可以避免这些错误。使用Unicode写中文字体名称,浏览器是可以正确解析的。比如:font-family:"5FAE8F6F96C59ED1",表示设置字体为“微软雅黑”。

在Unicode编码表中,中文的 取值范围是u4e00~u9fa5

字体名称英文名称Unicode编码
宋体Simsun5B8B4F53
新宋体NSimsun65B05B8B4F53
黑体SimHei9ED14F53
微软雅黑Microsoft YaHei5FAE8F6F96C59ED1
楷体_GB2312KaiTi_GB231269774F53_GB2312
隶书LiSu96B64E66
幼圆YouYuan5E7C5706
华文细黑STXihei534E65877EC69ED1
细明体MingLiU7EC6660E4F53
新细明体PMingLiU65B07EC6660E4F53

6.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>

小技巧:

数字 400 等价于 normal, 而 700 等价于 bold。

6.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>

小技巧:

平时我们很少给文字加斜体,反而是给斜体标签(i,em)改为普通模式。

6.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文本属性

7.1 color 文本颜色

color属性用于指定文本的颜色,有3种表现形式。

  • color-name:使用颜色名称,如:red
  • hex-number:使用十六进制数表示,取值是0~f,每个颜色使用两位表示,如:#ff0000表示红色
  • 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>

7.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>
    

7.3 text-decoration 文本修饰

text-decoration用于对文本添加修饰,如下划线、删除线等。有如下取值:

  • none:默认,定义标准的文本,没有任何修饰。
  • underline:定义在文本下方的一条线
  • overline:定义在文本上方的一条线
  • 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>

7.4 text-transform 文本转换

text-transform用于转换文本的大小写(主要用于英文),其取值有:

  • none:默认
  • capitalize:文本中每个单词以大写字母开头
  • uppercase:所有单词字母都大写
  • lowercase:所有单词字母都小写
<style>
    h1 {text-transform:uppercase;}
    h2 {text-transform:lowercase;}
    h3 {text-transform:capitalize;}
</style>

7.5 text-indent 文本缩进

text-indent 属性规定文本块中首行文本的缩进。取值有:

  • 数值:表示像素值
  • 百分比:基于父元素宽度的百分比的缩进。

注意: 负值是允许的。如果值是负数,将第一行左缩进。

<style>
    p {
        text-indent:50px;
          text-indent:2em;
    }
</style>

<!-- 小技巧: 首行缩进2字符使用 2em -->

7.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.7 direction 文本方向

direction 用于指定文本的方向。取值如下:

ltr:默认的,文本方向从左到右 left to right

rtl:文本方向从右到左。right to left

<style type="text/css">
    p {
        direction: ltr;
    }        
    div {
        direction: rtl;
    }
</style>

7.8 letter-spacing 字符间距

letter-spacing 属性增加或减少字符间的空白(字符间距),使用数值表示,可以是负数。主要用于汉字

<style>
    h1 {
        letter-spacing:2px;
      }
    h2 {
          letter-spacing:-3px;
      }
</style>

7.9 word-spacing 字间距

word-spacing属性增加或减少单词与单词之间的空白,允许使用负值。主要用于英文段落

<style>
  p{ 
      word-spacing:30px;
  }
</style>

7.10 line-height 行高

line-height 用于设置行高。取值如下:

  • number:设置数字,此数字会与当前的字体尺寸相乘来设置行间距。
  • length:设置固定的行间距。
  • %:基于当前字体尺寸的百分比行间距。

注意:一般情况下,行距比字号大7 8像素即可。

<style>
    span {
        line-height:2;
    }
    p {
        line-height:20px;
    }
    div {
        line-height:100%;
    }
</style>

使用技巧:在一行的盒子内,我们设定行高等于盒子的高度,就可以是文字垂直居中。只适用于单行文本

8、CSS注释

css规则是使用  /*需要注释的内容*/ 进行注释的。例如:
p {
    font-size: 14px;    /*设置字体的大小是14像素*/
}

9、开发者工具(chrome)

此工具是我们的必备工具,以后代码出了问题,我们首先想到的应该是:

按“F12”或者“shift+ctrl+i”或者“右击网页空白处-->检查” 打开开发者工具。

开发者工具.png

小技巧

1、Ctrl+滚轮可以放大开发者工具代码大小。

2、左边是HTML元素结构,右边是CSS样式。

3、右边CSS样式可以改动数值和颜色,并实时查看更改后的效果。

10、基本选择器(重点)

要想将CSS样式应用于特定的HTML元素,首先需要找到该目标元素。在CSS中,执行这一任务的样式规则部分被称为选择器。

10.1 标签选择器(元素选择器)

标签选择器是指用HTML标签名作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式。其基本语法格式如下:

标签名{属性1:属性值1; 属性2:属性值2; ...}

标签选择器最大的优点是能快速为页面中同类型的标签统一样式,同时这也是它的缺点,不能设计差异化样式。

示例:

h1 {
    color: red;
}

p {
    color: green;
}

10.2 id选择器

id选择器使用“#”进行标识,后面紧跟id名,基本语法格式如下:

#id名{属性1:属性值1; 属性2:属性值2; ...}

<标签名 id="id值"></标签名>

该语法中,id名即为HTML元素的id属性值,大多数HTML元素都可以定义id属性,元素的id值是唯一的,只能对应于文档中某一个具体的元素。用法基本与类选择器相同。

<div class="lin">林黛玉</div>    <!-- 使用类选择器 -->
<div id="xue">薛宝钗</div>        <!-- 使用id选择器 -->
<style>
    .lin {            /*类选择器, 在元素中使用class属性*/
        color: blue;
    }
    #xue {            /*id选择器, 在元素中使用id属性*/
        color: red;
    }
</style>

id选择器.png

10.3 类选择器

类选择器使用“.”(英文点)进行标识,后面紧跟类名,其基本语法格式如下:

定义:
.类名{属性1:属性值1; 属性2:属性值2; ...}

调用:
<标签名 class="类名"></标签名>

类选择器最大的优势是可以为元素对象定义单独或相同的样式。

示例:

<div class="demo">这是一个div</div>
.demo {
    color: red;
}

小技巧:

  1. 长名称或词组可以使用中横线来为选择器命名。text-color-red
  2. 不建议使用“_”下划线来命名CSS选择器。

    1. 浏览器兼容问题
    2. 能良好区分Javascript变量命名(JS变量命名使用下划线“_”)
  3. 不要纯数字、中文等命名,尽量使用英文字母来表示。见名知意

课堂案例:使用类选择器实现如下效果

类选择器.png

10.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>

多类名选择器.png

注意:

  1. 样式显示效果跟HTML元素中的类名先后顺序没有关系,受CSS样式书写的上下顺序有关。
  2. 各个类名中间用空格隔开

多类名选择器在后期布局较为复杂的情况下使用较多。

10.5 id选择器和类选择器区别

W3C标准规定,在同一个页面内,不允许有相同名字的id对象出现,但是允许相同名字的class。

类选择器(class)好比人的名字,可以重复使用,如:李伟、张伟

id选择器(id)好比人的身份证号,是唯一的,不允许重复,只能使用一次。

id选择器和类选择器.png

10.6 通配符选择器

通配符选择器用“*”号表示,它是所有选择器中作用范围最广的,能匹配页面中所有的元素。其基本语法格式如下:

* {属性1:属性值1; 属性2:属性值2; ...}

例如下面的代码,使用通配符选择器定义CSS样式,清除所有HTML元素的默认边距。

* {
    margin: 0;    /*定义外边距*/
    padding: 0;    /*定义内边距*/
}

注意:

通配选择器较少使用。

10.7 伪类选择器

伪类选择器用于向某些选择器添加特殊的效果。比如给链接添加特殊效果,比如可以选择第1个,第n个元素。

伪类选择器使用“:”冒号来表示,比如 :link{}

(1)链接伪类选择器

链接伪类选择器主要针对于a标签

a:link        /*未访问的链接*/
a:visited    /*已访问的链接*/
a:hover        /*鼠标移动到链接上*/
a:active    /*选定的链接*/

注意:

  1. a:hover 必须在 a:link 和 a:visited 之后。
  2. 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;        /*鼠标经过时,文本由原来的灰色变为红色*/
}

小米:#ff6700

京东:#f10215

支付宝:#00bbee

微信:#348903

(2)结构(位置)伪类选择器(CSS3)
  • E:first-child 获取第一个子元素
  • E:last-child 获取最后一个子元素。注意:IE8不支持X:last-child。
  • E:nth-child(n) 选取某个元素的一个或者多个特定的子元素。可以使用数字(n从1开始)、关键字even偶数odd奇数)或公式<2n-1>(n从0开始,当表达式的值小于等于0时,将不选择任何子元素)。
  • E: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;
    }
  • E:first-of-type 选择特定元素的第一个子元素
  • E:last-of-type 选择特定元素的最后一个子元素
  • E:nth-of-type(n) 只计算父元素中指定的某种类型的子元素
  • E: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;
    }
  • E:only-child 选择的元素是他父元素的唯一一个元素
  • E:only-of-type 选择的元素是他上级元素的唯一一个相同类型的子元素
  • E: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;
    }

为了方便记忆,把CSS的结构伪类选择器归为四类:

  1. 通用子元素(不同类型)过滤器:E:nth-child(n)(顺序过滤)和 E:nth-last-child(n)(逆序过滤)
  2. 通用子类型元素(同一类型)过滤器:E:nth-of-type(n)(顺序过滤)和 E:nth-last-of-type(n)(逆序过滤)
  3. 特定位置的子元素:E:first-child, E:last-child, E:first-of-type, E:last-of-type
  4. 特定状态的元素:E:root(根节点)、E:only-child(独子元素)、E:only-of-type(独子类型元素)、E:empty(孤节点)
(3)目标伪类选择器

:target 目标伪类选择器 :target选择器可用于选取当前活动的目标元素

如下示例:当点击个人生活链接时,对应的目标就更改样式。

<a href="#live">个人生活</a>

<h2 id="live">个人生活</h2>
<p>
    家庭 刘德华的父亲刘礼在启德机场做过消防员的工作。20世纪60年代,刘礼开了一间小吃杂货店以赚钱维持家用。刘德华在家中还有三位姐姐,一位妹妹以及一位弟弟(刘德盛)。
</p>
:target {
    color:red;
}

11、CSS复合选择器

复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签。

(1)交集选择器

交集选择器由两个选择器构成,其中第一个为标签选择器,第二个为class选择器或者id选择器,两个选择器之间不能有空格,如h1.red。

交集选择器.png

记忆技巧:

交集选择器是并且的意思,即...又...的意思

注意点:

1、选择器之间没有任何的连接符号
2、选择器可以是class,也可以是id,还可以是标签,但标签要放在前面

比如: p.one 表示选择类名为.one的段落标签。

相对来说使用较少,不太建议使用。

示例:

<p class="red">段落1</p>
<p id="pink">段落2</p>
<p class="red" id="pink">段落3</p>
<style type="text/css">
    p.red {
        color: red;
    }
    p#pink {
        color: pink;
    }
    .red#pink {
        color: blue;
    }
</style>

(2)并集选择器

并集选择器是各个选择器通过逗号连接而成的,任何形式的选择器,都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同,或部分相同,就可以使用并集选择器。

并集选择器.png

记忆技巧:

并集选择器表示 和 的意思,只要使用逗号分隔,所有选择器都会执行后面的样式。

比如: .one, p, #id {color:red;} 表示.one  p  #id这3个选择器都会执行同一个样式,通常用于集体声明。

示例:

<div>这是一个div</div>
<p>段落</p>
<h1>孙悟空</h1>
<h1 class="pig">猪八戒</h1>
<h2>沙悟净</h2>
<h2 id="sanzang">唐三藏</h2>
<style type="text/css">
    div, 
    p,
    .pig,
    #sanzang {
        color: red;
    }            
</style>

(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)后代选择器

后代选择器又称为包含选择器,用来选择元素或元素组的后代。其写法就是把外层标签写在前面,中间用空格分隔。当标签发生嵌套时,内层标签就成为外层标签的后代。

后代选择器.png

子孙后代都可以这么选择。或者说,它能选择任何包含在内的标签。

示例:

<p>王者荣耀</p>

<div>
    <p>王源</p>
</div>

<div class="wangjianlin">
    <p>王思聪</p>
</div>

<div id="wang">
    <p>王宝强</p>
</div>
<style type="text/css">
    div p {
        color: red;
    }
    .wangjianlin p {
        color: green;
    }
    #wang p{
        color: blue;
    }
</style>

(5)子元素选择器

子元素选择器只能选择作为其元素子元素的元素。其写法就是父亲标签写在前面,子级标签写在后面,中间跟一个“>”进行连接,注意,符号左右两侧各保留一个空格。

子元素选择器.png

注意:这里的子元素表示亲儿子,不包含孙子、重孙子之类。

示例:

<ul class="nav">
    <li>一级菜单
        <ul>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
        </ul>
    </li>
</ul>
<style type="text/css">
    .nav li { /*后代选择器*/
        color: blue;
    }
    .nav > li { /*子元素选择器*/
        color: red;
    }
</style>

/*子级元素选择器会覆盖后代选择器,但是只覆盖了一级菜单(.nav的儿子)*/

(6)测试题

<div class="nav">    <!--主导航栏-->
    <ul>
        <li><a href="#">公司首页</a></li>
        <li><a href="#">公司简介</a></li>
        <li><a href="#">公司产品</a></li>
        <li>
            <a href="#">联系我们</a>
            <ul>
                <li><a href="#">公司邮箱</a></li>
                <li><a href="#">公司电话</a></li>
            </ul>
        </li>
    </ul>
</div>

<div class="sitenav">    <!--侧导航栏-->
    <div class="site-l">左侧导航栏</div>
    <div class="site-r"><a href="#">登录</a></div>
</div>

在不修改以上代码的前提下,完成以下任务:

1、链接登录的颜色为红色,同时主导航栏里面所有的链接改为蓝色。

2、主导航栏和侧导航栏里面文字都是14像素并且是微软雅黑。

3、主导航栏里面的一级菜单链接文字颜色为绿色。

(7)属性选择器

表示选取标签带有某些特殊属性的选择器。

选择器含义
E[attr]存在attr属性即可
E[attr=val]属性值完全等于val
E[attr*=val]属性值里包含val字符并且在“任意”位置
E[attr^=val]属性值里包含val字符并且在“开始”位置
E[attr$=val]属性值里包含val字符并且在“结束”位置

示例1:

<a href="#" title="aa">百度</a>
<a href="#" title="bb">新浪</a>
<a href="#">搜狐</a>
<a href="#">小米</a>
<a href="#">京东</a>
a[title] {
    color: red;
}
/*表示存在title属性的a标签都使用该样式*/

显示结果:

属性选择器1.png

示例2:

<input type="text" value="输入"><br />
<input type="text" value="输入"><br />
<input type="text" value="输入"><br />
<input type="submit"><br />
<input type="reset"><br />
<input type="button" value="按钮"><br />
input[type="text"] {
    color: red;
}
/*表示只有type属性值为text的input标签才能使用该样式*/

显示结果:

属性选择器2.png

示例3:

<div class="font14">这是一个div</div>
<div class="font24">这是一个div</div>
<div class="textfont">这是一个div</div>
div[class^="font"] {
    color: red;
}
/*表示class属性的值以font开头的标签才能使用该样式*/

显示结果:

属性选择器3.png

(8)伪元素选择器(CSS3)

  1. E::first-letter 文本的第一个单词或字
  2. E::first-line 文本的第一行
  3. E::selection 可改变选中文本的样式

注意:“.”一个点是类选择器, “:”一个冒号是伪类选择器, “::”两个冒号是伪元素选择器。

示例:

<h2>锦上添花</h2>
<p>锦上添花,读音:jǐn shàng tiān huā ,汉语成语。释义:意指在美丽的锦织物上再添加鲜花。比喻略加修饰使美者更美,引申比喻在原有成就的基础上进一步完善。 出处: 宋 黄庭坚 《了了庵颂》:“又要 涪翁 作颂,且图锦上添花。” 此外, 清 李渔 《凰求凤·让封》:“三位夫人恭喜贺喜,又做了状元的夫人,又进了簇新的房子,又释了往常的嫌隙,真个是锦上添花。” 毛泽东 《在延安文艺座谈会上的讲话》二:“对于他们,第一步需要还不是‘锦上添花’,而是‘雪中送炭’。所以在目前条件下,普及工作的任务更为迫切。”
</p>
p::first-letter {
    color: red;
      font-size: 50px;
}
p::first-line {
    color: green;
}
p::selection {
    color: blue;
}
  1. E::before和E::after 在E元素内部的开始位置和结束位置创建一个元素,该元素为行内元素,且必须结合content属性使用。

注意:before与after表示在盒子内部的前端和后端插入内容。

示例:

<div>今年</div>
div::before {
    content: "我";
}
div::after {
    content: "18岁";
}

显示结果是: 我今年18岁

12、CSS三大特性

(1)CSS层叠性

是浏览器处理冲突的一个能力。如果一个属性通过两个选择器设置到同一个元素上,那么这个时候一个属性就会将另一个属性层叠掉 。

(2)CSS继承性

作用:子元素可以继承父元素的样式。
特殊性:

  • 并不是所有的属性都可以继承, 只有以color/font-/text-/line-开头的属性才可以继承。
  • 在CSS的继承中不仅仅是儿子可以继承, 只要是后代都可以继承 。
  • a标签的颜色和下划线的设置不能继承,必须对a标签本身进行设置。
  • h标签的字体大小不能修改,必须对h标签本身进行修改。可以使用JS代码getComputedStyle(document.getElementById("h1")).fontSize来获取h标签的字号大小。

(3)CSS优先级

  1. 什么是优先级?

优先级表示当多个选择器选中同一个标签, 并且给同一个标签设置相同的属性时, 如何层叠就由优先级来确定

  1. 优先级判断

1、如果使用的是同类型的选择器,那么谁写在后面就听谁的。就近原则

2、如果使用的是不同类型的选择器,那么会按照选择器的优先级来层叠。

!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

  1. 优先级之!important

用于提升选择器中某个属性的优先级, 可以将被指定属性的优先级提升为最高 。

1、!important只能提升被指定的属性的优先级, 其它的属性的优先级不会被提升 。

2、!important必须写在属性值得分号前面,与属性值之间加上一个空格 。

3、!important前面的感叹号不能省略 。

  1. 优先级权重

当多个选择器混合在一起使用时, 我们可以通过计算权重来判断谁的优先级最高 。

权重计算规则

(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的权重最高

示例:

<!--适用第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>
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;
} 

13、CSS书写规范

学习开始就形成良好的书写规范,是你专业化的开始。

(1)空格规范

  • 强制】选择器与 { 之间必须包含空格。

示例: .nav { }

  • 强制】属性名与之后的:之间不允许包含空格, :与属性值之间必须包含空格。

示例: font-size: 14px;

(2)选择器规范

  • 强制】当一个rule包含多个Selector时,每个选择器声明必须独占一行。

示例:

/*good*/
.post,
.page,
.comment {
  color: red;
}

/*bad*/
.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";
}

14、标签显示模式

HTML标签一般分为块标签和行内标签两种类型,它们也称块元素和行内元素。

(1)块级元素(block-level)

每个块元素通常都会独自占据一整行或多整行,可以对其设置高度、宽度、对齐等属性,常用于网页布局和网页结构的搭建。

常见块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等,其中<div>标签是最典型的块元素。
div非常符合布局,所以通常叫CSS+div布局

块级元素的特点:

  • 总是从新行开始
  • 宽度、高度、外边距以及内边距都可以控制
  • 宽度默认是容器的100%
  • 可以容纳内联元素和其他块元素

(2)行内元素(inline-level)

行内元素(内联元素)不占有独立的区域,仅仅靠自身的字体大小和图像尺寸来支撑结构,一般不可以设置宽度、高度、对齐等属性,常用于控制页面中文本的样式。

常见的行内元素有:<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等,其中<span>标签是最典型的行内元素。

行内元素的特点:

  • 和相邻行内元素在一行上。
  • 宽、高无效,但水平方向的padding和margin可以设置,垂直方向的无效。
  • 默认宽度就是它本身内容的宽度。
  • 行内元素只能容纳文本或其他行内元素(a特殊)。

注意:

  1. 只有文字才能组成段落,因此p标签中不能放块级元素,同理,h1~h6、dt都是文字类块级标签,里面不能放其他块级元素。示例:p标签中放div,查看源代码(有bug)
  2. 链接里面不能在放链接。

(3)块级元素和行内元素区别

块级元素的特点:

(1)总是从新行开始

(2)宽高、内外边距都可以控制

(3)宽度默认为容器的100%

(4)可以容纳内联元素和其他块元素 文字类的块级标签(p,h1~h6,dt)内部不能嵌套块级标签

行内元素的特点:

(1)和相邻行内元素在一行上

(2)宽高无效,可以设置水平方向的内外边距,垂直方向不可设置。

(3)默认宽度就是它本身内容的宽度

(4)行内元素只能容纳文本和其他行内元素

(4)行内块元素(inline-block)

在行内元素中有几个特殊的标签——<img />、<input />、<td>,可以对它们设置宽高和对齐属性,有些资料可能会把它们称为行内块元素。
    
行内块元素的特点:
(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>

案例: 导航栏

15、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('图片路径');    /*设置图片显示*/

示例:

<div id="example1"></div>
#example1 {
    width: 500px;
    height: 300px;
    background-image: url('../img/a1.PNG');
}

(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;

课堂案例:王者荣耀导航栏

背景图片案例.png

<a href="#">全新版本</a>
<a href="#">亿万福利</a>
<a href="#">跨界合作</a>
<a href="#">五月天</a>
<a href="#" id="range">排位大事件</a>
<a href="#">KPL明星赛</a>
<a href="#">开黑大数据</a>
body {
    background-color: #595992;
}
a {
    width: 100px;
    height: 100px;
    display: inline-block;
    text-align: center;
    line-height: 100px;
}            
a:hover {
    background: url(img/link_bg.png) no-repeat;
}
a#range:link {
    background: url(img/link_bg.png) 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背景图像是固定的

课堂案例:英雄联盟英雄介绍——大元素使 拉克丝

背景附着案例.png

<p>拉克珊娜·冕卫出身自德玛西亚,一个将魔法视为禁忌的封闭国度。 只要一提起魔法,人们总是带着恐惧和怀疑。 所以拥有折光之力的她,在童年的成长过程中始终担心被人发现进而遭到放逐,一直强迫自己隐瞒力量,以此保住家族的贵族地位。 虽然如此,拉克丝的乐观和顽强让她学会拥抱自己独特的天赋,现在的她正在秘密地运用自己的能力为祖国效力。</p><br />
<p>光芒四射被动技能 拉克丝的伤害类技能会将能量注入敌人的体内,这股能量会持续6秒。 拉克丝的下一次攻击将会点燃这股能量,以对目标造成额外魔法伤害(取决于拉克丝的等级)。</p><br />
<p>光之束缚快捷键:Q 朝目标地点发射一团光球,最多可束缚2个敌方单位2秒并对每个目标造50/100/150/200/250(+0.7)魔法伤害。</p><br />
<p>曲光屏障快捷键:W 朝目标方向掷出拉克丝的魔杖,来保护她自己以及被魔杖触及的所有友方英雄免受50/65/80/95/110(+0.2)伤害,持续3秒。 当魔杖到达它的飞行终点时,就会进行返程,来保护她和被魔杖触及的所有友方英雄免受额外的50/65/80/95/110(+0.2)伤害,持续3秒。 如果去程时命中了一名友方英雄,那么返程提供的护盾值翻倍。</p><br />
<p>透光奇点快捷键:E 创建一个区域,使其中的敌方单位减速25/30/35/40/45%。 在5秒后,该区域会爆炸,对区域内的敌人造成60/105/150/195/240(+0.6)魔法伤害。 再次激活此技能可以提前引爆该区域。</p><br />
<p>终极闪光快捷键:R 拉克丝发射一束耀目的光能射线,对一条直线上的所有敌人造成300/400/500(+0.75)魔法伤害。 如果有敌方英雄在被【终极闪光】命中后的1.75秒内死亡,那么就会返还它30/40/50%的冷却时间。 终极闪光还会引燃并刷新目标身上的光芒四射效果。</p>
<style type="text/css">
    p {
        font-size: 18px;
        line-height: 26px;
    }
    body {
        background-image: url('img/girl.jpg');
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: left top;
    }
</style>

(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;
}
插入图片和背景图片的区别
  1. 插入图片在更改图片大小时使用属性 width 和 height ,更改图片位置使用 margin 或 padding 盒模型。
  2. 背景图片在更改图片大小时使用 background-size 属性,更改图片位置时使用background-position属性。
  3. 一般情况下背景图片适合做一些小图标使用,产品展示之类的就用插入图片

示例:

<section>    <!-- 插入图片 -->
    <img src="img/blue.jpg"/>
    12345    <!-- 插入的图片会将盒子中的文本挤压到图片之后显示-->
</section>

<aside>    <!-- 背景图片 -->
    12345    <!-- 背景图片则是被当成背景使用,文本还是显示在盒子中背景图片之上 -->
</aside>
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*/
}

(9)多背景(CSS3)

以逗号分隔可以设置多背景,可用于自适应布局。

background-image:url(图片路径), url(图片路径); /*使用多张图片*/
background-position: left top, right bottom;
background-repeat: no-repeat, repeat;

示例:

<div>
    <h1>悯农</h1>
    <p>锄禾日当午</p>
    <p>汗滴禾下土</p>
    <p>谁知盘中餐</p>
    <p>粒粒皆辛苦</p>    
</div>
div {
    width: 550px;
    height: 500px;
    background-image: url(./img/bq6.png), url(./img/fang.jpg);
    background-repeat: no-repeat, no-repeat;
    background-position: right top, left top;
    background-size: 50px 50px, 550px 500px;
}

多背景图片.png

(10)背景颜色渐变(CSS3)

CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡。

CSS3 定义了两种类型的渐变(gradients):

  • 线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向
  • 径向渐变(Radial Gradients)- 由它们的中心定义

A、线性渐变

  1. 从上到下的线性渐变
background: linear-gradient(red, blue);
  1. 从左到右的线性渐变
/*background: linear-gradient(to left, red, green);*/
/*background: linear-gradient(to right, red, green);*/
/*background: linear-gradient(to right, red, yellow, green);*/
background: linear-gradient(to right, red, yellow, blue, green);
  1. 对角方向的线性渐变
background: linear-gradient(to bottom right, red, blue);

背景颜色渐变1.png

B、径向渐变**

  1. 颜色结点均匀分布的径向渐变
background: radial-gradient(red, green, blue);
  1. 颜色结点不均匀分布的径向渐变
background: radial-gradient(red 5%, green 10%, blue 50%);
  1. 形状为圆形的径向渐变
background: radial-gradient(circle, red, green, blue);

背景颜色渐变2.png

(11)凹凸文字

<div class="to">我是凸起的文字</div>
<div class="ao">我是凹下的文字</div>
body {
    background-color: grey;
    font: bold 6em "micro"
}            
div {
    margin: 30px;
    color: grey;
}            
.to {
    text-shadow: -1px -1px 1px white, 1px 1px 1px #000;
}        
.ao {
    text-shadow: -1px -1px 1px #000, 1px 1px 1px white;
}

(12)空心文字

<p>我是空心的文字,酷不酷?</p>
p {
    font-size: 50px;
    /*伪空心元素,与背景色有关*/
    -webkit-text-fill-color: white;
    -webkit-text-stroke-color: blue;
    -webkit-text-stroke-width: 2px;
}

16、盒子模型(CSS重点)

其实,CSS就三大模块:盒子模型、浮动、定位。

所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子,也就是一个装内容的容器。每个矩形都由元素的内容、内边距(padding)、边框(border)和外边距(margin)组成

(1)看透网页布局的本质

网页布局中,我们是如何把里面的文字、图片按照美工给我们的效果图排列的整齐有序呢?

看透网页布局的本质:把网页元素比如文字、图片等,放入盒子里面,然后利用CSS摆放盒子的过程,就是网页布局。

小米首页.png

(2)盒子模型(Box Model)

标准盒子模型.jpg

IE盒子模型.jpg

所有的文档元素(标签)都会生成一个矩形框,我们称为元素框(element box),它描述了一个文档元素在网页布局中所占的位置大小。因此,每个盒子除了有自己的大小和位置外,还会影响其他盒子的大小和位置。

(3)盒子边框(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);
}
表格的细线边框

以前学过的HTML表格的边框很粗,这里只需要CSS一句话就可以美观起来。

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; 
} 

(4)内边距(padding)

padding属性用于设置内边距。是指边框与内容之间的距离。

padding-top: 上内边距

padding-right: 右内边距

padding-bottom: 下内边距

padding-left: 左内边距

padding: 上右下左内边距

注意:属性后面的数值可变,表示不同的含义。

值的个数表达意思
1个值padding: 四周内边距
2个值padding: 上下、左右内边距
3个值padding: 上、左右、下内边距
4个值padding: 上、下、左、右内边距

课堂案例:新浪导航

新浪

(5)外边距(margin)

margin属性用于设置外边距。设置外边距会在元素之间创建“空白”,这段空白通常不能放置其他内容。

margin-top: 上外边距

margin-right: 右外边距

margin-bottom: 下外边距

margin-left: 左外边距

margin: 上 右 下 左

注意:行内元素可以设置水平方向的内外边距,但不能设置垂直方向的内外边距。

外边距实现盒子居中

可以让一个盒子实现水平居中,需要满足两个条件:

1、必须是块级元素。

2、盒子必须指定了宽度。

只需要给左右的外边距都设置为auto,就可以使块级元素水平居中。

实际工作中常用这种方式来进行网页布局,示例如下:

.header {
    width: 960px;
      margin: 0 auto;    /*表示上下外边距为0,左右水平居中*/
}
清除元素的默认内外边距

为了更方便地控制网页中的元素,制作网页时,可以使用如下代码清除元素默认的内外边距:

* {
    padding: 0;    /*清除内边距*/
      margin: 0;    /*清除外边距*/
}

需要注意的是:行内元素只有左右内外边距,是没有上下内外边距的。

文字水平居中和盒子水平居中
  1. 盒子居中使用margin,给定左右边距为auto即可。
  2. 文字居中使用text-align: center;

示例:

<div id="box1">
    这是一个div盒子
</div>
div {
    width: 300px;
    height: 200px;
    border: 1px solid deeppink;
    margin: 0 auto;    /*盒子居中使用 margin */
    text-align: center;    /*文本居中使用 text-align*/
}

(6)外边距合并

使用margin定义块元素的垂直外边距时,可能会出现外边距的合并。

相邻块元素垂直外边距的合并

当上下相邻的两个块元素相遇时,如果上面的元素有下外边距margin-bottom,下面的元素有上外边距margin-top,则他们之间的垂直距离不是margin-bottom与margin-top之和,而是取两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并(也称为外边距塌陷)。

外边距合并.gif

解决方案:避免就好了。

嵌套块元素垂直外边距的合并

对于两个嵌套关系的块元素,如果父元素没有上内边距及上边框,则父元素的上外边距会与子元素的上外边距合并,合并后的外边距为两者中的较大者。即使父元素的上外边距为0,也会发生合并。

外边距合并2.gif

解决方案

1.可以为父元素定义1像素的上边框border或上内边距padding

2.可以为父元素添加overflow: hidden;

(7)盒子模型布局的稳定性

开始学习盒子模型,最大的问题就是分不清内外边距的使用,什么情况下使用内边距,什么情况下使用外边距?

建议如下:

优先使用宽度(width),其次使用内边距(padding),最后使用外边距(margin)
width > padding > margin

原因:

1.margin会有外边距合并,还有在ie6下margin容易出bug。

2.padding会影响盒子大小,需要进行加减计算。box-sizing:border-box

3.width没有问题。我们经常用宽度剩余法 、 高度剩余法来做

(8)盒子阴影

语法格式:

box-shadow: 水平位置  垂直位置  模糊距离  阴影尺寸(影子大小)  阴影颜色  内/外阴影;
描述
h-shadow必需。水平阴影的位置,允许负值
v-shadow必需。垂直阴影的位置,允许负值
blur可选。模糊距离
spread可选。阴影的尺寸
color可选。阴影的颜色
inset可选。将外部阴影(outset)改为内部阴影

外部阴影是默认的,不能写。想要内部阴影inset

示例:

div {
    width: 200px;
    height: 200px;
    border: 2px solid deeppink;
    box-shadow: 5px 5px 3px 4px grey; 
}

(9)综合案例

搜索趣图.png

17、浮动(Float)

Float(浮动),最早用来控制图片,以便其他元素(特别是文字)实现环绕图片的效果,但它在布局时一样非常有用。

(1)什么是浮动?

元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制,移动到其父元素中指定的位置。

在CSS中,通过float属性来定义浮动,其基本语法如下:

选择器 {
    float: 属性值;
}
属性值描述
left元素向左浮动
right元素向右浮动
none元素不浮动(默认值)

(2)元素怎样浮动

  • 元素的水平方向浮动,意味着元素只能左右移动而不能上下移动。且其周围的元素也会重新排列 。
  • 一个浮动元素会尽量向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。(找离它最近的父级元素,不包含内边距<元素不会浮动到父级元素的边框上>)
  • 浮动元素之后的元素将围绕它。
  • 浮动元素之前的元素将不会受到影响。
  • 如果图像是右浮动,下面的文本流将环绕在它左边:
<p>
    <img src="./img/a0.PNG" width="120px" height="80px">
    这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是      一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本
</p>
img {
    float: right;
}

(3)彼此相邻的浮动元素

如果你把几个浮动的元素放到一起,如果有空间的话,它们将彼此相邻。

<img src="./img/a0.PNG" alt="" width="120px" height="80px">
<img src="./img/a1.PNG" alt="" width="120px" height="80px">
<img src="./img/a2.PNG" alt="" width="120px" height="80px">
<img src="./img/a3.PNG" alt="" width="120px" height="80px">
<img src="./img/a4.PNG" alt="" width="120px" height="80px">
img {
    margin: 10px
    float: left;
}

尝试调整浏览器大小,看一看图片没有足够大小显示时会做什么?

(4)清除浮动

元素浮动之后,周围的元素会重新排列,为了避免这种情况,使用clear属性。

clear属性用于指定元素两侧不能出现浮动元素。

语法:

clear: both; /*清除元素两边元素的浮动属性*/

示例:

<img src="./img/a0.PNG" alt="" />
<img src="./img/a1.PNG" alt="" />
<img src="./img/a2.PNG" alt="" />
<p class="text-line">第二行</p>
<img src="./img/a3.PNG" alt="" />
<img src="./img/a4.PNG" alt="" />
<img src="./img/boy.png" alt="" />
img {
    width: 150px;
    height: 85px;
    margin: 10px;
    float: left;    /*设置图片左浮动,图片会相邻显示*/
}            
.text-line {
    clear: both;    /*清除两边元素的浮动属性*/
}

(5)综合案例

浮动综合案例.png

18、定位

(1)为什么要定位?

第一幅图:红色的小方块可以在图片上移动。

定位1.png

第二幅图:左右箭头可以切换图片

定位2.png

(3)头部悬浮不动

定位3.png

(2)元素的定位属性

元素的定位属性主要包括定位模式边偏移两部分

  • 边偏移
边偏移属性描述
bottom底部偏移量,定义元素相对于其父元素下边线的距离
top顶端偏移量,定义元素相对于其父元素上边线的距离
left左侧偏移量,定义元素相对于其父元素左边线的距离
right右侧偏移量,定义元素相对于其父元素右边线的距离

定位要与边偏移一起搭配使用,如top: 100px; left:30px;

  • 定位模式

在CSS中,position属性用于定义元素的定位模式,其基本语法如下:

选择器 {
    position:  属性值;
}

position属性的常用值

属性值描述
static默认值,自动定位。
relative相对位置,相对于其原文档流的位置进行定位
absolute绝对定位,相对于其上一个已经定位的父元素进行定位
fixed固定定位,相对于浏览器窗口是固定位置

(3)静态定位static

静态定位是所有元素的默认定位方式,当position属性的取值为static时,可以将元素定位于静态位置。所谓静态位置就是各个元素在HTML文档流中默认的位置。

在静态定位状态下,无法通过偏移属性(top、bottom、left、right)来改变元素的位置。

一般用来清除定位,比如一个原来有定位的盒子,不写定位了,就可以加static

(4)相对定位relative

设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状,它原本所占的空间仍保留。

如果对一个元素进行相对定位,它将出现在它所在的位置上。然后,可以通过设置垂直或水平位置,让这个元素“相对于”它的起点进行移动。

示例:如果将 top 设置为 20px,那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像素,那么会在元素左边创建 30 像素的空间,也就是将元素向右移动。

#box_relative {
  position: relative;
  left: 30px;
  top: 20px;
}

相对定位.gif

注意:

  1. 在使用相对定位时,通过边偏移来移动位置,无论是否进行移动,元素仍然占据原来的空间。因此,移动元素会导致它覆盖其它框。
  2. 其次,每次移动的位置,是以元素自己本身来移动。(相对于自己来进行移动

相对定位的盒子仍在标准流中,它后面的盒子仍以标准流方式对待他。(相对定位不脱标

如果说浮动的主要目的是让多个块级元素一行显示,那么定位就是移动位置,让盒子到我们想要的位置去。

(5)绝对定位absolute

设置为绝对定位的元素框从文档流完全删除,并相对于其包含块定位,包含块可能是文档中的另一个元素或者是初始包含块(body)。元素原先在正常文档流中所占的空间会关闭,就好像该元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。

绝对定位使元素的位置与文档流无关,因此不占据空间。 脱标

普通流中其它元素的布局就像绝对定位的元素不存在一样:

#box_relative {
  position: absolute;
  left: 30px;
  top: 20px;
}

绝对定位.gif

绝对定位的元素的位置相对于最近的已定位祖先元素,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块

  • 父级没有定位

父亲没有定位,孩子以浏览器为基准点对齐

  • 父级有定位

父亲有定位,则以父亲为基准点对齐

  • 子绝父相

意思是:子级是绝对定位的话,父级要用相对定位。

子绝父相的由来:

​ 相对定位 占有位置 不脱标

​ 绝对定位 不占有位置 完全脱标

示例:

子绝父相.png)

总结:对于定位的主要问题是要记住每种定位的意义。所以,现在让我们复习一下学过的知识吧:相对定位是“相对于”元素在文档中的初始位置,而绝对定位是“相对于”最近的已定位祖先元素,如果不存在已定位的祖先元素,那么“相对于”最初的包含块(body)。

(6)绝对定位的盒子水平/垂直居中

普通盒子想要水平居中,只需要左右margin改为auto即可,但是绝对定位时auto就失效了。

定位的盒子也可以水平或垂直居中,算法如下:

  1. 首先left 50% 父盒子一半的大小。
  2. 然后走自己外边距负的一半值就可以了。margin-left=-半值
<div class="father">
    <div class="son-hr"></div>
    <div class="son-ve"></div>
    <div class="hr-ve"></div>
</div>
<style type="text/css">
    .father {
        width: 800px;
        height: 400px;
        background-color: pink;
        margin: 50px auto;
        position: relative;
    }
    /*子元素水平居中*/
    .son-hr {
        width: 100px;
        height: 50px;
        background-color: green;
        position: absolute;
        /*margin: 0 auto; 使用绝对定位的盒子,margin的auto就失效了*/
        left: 50%;
        margin-left: -50px;
    }
    /*子元素垂直居中*/    
    .son-ve {
        width: 100px;
        height: 50px;
        background-color: blueviolet;
        position: absolute;
        top: 50%;
        margin-top: -25px;
    }
    /*子元素垂直加水平居中*/    
    .hr-ve {
        width: 100px;
        height: 50px;
        background-color: darkgoldenrod;
        position: absolute;
        left: 50%;
        margin-left: -50px;
        top: 50%;
        margin-top: -25px;
    }    
</style>

(7)固定定位fixed

固定定位是绝对定位的一种特殊形式,它以浏览器窗口作为参照物来定义网页元素。当position属性的取值为fixed时,即可将元素的定位模式设置为固定定位。

当对元素设置固定定位后,它将脱离标准文档流的控制,始终依据浏览器窗口来定义自己的显示位置。不管浏览器滚动条如何滚动,也不管浏览器窗口大小如何变化,该元素都会始终显示在浏览器窗口的固定位置。

(8)叠放次序(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.

注意:

  1. z-index的默认值是0,取值越大,定位元素在层叠元素中越靠上。
  2. 如果取值相同,根据书写顺序,后来者居上。
  3. 数字后面不能加单位。
  4. 只有相对定位、绝对定位、固定定位有此属性,其余标准流、浮动、静态定位都无此属性。

CSS3转换 transform

CSS3 转换是使元素改变形状、尺寸和位置的一种效果。 转换可以对元素进行移动、缩放、旋转、拉长或拉伸。

2D转换

2D转换表现在平面上,主要方法有:

  • translate() 根据左(X轴)和顶部(Y轴)位置给定的参数,从当前元素位置移动。
div {
    transform: translate(50px,100px);
    -ms-transform: translate(50px,100px); /* IE 9 */
    -webkit-transform: translate(50px,100px); /* Safari and Chrome */
}
  • rotate() 在一个给定度数顺时针旋转的元素。负值是允许的,这样是元素逆时针旋转。 需要带单位deg
div {
    transform: rotate(30deg);
    -ms-transform: rotate(30deg); /* IE 9 */
    -webkit-transform: rotate(30deg); /* Safari and Chrome */
}
  • scale() 该元素放大或缩小的大小,取决于宽度(X轴)和高度(Y轴)的参数 ,正数表示放大,小数表示缩小。
div {
    transform: scale(2,3); /* 标准语法 */
    -ms-transform:scale(2,3); /* IE 9 */
    -webkit-transform: scale(2,3); /* Safari */
}
  • 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 */
}

matrix() matrix()方法和2D变换方法合并成一个。

matrix 方法有六个参数,包含旋转,缩放,移动(平移)和倾斜功能。

http://www.css88.com/tool/css3Preview/Transform-Matrix.html

Matrix是transform的一个子集,基本语法transform: matrix(a, c, b, d, tx, ty);
a, c, b, d是一个二维矩阵:
┌ ┐
│ a b │
│ c d │
└ ┘

a:参照Y轴进行翻转与缩放

b:参照Y在进行倾斜,与X轴之间形成的角度

c:参照X轴在倾斜,与Y轴之间形成的角度

d:参照X轴进行翻转与缩放

tx:X轴上的平移

ty:Y轴上的平移

tx, ty就是就是基于X和Y 坐标重新定位元素。
tx, ty参数值在各个浏览器下有差异:

firefox下tx, ty除了0值之外必须只用长度单位值(“px”,“em”等)或者使用百分数
webkit和opera下tx, ty的值不能加单位或者百分数,他们就是一个数值,默认单位是px;
div {
    transform:matrix(0.866,0.5,-0.5,0.866,0,0);
    -ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
    -webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
}

3D转换

3D转换表现在空间上,主要方法有:

CSS3过渡 transition

(1)如何实现?

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。使用transition来实现。

要实现这一点,必须规定两项内容:

  • 指定要添加效果的CSS属性
  • 指定效果的持续时间。

实例1:应用于宽度属性的过渡效果,时长为 2 秒,当鼠标光标移动到该元素时,它逐渐改变它原有样式

div {    
    transition: width 2s;    
    -webkit-transition: width 2s; /* Safari */
}

div:hover {
    width:300px;
}

(2)多项改变

要添加多个样式的变换效果,添加的属性由逗号分隔:

div {
    transition: width 2s, height 2s, transform 2s;
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s;
}

(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 之间的数值。

使用了全部属性:

div {
    transition-property: width;
    transition-duration: 1s;
    transition-timing-function: linear;
    transition-delay: 2s;
    /* Safari */
    -webkit-transition-property:width;
    -webkit-transition-duration:1s;
    -webkit-transition-timing-function:linear;
    -webkit-transition-delay:2s;
}

简写的 transition 属性,格式如下:

transition: property  duration  timing-function  delay
div {
    transition: width 1s linear 2s;
    /* Safari */
    -webkit-transition:width 1s linear 2s;
}

CSS3动画 animation

CSS3多列显示

(1)column-count(CSS3)

column-count用于指定某个元素应分为的列数。取值如下

  • 数值:将元素的内容以指定的列数显示
  • auto:列数将取决于其他属性,例如:"column-width"
<div>
    “当我年轻的时候,我梦想改变这个世界;当我成熟以后,我发现我不能够改变这个世界,我将目光缩短了些,决定只改变我的国家;当我进入暮年以后,我发现我不能够改变我们的国家,我的最后愿望仅仅是改变一下我的家庭,但是,这也不可能。当我现在躺在床上,行将就木时,我突然意识到:如果一开始我仅仅去改变我自己,然后,我可能改变我的家庭;在家人的帮助和鼓励下,我可能为国家做一些事情;然后,谁知道呢?我甚至可能改变这个世界。”
</div>
div {
    column-count:3;
    -moz-column-count:3; /* Firefox */
    -webkit-column-count:3; /* Safari and Chrome */
}

(2)column-width(CSS3)

column-width指定列的宽度。取值如下:

  • length:指定列宽的长度
  • auto:浏览器将决定列的宽度
column-width: 100px;
-moz-column-width:100px; /* Firefox */
-webkit-column-width:100px; /* Safari and Chrome */

(3)column-span(CSS3)

column-span属性指定某个元素应该跨越多少列。取值如下:

  • 1:元素应跨越一列
  • all:该元素应该跨越所有列
column-span: all;
-webkit-column-span:all; /* Safari and Chrome */

(4)column-gap(CSS3)

column-gap的属性指定的列之间的间隙。取值如下:

  • length:一个指定的长度,将设置列之间的差距
  • normal:指定一个列之间的普通差距。 W3C建议1EM值
column-gap:40px;
-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari and Chrome */

(5)column-rule(CSS3)

column-rule用于指定列之间的规则:宽度,样式和颜色。语法如下:

column-rule: column-rule-width column-rule-style column-rule-color;
column-rule-width:设置列中之间的宽度
column-rule-style:设置列中之间的样式
column-rule-color:设置列中之间的颜色
column-rule: 2px solid red;
-moz-column-rule:4px solid red; /* Firefox */
-webkit-column-rule:4px solid red; /* Safari and Chrome */

注意:IE9以及IE更早版本不支持column-count属性

(6)columns(CSS3)

columns是一个简写属性,用来设置列的宽度和列数,语法格式如下:

columns: column-width column-count;

CSS3 弹性盒子(Flex Box)

弹性盒子是 CSS3 的一种新的布局模式。CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。弹性容器通过设置 display 属性的值为 flexinline-flex将其定义为弹性容器。弹性容器内包含了一个或多个弹性子元素。

弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。

<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div> 
</div>
<style>
    .flex-container {
        display: -webkit-flex;
        display: flex;
        width: 400px;
        height: 250px;
        background-color: lightgrey;
    }

    .flex-item {
        background-color: skyblue;
        width: 100px;
        height: 100px;
        margin: 10px;
    }
</style>

(1)direction

通过设置direction的值(rtl、ltr)可以改变子元素在容器内的排列方向。

body {
    direction: rtl;
}

(2)flex-direction

flex-direction 属性指定了弹性子元素在父容器中的排列方式(水平、垂直)。取值如下:

  • row:横向从左到右排列(左对齐),默认的排列方式。
  • row-reverse:反转横向排列(右对齐,从后往前排,最后一项排在最前面。
  • column:纵向排列。
  • column-reverse:反转纵向排列,从后往前排,最后一项排在最上面。
-webkit-flex-direction: column;
flex-direction: column;

(3)justify-content

justify-content属性用于指定弹性盒子内部子元素的对齐方式,取值如下:

  • flex-start:弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线,而后续弹性项依次平齐摆放。
  • flex-end:弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线,而后续弹性项依次平齐摆放。
  • center:弹性项目居中紧挨着填充。(如果剩余的自由空间是负的,则弹性项目将在两个方向上同时溢出)。
  • space-between:弹性项目平均分布在该行上。第1个弹性项的外边距和行的main-start边线对齐,而最后1个弹性项的外边距和行的main-end边线对齐,然后剩余的弹性项分布在该行上,相邻项目的间隔相等。
  • space-around:弹性项目平均分布在该行上,两边留有一半的间隔空间。
justify-content: center;

(4)完美的居中

使用弹性盒子,居中变的很简单,只需要给子元素设置 margin: auto; 可以使得弹性子元素在两轴方向上完全居中。

.flex-item {
    background-color: skyblue;
    width: 75px;
    height: 75px;
    margin: auto;
}

CSS3多媒体查询media

@media可以针对不同的媒体类型(包括显示器、便携设备、电视机,等等)设置不同的样式规则,CSS3 根据设置自适应显示。媒体查询可用于检测很多事情,例如:

  • viewport(视窗) 的宽度与高度
  • 设备的宽度与高度
  • 朝向 (智能手机横屏,竖屏) 。
  • 分辨率

目前很多针对苹果手机,Android 手机,平板等设备都会使用到多媒体查询。

(1)多媒体查询语法

多媒体查询由多种媒体组成,可以包含一个或多个表达式,表达式根据条件是否成立返回 true 或 false。

@media not|only mediatype and (expressions) {
    CSS 代码...;
}

如果指定的多媒体类型匹配设备类型则查询结果返回 true,文档会在匹配的设备上显示指定样式效果。

除非你使用了 not 或 only 操作符,否则所有的样式会适应在所有设备上显示效果。

  • not: not是用来排除掉某些特定的设备的,比如 @media not print(非打印设备)。
  • only: 用来规定某种特别的媒体类型。对于支持Media Queries的移动设备来说,如果存在only关键字,移动设备的Web浏览器会忽略only关键字并直接根据后面的表达式应用样式文件。对于不支持Media Queries的设备但能够读取Media Type类型的Web浏览器,遇到only关键字时会忽略这个样式文件。
  • all: 所有设备,这个应该经常看到。

(2)CSS3多媒体类型

描述
all用于所有多媒体类型设备
print用于打印机
screen用于电脑屏幕,平板,智能手机等。
speech用于屏幕阅读器

实例1:当屏幕的可视窗口宽度大于480px时改变背景色。

body {
    background-color: pink;
}

@media screen and (min-width: 480px) {
    body {
        background-color: lightgreen;
    }
}

实例2:当屏幕的可视窗口宽度大于480px时将菜单浮动到左侧。

<div>
      <div id="leftsidebar">
        <ul id="menulist">
          <li class="menuitem">Menu-item 1</li>
          <li class="menuitem">Menu-item 2</li>
          <li class="menuitem">Menu-item 3</li>
          <li class="menuitem">Menu-item 4</li>
          <li class="menuitem">Menu-item 5</li>
       </ul>
     </div>
      <div id="main">
        <h1>重置浏览器窗口查看效果!</h1>
        <p>在屏幕可视窗口尺寸大于 480 像素时将菜单浮动到页面左侧。</p>
      </div>
</div>
#main {
    margin-left: 4px;
}
#leftsidebar {
    float: none;
    width: auto;
}
#menulist {
    margin:0;padding:0;
}

.menuitem {
    background:#CDF0F6;
    border:1px solid #d4d4d4;
    border-radius:4px;
    list-style-type:none;
    margin:4px;
    padding:2px;
}

@media screen and (min-width: 480px) {
    #leftsidebar {
        width:200px;
        float:left;
    }
    #main {
        margin-left:216px;
    }
}
Last modification:February 24th, 2021 at 10:15 am
如果觉得我的文章对你有用,请随意赞赏