css语法

使用C S S样式美化和布局网页

1 CSS简介

•CSS 是Cascading Style Sheets 的缩写，称为层叠样式表。它允许网页设计者定义网页元素的样式，包括字体、颜色以及其他高级样式。

•采用CSS 技术，可以有效地对页面的布局、字体、颜色、背景和其他效果实现更加精确的控制。

•CSS 样式可以是一个单独的外部文件（.css 文件），该文件被链接到站点中的一个或多个网页页面中。

•CSS 样式也可以定义在HTML 文档内部，在头文件部分的 标记内定义。

例如：

•

•

•

•

•

•

•

CSS层叠样式表

•

2 CSS的使用

•一个样式表由样式规则组成，以告诉浏览器怎样呈现一个文档。

2.1 CSS基本语法

•CSS 语法结构由2 部分组成：选择器和声明。其中声明由样式属性和取值构成。

•语法：

选择符{ 样式属性: 取值;

样式属性: 取值；……}

•例如：

H1{color:blue;

font-family: 隶书;

}

•选择符：指这组样式编码所要针对的对象，可以是一个HTML标签，如body、h1；也可以是定义了特定的id或class的标签，如#main 表示选择指定了id属性值为main的标签。

•属性：是CSS样式控制的核心，CSS提供了丰富的样式属性，如颜色、大小、定位和浮动等。

•值：是指属性的值，形式有两种，一种是指定范围的值，如float 属性，只有left、right和none3种值；另一种为数值，如width能够取值于0~9999px，或通过其他数学单位来表示。

•CSS 的几种表示方法：

1.标签选择符

一个html的标签，如：p {color: blue}

当多个标签要用到同一个属性，则可以一起定义，如：b,i,p,h1{color:blue}

2.类选择符

名称以点号开始，如：.b {font-weight: bold}

应用时通过标签的class属性来指定，如：

女

也可在点号前冠上标签的名称，这样就只有该标签才可以使用这个样式，如：

p .i {text-decoration: underline}

html文档部分：

32

3.ID选择符

定义方式：#d{color:#223399}

使用时，通过标签的id属性指明，如：

张三

注意：如果同时设置了class和id属性，那么浏览器会优先选择id 属性指定的格式。

4.上下文选择符

规定一个标签的具体后继标签的显示格式，如：

p span{font-size:20px}

表示标签p里的每一个span元素都是使用20号字体显示

5.伪类选择符

指出文档中需要以独立的样式显示，但是却不能应用选择符进行独立设置的部分。

•特殊化首行，如：p:first-line{color:red}

•特殊化首字母，如：

p:first-letter{font-size:200%}

•超链接伪类选择符

a:link; a:visited; a:hover; a:active

6.style属性

直接将CSS样式表添加到HTML标识符里，如：紫色

2.2 添加CSS的方法

1. 内嵌样式表

即使用style 属性直接设置

2. 内联样式表

内联样式表与内嵌样式表的相似之处在于都将CSS 样式编写到页面中，而不同的是内部样式表统一放置在一个固定的位置，即

以@ 开头的联合样式表输入方法和链接样式表的方法很相似，但联合样式表输入方式更有优势。因为联合法可以在链接外部样式表的同时针对该网页的具体情况作出别的网页不需要的规则。

3 设置CSS属性

•CSS 样式共分为8 中类型，分别是类型、背景、区块、方框、边框、列表、定位和扩展。

3.1 CSS中的常见属性值

•1.关键字

关键字随属性而变化，也就是说不同的属性，属性值的关键字也是不同的，常见的属性值的关键字有none、italic、bold、red、solid等。

•2.长度

（1）绝对单位：英寸（in）、厘米（cm）、毫米（mm）、磅（pt）和十二点（pc）。

（2）相对单位：

em：表示当前字体中元素的宽度。

ex：表示当前字体中字母x的高度。