CSS3讲义选读.docx

CSS 概述 层叠样式表CSS(Cascading Style Sheet )，是一个文本文件，其中包含一个或多个（通过属性和值）决定网页某个特定元素如何显示的规则，用来控制网页的样式和布局。CSS3包含了圆角、阴影效果、文字阴影、自定义字体、旋转文本、不透明背景颜色、多图像背景、渐变等新功能。 1、CSS的作用 第一，简化网页的代码，提高访问速度。外部的CSS文件会被浏览器保存在缓存里，加快下载显示的速度，也减少了需要上传的代码数量。 第二，便于维护。(1)便于修改网站样式：只要修改CSS文件，就可改变整个网站的风格特色。避免一个个网页的修改，大大减少重复劳动的工作量；(2)可以重用样式。 第三，页面内容和显示样式分离。 2、如何创建CSS? 创建CSS样式表有三种方式：(1)元素内嵌样式；(2)文档内嵌样式；(3)外部引入样式。 (1)元素内嵌样式：即在当前元素的style属性中定义样式。 p style=color:red;font-size:50px;这是一段文本/p(2)文档内嵌样式：在head元素之间创建style元素，通过选择器的方式调用指定的元素并设置相关CSS。 style type=text/css p { color: blue; font-size: 40px; } /stylep这是一段文本/p(3)外部引用样式：先建立外部样式表文件(.css)，然后在网页文件的head内使用link链接。 /* style.css */ @charset utf-8; p { color: green; font-size: 30px; }link rel=stylesheet type=text/css href=style.cssp这是一段文本/p解释：很多时候，大量的HTML 页面使用了同一个组CSS。那么就可以将这些CSS 样式保存在一个单独的.css 文件中，然后通过link元素去引入它即可。@charset utf-8表明设置CSS 的字符编码，如果不写默认就是utf-8。如果有多个.css 文件，可以使用@import 导入方式引入.css 文件。只不过，性能不如多个link链接。 3、CSS基本语法（构造样式规则） 样式表中包含了定义网页外观的样式规则，每条样式规则都有两个主要部分：选择器（selector）和声明块（declaration block）。选择器决定将格式化应用到哪些元素；声明块（以前花括号开始，以后花括号结束）定义要应用的格式化，声明块内的每条声明（declaration）都是由一个冒号隔开、以分号结尾的属性-值对。声明的顺序不重要，除非对相同的属性定义了两次。推荐加入额外的空格和缩进来提高样式表的可读性。CSS对大小写不敏感，在选择器中对class和id名称也不敏感。 selector {/* 选择器,希望定义样式的HTML元素 */ property: value; /* property(属性)：样式名称；value（值）：样式的值 */ property: value; }例如：选择器 h1 { background-color: yellow; color: red; } 声明块 属性 值 声明 样式规则 为样式规则添加注释：在CSS中添加注释是很好的习惯，使用注释可以标注样式表的主要区域，或者只是针对某条规则或声明进行解释。在样式表中使用 /* 注释内容 */ 可进行多行注释。注释可放在样式规则的前面或后面，也可放在声明块内部，但是注释不能嵌套。通常，将相关的规则放在一起，形成分组，并在每组前面放置一段描述性的注释（使用大写字母和一条下划线可以清楚地标识分组的开始位置），如： /* GLOBAL NAVIGATION */ …rules for global nav … /* MAIN CONTENT */ …rules for main content …4、理解继承 继承（inheritance）是CSS里一个很重要的概念。在文档树中，当为某个元素应用CSS属性时，这些属性不仅会影响该元素，还会影响其下的分支元素（下层的元素继承了其祖先元素的属性）。 !DOCTYPE html html lang=en head meta charset=utf-8 / titleBlue Flax (Linum lewisii)/title link rel=stylesheet href=css/inheritance.css / /head body div h1The Ephemeral Blue Flax/h1