CSS基础语法教程.ppt

WEB开发基础,CSS语法,CSS基础,CSS是Cascading Style Sheets（层叠样式表）的缩写。 CSS是W3C定义和维护的标准，一种用来为结构化文档（如HTML文档或XML应用）添加样式的可编程规范。 目前最新版本是CSS 2.1？,CSS与HTML,可以用CSS做什么？ CSS是一种样式表语言，用于为HTML文档定义布局。例如，CSS涉及字体、颜色、边距、高度、宽度、背景图像、高级定位等方面。 CSS跟HTML的区别在哪里？ HTML用于结构化内容；CSS用于格式化结构化的内容。,采用CSS有哪些好处？,内容与表现分离。 可以使网页的表现统一，并且容易修改。 CSS可以为不同设备定制不同的规则，比如手机、PDA、打印机等。 使用CSS可以减少网页的代码量。,CSS参考网站,/Style/CSS/ W3C的CSS发展记录，以及CSS的规范标准。 该网站在广泛采用css样式化网页方面提出了建议，网站中有许多CSS示例。,一、CSS语法,CSS的定义由两部分组成： 选择符（selector） 声明（declaration）。 其结构如下所示。 选择符 声明; ,1. 选择符,选择符决定样式作用于网页上的哪些元素。一个CSS选择符就定义了一个样式。示例如下： p font-size:12px; .txtStyle1 color:blue; #txtStyle2 color:red; ,常见的三种通用命名规则,（1）骆驼式命名法： 混合使用大小写字母来构成变量和函数的名字。例如printEmployeePaychecks()，函数名中的每一个逻辑断点都有一个大写字母来标记。骆驼式命名法在许多新的函数库和Microsoft Windows这样的环境中使用得相当多。 （2）匈牙利命名法： 广泛应用于象Microsoft Windows这样的环境中。匈牙利命名法通过在变量名前面加上相应的小写字母的符号标识作为前缀，标识出变量的作用域，类型等。例如：m_lpszStr, 表示指向一个以0字符结尾的字符串的长指针成员变量。 匈牙利命名法关键是：标识符的名字以一个或者多个小写字母开头作为前缀；前缀之后的是首字母大写的一个单词或多个单词组合，该单词要指明变量的用途。 （3）帕斯卡（pascal）命名法： 与骆驼命名法类似。只不过骆驼命名法是首字母小写，而帕斯卡命名法是首字母大写，如DisplayInfo(); string UserName; 二者都是采用了帕斯卡命名法。在C#中，以帕斯卡命名法和骆驼命名法居多。,2. 声明,CSS声明是由属性和属性值组成的。其结构如下： 属性:属性值; 示例： font-size:12px; 属性font-size代表字体大小. 属性值12px代表字体大小的值.,3. CSS排版方式,方式一： h1 color: white; font-size: 12px; 方式二： h1 color: white; font-size: 12px; 如果在一行内放置了多个声明，一定要在分号之后保留一个空格来将属性声明相互分开。,4. CSS注释,注释有利于你或别人以后编辑和更改代码时理解代码的含义。 在浏览器中，注释是不显示的。 CSS注释以“/*“ 开头，以“*/“ 结尾。示例如下: /* 定义段落样式 */ p text-align: center; /* 文本居中排列 */ color: black; /* 文字为黑色 */ font-family: arial /* 字体为arial */ ,5. 选择符与声明的组合,（1）选择符名字相同，声明可以组合。例如: 选择符名字 声明1; 选择符名字 声明2; 可以组合为: 选择符名字 声明1; 声明2; ,5. 选择符与声明的组合,（2）声明相同，选择符的名字也可以组合。 选择符名字1 声明1; 声明2; 选择符名字2 声明1; 声明2; 选择符名字3 声明1; 声明2; 可以组合为: 选择符名字1,选择符名字2,选择符名字3 声明1; 声明2; ,6. 选择符的类型（重点）,选择符确定文档中哪些元素接受样式规则的控制。 在这样一个样式中，p color: red; font-size: 12px; p选择符将影响所有的p元素。如果我们希望针对某一段落设置一种不同于其他段落的样式规则时，可以使用另外两种选择符：ID选择符或类（class）选择符。这两种选择符允许为特定语境中的元素编写样式规则。,6. 选择符的类型（重点）,（1）元素选择符 body background-color: #efefef; p font-size: 12px; h1 color: red; font-size: 12px; div align: center body，p，h1，div都是HTML标记元素。以标记元素名称命名的选择符称为元素选择符。,6. 选择符的类型（重点）,（2）ID选择符： ID选择符前需加符号(#)。例如： #footer font-size: x-small; 每个xhtml网页上只能使用一个ID，通常用于标识作为结构单元而样式化的内容。结构单元包括头部、页脚、内容块或菜单。 （3）类（class）选择符： 在每个网页上可以多次使用类选择符。类选择符前面有符号(.)标记。例如： .term background-color: silver; 在对类和ID进行命名时，最好使用功能性或有语义的名称。ID与类的命名原则与HTML标记不需要有关系，而应该简单而又能反映出这段内容的结构目的。,二、如何应用CSS,为HTML文档应用CSS，有三种方法可供选择： 嵌入式样式 内联样式 外部样式,二、如何应用CSS,1. 内联样式（inline style） 内联样式是把样式嵌入在行中的样式。在HTML中内联样式是被样式化元素的属性。 这是一个段落 内联样式仅仅作用于所对应的元素。 问题： 这是一个段落 这是一个段落 这两种方式的实现效果是否相同？ 这两种方式有何不同？,二、如何应用CSS,2. 内部样式 内部样式（也称嵌入式样式）是指把样式放入HTML文档的头部。 内部样式仅仅作用于其所在的文档。 在老式浏览器中，内部样式被包括在HTML注释标记中。如下所示。 网页标题 ,二、如何应用CSS, 网页标题 在XHTML中，style元素被声明为具有#PCDATA内容。包围在CDATA被标记部分中的样式元素的内容确定和实体应被当做实体的参考。,二、如何应用CSS,3. 外部样式 外部样式表是用记事本或类似的文本编辑器创建的文本文档，并用扩展名.css保存的文件。 将外部样式表与HTML页面链接，需要向HTML文档的头部增加一个link元素。如下所示： 网页标题 rel是指链