电子课件单元4 CSS3概述与基本语法

1、 内容可修改电子课件单元4 CSS3概述与基本语法CSS3概述与基本语法CSS3概述一个布局美观的页面以及高访问量的网站，是网页设计者的追求。CSS3可以对页面布局、字体、颜色、背景和其他图文效果的实现提供更加精确的控制。仅有HTML定义的网页添加样式美化后的页面CSS3概述CSS 全称 Cascading Style Sheet ，称为层叠样式表，也可以称为CSS样式表或样式表，其文件扩展名为.css。CSS是用于增强或控制网页样式，并允许将样式信息与网页内容分离的一种标记性语言。使用 CSS3 最大优势是，在后期维护中如果一些外观样式需要修改 ，只需要修改相应的代码即可。CSS3概述CSS

2、3是CSS的升级版本，3只是版本号，它在CSS的基础上增加了很多强大的新功能。CSS3配合HTML5标准，可以实现原来必须使用图片或JavaScript才能完成的效果，大大提高了网页开发的效率。CSS3的基本语法CSS样式表由若干条样式规则组成，这些样式规则可以应用到不同的元素或文档中来定义它们的显示效果。每一条样式规则由三部分构成：选择器（selector）、属性（property）和属性值（value）。基本格式如下： selector property : value; p color:red; 示例：属性值选择器CSS3的基本语法如果要定义选择器的多个属性，则属性和属性值为一组，组与组

3、之间用“；”隔开。p font-family: 楷体; color:red; font-size:50px; font-weight :bold; 示例：CSS3语法规范 1CSS样式中选择器严格区分大小写，属性和值不区分大小写，但按照书写规范，一般都使用小写。样式代码中的标点符号，必须用英文状态下的符号。多个属性间必须用分号间隔开，最后一个属性后的分号可以省略，但建议保留。 2 3在编写CSS代码时，为了提高代码的可读性，可以加上CSS注释。如果属性的值由多个单词组成或中间包含空格，必须为这个属性值加上引号。CSS3语法规范p font-family: 楷体; /* 定义字体 */ colo

4、r: red; /* 定义文本颜色 */示例：示例：pfont-family: arial black; 4样式规则中不同属性建议换行写，可读性更好。 5 6CSS 样式代码插入的形式CSS样式能很好地控制页面显示，分离网页内容和样式代码，它控制HTML5页面效果的方式包括行内样式、内嵌样式 、链接样式和导入样式。如何插入样式表 不以规矩，不能成方圆。行内样式是所有样式中比较简单、直观的方法。他直接把CSS代码添加到HTML文件中，是作为HTML的标签属性呈现的。通过这种方法，可以很简单地对某个元素单独定义样式。行内样式的使用方法是直接在HTML标签中使用style属性，该属性的内容就是CSS

5、的属性和值。示例： 行内样式页面标题pcolor:#FF00FF;font-size:25px;内嵌样式就是将CSS样式代码添加到与之间，并且用和标签进行声明。示例： 内嵌样式链接样式是指在外部定义CSS样式表并形成以.css为扩展名的文件，然后在HTML页面中通过标签链接该CSS样式表。该链接语句必须放在页面的与之间。页面标题 示例：链接样式使用导入样式时，在HTML文件初始化时，样式会被导入到HTML文件内，作为文件的一部分，类似于内嵌效果。导入样式表的方法是在内嵌样式表的标签中，使用import导入一个外部的CSS文件。 import url(style4-3.css); 示例：导入样式

6、导入样式与链接样式虽然很类似，但在实际开发中，极少用到。大家更倾向于使用link方式（链接样式）。因为import方式先加载HTML，后加载CSS，如果网速不好，页面是没有样式的，而使用链接样式表，HTML和CSS同时加载，用户体验更好。导入样式基本选择器想要把CSS样式应用于特定的HTML元素，首先需要通过选择器找到该目标元素。所有网页元素都是通过不同的CSS选择器进行控制的。基础选择器主要包括四种:标签选择器类选择器id选择器通配符选择器引入p color: red; font-size: 20px; h2 color: blue; font-size: 30px; 标签选择器就是通过标签

7、的名字来选择 HTML 元素修改css样式。示例： 标签选择器 标签选择器基本语法格式如下所示: selector property:value; 标签选择器通常用于设置在整个网站都会出现的基本样式。通过声明一个具体标签，可以对文档里这个标签出现的每一个地方应用样式规则。标签选择器通配符选择器用“*”表示，用于选择页面上的所有的HTML元素。示例： * margin: 0;padding: 0;通配符选择器类选择器用来为一系列标签定义相同的呈现方式，基本语法格式如下所示： .classValue property : value; 示例：.cl color:red; .fs font-size

8、: 20px; 类选择器类选择器定义的样式不会立即呈现出来，需要在标签中通过class属性调用该样式。示例：CSS代码 .cl color:red; 当要给一个元素设定多个类样式，即class同时设置多个值时，每个值要用空格间隔开。示例：HTML代码 class选择器的使用CSS代码 .cl color:red; .fs font-size: 20px; HTML代码 class选择器的使用 类选择器id选择器和类选择器类似，都是针对特定属性的属性值进行匹配。但是id属性具有唯一性，一个网页文件中只能有一个标签使用某一id的属性值。定义id选择器的基本语法格式如下所示： #idValue pr

9、operty: value;示例：CSS代码 #fscolor:red;font-size:25px;HTML代吗 id选择器的使用id 选择器类选择器与id选择器主要有以下两种区别： 1类选择器可以给任意数量的标签定义样式，但id选择器只能使用一次。id选择器比类选择器具有更高的优先级。 2id 选择器复合选择器复合选择器将多种选择器进行搭配，可以构成一种复合选择器，也称为组合选择器，也就是将标签选择器、类选择器和id选择器组合起来使用。组合方式很多，可以是：（1） 标签选择器和标签选择器组合 （2）标签选择器和类选择器组合（3）标签选择器和id选择器组合后代选择器 后代选择器用于选择某个父

10、元素下面所有的元素，例如把作为h1元素后代的em元素的文本变为红色，而其他元素后代的em元素则不受控制。h1 em color:red;代码写法是一级子元素选择器 一级子元素选择器用于 。后代选择器是选择父元素的所有子孙元素，一级子元素选择器只选择第一级子元素，不会再向下查找元素。选择某个父元素的直接子元素示例把作为p元素一级子元素的 em 元素的文本变为红色。p em color:red;写法是交集选择器交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格。示例设置类名为one的p元素文本颜色为红色。p.one color:red;写法是并集

11、选择器 并集选择器是多个选择器具有同一种样式，中间用逗号隔开，标签选择器，类选择器，id选择器都可以。并集选择器又叫分组选择器，逗号表示分组。示例要把所有h2元素、em元素和类名为bt的元素设置相同样式文本颜色为红色。h2,em,.btcolor: red;写法是伪类选择器伪类选择器伪类选择器是在CSS中已经定义好的选择器,不能随便命名定义。伪类选择器可以分为UI元素状态伪类选择器和结构伪类选择器两种。UI元素状态伪类选择器的使用方法UI元素状态伪类选择器的特点是：指定的样式只有当元素处于某种状态下时才起作用，在默认状态下不起作用。UI元素状态包括：选中、未选中、获取焦点、失去焦点等。常用的U

12、I元素状态伪类选择器选择器功能描述:link用于设置超链接未被访问时的样式:visited用于设置超链接已经被访问过的样式:hover用于设置元素被激活时 （鼠标在元素上点击没有松开的状态）的样式:active选择父元素下仅有的一个子元素:focus 用于设置元素获得焦点时的样式:checked 用于设置表单中复选按钮或者单选按钮被选中状态时的样式常用的UI元素状态伪类选择器示例：超链接四种状态的样式a:link color:black; text-decoration:none; a:visited color:black; text-decoration:none; a:hover col

13、or:red; text-decoration:underline; a:active color:purple; text-decoration:underline; 注意：标签的这四种伪类选择器要按a:link、a:visited、a:hover、a:active的顺序定义，否则会导致其中某个样式无法显示。结构伪类选择器结构伪类选择器，可以根据元素在文档中所处的位置，来动态选择元素，从而减少HTML文档对ID或类的依赖，有助于保持代码干净整洁。选择器功能描述:first-child选择父元素的第一个子元素:last-child选择父元素的最后一个子元素:nth-child(n)选择父元素的

14、第n个位置的子元素，参数n可以是数字、关键字（odd、even）、公式（2n、2n+3），参数的索引从1开始计算:only-child选择父元素下仅有的一个子元素伪元素选择器伪元素是不存在的元素或是一种特殊的页面元素，表示一个特殊的位置。CSS中有四种伪元素选择器，如下表所示。选择器功能描述:first-line为某个元素的第一行文字使用样式，只能应用于块级元素:first-letter为某个元素中的文字的首字母或第一个字使用样式，只能应用于块级元素:before在某个元素之前插入一些内容，需要与content属性配合使用:after在某个元素之后插入一些内容，需要与content属性配合使用

15、注意在 CSS3 中伪元素选择器用双冒号表示法，以区分伪类选择器。但是在 CSS2 和 CSS1 中，伪类和伪元素都使用了单冒号语法。因此目前浏览器为了兼容CSS2 和 CSS1 伪元素可接受单冒号语法。样式的层叠与继承样式的层叠与继承CSS是层叠样式表的简称，其基本特征是层叠性和继承性。对于网页开发者来说，需要深刻理解并灵活使用这两个概念。CSS层叠性文档中的一个元素可能同时被多个CSS选择器选中，每个选择器都有一些样式规则，即多个选择器的作用发生了叠加，这就是层叠性。CSS继承性继承性是指定义CSS样式时，子元素会继承父元素的某些样式，如字体、字号和文本颜色。CSS继承性继承性非常有用，能

16、使网页开发者不必在元素的每个后代上添加相同的样式。如果设置的属性是一个可继承的属性，只需将其应用于父元素即可。示例div,p,ul,o1,h1,h2,h3,licolor:black;把页面上的div p ul ol 标题h1 h2 h3 和所有的列表项li 都变成黑色功能可以简单的写成 body color:black; 第二种写法可以达到相同的控制效果，且代码更简洁。CSS继承性恰当地使用继承可以简化代码，降低CSS样式的复杂性。但是，如果在网页中所有的元素都大量继承样式，那么判断样式的来源就会很困难，所以对于字体、文本属性等网页中通用的样式可以使用继承。这里还要注意，不是所有的CSS属性

17、都可以继承的。颜色属性、文本相关属性、列表相关属性等。有继承性的CSS属性包括：宽度（width）、高度（height）、边框（border）、边距（margin）、背景（background）等。无继承性的CSS属性包括：CSS优先级CSS具有层叠性和继承性，那么文档中的一个元素继承来的样式或多个选择器叠加的样式发生冲突时，这时就会出现CSS优先级的问题。CSS优先级权重计算方式样式名权重继承0.1标签选择器1class选择器10id选择器100行内样式1000!important最高级别!important拥有最高级别权重, 段落文本最终显示颜色为“blue”蓝色。!important拥有最高级别权重, 段落文本最终显示颜色为“blue”蓝色。CSS优先级如果只是简单计算选择器的权重，#p1是id选择器权重为100，p选择器权重为1