《Web前端技术(》课件_3.CSS层叠样式表基础.pptx

CSS层叠样式表基础

学习导图

3.1CSS基本概念

3.1.1CSS概述CSS层叠样式表是一种可控制网页样式并允许样式与内容相分离的一种技术CSS能够对网页的布局、字体、颜色、背景等图文实现更精确的控制CSS使得网页的体积更小、下载速度更快，且可以实现多个页面的自动更新

3.1.2CSS基本语法CSS代码主要由对象、属性、属性值三个基本部分组成。对象很重要，它指定了对哪些网页元素进行样式设置，在CSS中对象也称为选择器(selector)。属性是CSS语法中的关键字，它规定了格式修饰的一个方面。

3.1.3在页面中使用CSS内联样式表：直接在HTML标签内使用style属性内部样式表：使用style标签在HTML文档头部定义

在页面中使用CSS外部样式表：将CSS代码写入一个或多个文件后缀名为.css的文件中。当样式需要应用于多个页面时，使用link标签链接到样式表（1）定义独立的外部样式文件（2）在页面中通过link链接外部样式文件

3.2CSS选择器

3.2.1元素选择器*是通配符选择器，可以与任何元素匹配。选择指定HTML元素(标签)，给选择的元素设置样式

2.2.2类选择器类(class)选择器：选择并设置一组元素的样式

3.2.3ID选择器ID选择器：为标有特定id的HTML元素设置样式

3.2.4后代选择器后代选择器：选择并设置元素后代的元素

3.2.5子元素选择器子元素选择器：只选择元素的子元素，不会扩大到任意的后代元素

3.2.6相邻兄弟元素选择器相邻兄弟元素选择器：选择紧接在另一个元素后的元素，且二者有相同的父元素

3.2.7兄弟元素选择器兄弟元素选择器：选择一个元素后的元素，且二者有相同的父元素

3.2.8复合选择器复合选择器包括交集选择器和并集选择器两种类型。交集选择器是由两个选择器直接连接构成，结果是两者各自元素范围的交集，其中第一个选择器必须是元素选择器，第二个选择器是类选择器或ID选择器，两个选择器之间必须连续写，不能有空格。

3.2.9属性选择器可以为拥有指定属性的HTML元素设置样式

3.2.8复合选择器并集选择器：对各个基本选择器所选择的范围同时选中，任何形式的基本选择器都可以作为并集选择器的一个组成部分，各个元素之间用逗号分隔。

3.2.9属性选择器[title]{color:red;}给具有title属性的所有元素设置样式；[title=test]{color:red;}给具有title属性且属性值为test的元素设置样式；[title~=hello]{color:red;}给包含指定值的title属性的所有元素设置样式，一般适用于由空格分隔的属性值，如h2title=helloworldHelloworld/h2[lang|=en]{color:red;}给带有包含指定值的lang属性的所有元素设置样式，一般适用于由连字符分隔的属性值，如plang=en-usHi!/p。

3.2.10伪类选择器伪类：同一个标签，根据其不同的状态，有不同的样式,用冒号表示。静态伪类:仅用于超链接的样式，如:link，:visited动态伪类，是所有元素都适用的样式，如:hover,:active,:focus等a:link{color:red;}/*超链接点击之前是红色*/a:visited{color:green;}/*超链接点击之后是绿色*/a:hover{color:green;}/*鼠标悬停，放到标签上的时候*/a:active{color:black;}/*鼠标点击链接，但是不松手的时候*/伪类选择器分为两类：静态伪类、动态伪类

3.2.10伪类选择器/*输入元素获取焦点时：*/input:focus{color:white;background-color:#6a6a6a;}/*鼠标放在元素上时显示蓝色*/label:hover{color:blue;}/*点击元素鼠标没有松开时显示红色*/label:active{color:red;}

3.2.11伪元素选择器h1:before可以在元素内容前面插入新内容h1:after可以在元素内容之后插入新内容伪元素是原本不在DOM中的元素，这个元素是新创建的元素。

3.3CSS常用属性

3.3.1字体属性字体属性用来定义文本所使用的字体系列、大小、粗细、样式等

3.3.2文本属性文本属性可定义文本的外观、进行段落排版。通过文本属性，可以改变文本的字符间距、对齐方式、修饰方式、文本缩进等。

3.3.2文本属性