Web前端设计基础教程：CSS基础PPT教学课件.pptx

模块二CSS基础通过HTML基础知识的学习,我们掌握了如何运用各种标签和属性创建网页并设置显示样式。但是我们可以发现这样开发出来的页面有很多不足,内容和样式混合在一起,显得混乱,不利于修改和后期维护。而层叠样式表可以解决这些问题。同时在本模块中,还将学习如何使用CSS来实现元素的定位和页面布局。

2.1CSS概述2.1.1CSS简介CSS是一种用于控制网页样式的标记性语言。所谓层叠是指对同一对象引入多个样式时,依据层次顺序叠加处理。CSS是用来控制网页外观的一门技术,解决了网页界面排版的问题,对网页的页面布局、背景、颜色等效果实现更加精确的控制,实现内容和样式的分离,有利于团队开发。万维网联盟(W3C)负责CSS标准的制定和推动。CSS经历了CSS1、CSS2、CSS2.1和CSS3等多个版本,目前使用的版本是CSS3,已经得到大多数浏览器的支持。

2.1CSS概述2.1.2CSS的基本使用内部样式表是将所有的样式代码放置于页面头部,在head元素内部的style标签中存放样式表。【例2-1-1】将页面中一级标题文字的颜色修改为绿色,字体为黑体。示例代码如下:1.使用内部CSS样式表

2.1CSS概述2.1.2CSS的基本使用内联样式表在HTML标签style属性中书写,所有HTML标签都支持,并且优先级最高。修改【例2-1-1】的代码,如下所示:2.使用内联样式表

2.1CSS概述2.1.2CSS的基本使用如果将CSS样式表声明的代码单独放在一个扩展名为“css”的文本文件中,可通过在head标签中添加link标签来引入该样式表文件。在网站根目录下的css文件夹中新建一个名为indexcss的文件,将HTML页面中对应的代码复制过来,如图所示:3.引入外部样式表

2.1CSS概述2.1.2CSS的基本使用然后使用link元素将上述文件引入HTML页面中,href属性的值对应外部样式表的路径即可,代码如图:3.引入外部样式表

2.1CSS概述2.1.2CSS的基本使用4cSS三种引入方式选择(1)内联样式:特殊情况下使用,尽量不要使用。（2)内部样式:代码较少时使用。(3)外部样式:代码较多时使用。

2.1CSS概述2.1.2CSS的基本使用5.基本语法CSS的基本语法格式如下:CSS的基本语法格式示例如图2-1-1所示。图2-1-1CSS的基本语法格式示例

2.1CSS概述2.1.2CSS的基本使用5.基本语法CSS代码规范如下:(1)代码不区分大小写,不要使用大写字母。(2){}表示范围。(4)代码可以写在一行,也可以换行表示。(3)“;”表示一句结束。

2.1CSS概述2.1.2CSS的基本使用6cSS注释在编写代码时添加必要的注释,可以使代码更清晰,更容易理解,方便团队的分工协作。和其他语言一样,CSS允许用户在代码中嵌入注释,注释的内会被浏览器忽略,不会影响页面的运行效果。CSS注释以“/*”开始,以“*/”结束。示例如下:

2.1CSS概述2.1.2CSS的基本使用7cSS命名规范(1)命名不区分大小写,一律小写。(2)使用有意义的命名,尽量用英文。(3)使用多个单词命名时,使用“-”连接,如p-peom。

2.1CSS概述2.1.3CSS选择器1.标签选择器HTML页面中有不同的标签,标签选择器用来声明哪些标签采用何种CSS样式。标签选择器是最常见也是最基本的CSS选择器。基本语法如下:在该语法中,所有的HTML标记名都可以作为标签选择器,如body、h1、p、div等。前面提到的h1选择器就是用来声明页面中所有的h1标记的样式风格的。例如:

2.1CSS概述2.1.3CSS选择器2.ID选择器ID选择器使用“#”作为标识,后面紧跟id名,基本语法如下:在HTML代码中,尽量一个id只赋予一个HTML标签,防止同一个页面中有多个相同id的标签元素。ID选择器与元素是一对一的关系。

2.1CSS概述2.1.3CSS选择器2.ID选择器【例2-1-2】在网页中,为id属性为p2的HTML标签设定CSS样式规则(文字颜色为红色,字体大小为18px),示例代码码如下:页面效果如图2-1-2所示。图2-1-2ID选择器示例

2.1CSS概述2.1.3CSS选择器3.类选择器类选择器使用英文点号“.”进行标识,后面紧跟类名,基本语法如下:类选择器与ID选择器的最大区别:在同一个页面中,可以针对多个元素设置相同的类(class)属性。如果说id属性好