第九章 CSS基础语法教程.pptVIP

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）选择符。这两种选择符允许为特定语境中的元素