【Web开发】CSS

来源：互联网发布：兴财软件编辑：程序博客网时间：2024/05/22 01:53

CSS主要用于为HTML文档定义布局。例如，CSS涉及文体、颜色、边距、高度、宽度、背景图像、高级定位等方面。

CSS与HTML的区别：

HTML用于结构化内容，CSS用于装饰HTML

CSS的好处是：

1、通过单个样式表控制多个文档的布局

2、更精确的布局控制

3、为不同的媒体类型（屏幕、打印等）采取不同的布局

4、可以灵活的更换网页风格

一、CSS语法

选择器、属性和值

selector {property:value}

selector通常是HTML元素或标签，属性(property)是希望改变的属性，value是属性的值

二、CSS三种方法应用

方法1：行内样式表

<p>这个页面是红色的</p>

</body>

方法2：内部样式表

body{background-color:#FF0000;}

</style>

<body>

<p>这个页面是红色的</p>

</body>

方法3：外部样式表（常用）

外部样式表就是一个扩展名为css的文本文件，例如style.css，通常被存放于名为style的目录中

style.css文件内容如下：

body {

background-color:#FF0000;

}

在一个HTML文档要引用CSS文件(style.css)

<body>

<p>这个页面是红色的</p>

</body>

三、颜色与背景

主要属性：

color, 用于指定元素前景色，如 h1 { color: #ff00000;}, h1 { color: rgb(255,0,0)}

background-color, 用于指定元素背景色，如 h1 { color: #990000; background-color: #00ff00;}

background-image, 用于设置背景图像，如 body { background-image: url("butterfly.gif"); }

background-repeat, 用于控制平铺的

background-repeat: repeat-x 图像横向平铺

background-repeat: repeat-y 图像纵向平铺

background-repeat: repeat 图像横向和纵向都平铺（默认）

background-repeat: nopeat 图像不平铺

例如，为了避免平铺背景图像，代码应如下：

body{

background-color: #FFCC66;

background-image: url("butterfly.gif")

background-repeat: no-repeat;

}

background是上述所有与背景有关的属性的缩写用法，比如

background-color: #FFCC66;

background-image: url("butterfly.gif");

background-repeat: no-repeat;

background-attachment: fixed;

background-position: right bottom;

如果使用background属性的话，实现同样的效果只需要一行即可。

background: #FFCC66 url("butterfly.gif") no-repeat fixed right bottom;

各个值应按下列次序来写

[background-color] | [background-image] | [background-repeat] | [background-attachment] | [background-position]

如果省略某个属性不写出来，那么将自动为它取缺省值。

四、字体

主要属性

font-family, 设置一组按优先级排序的字体列表,如果该列表中的第一个字体未在访问者计算机上安装，那么就尝试列表中的下一个字体，依此类推，直到列表中的某个字体是已安装的。

h1 {font-family: arial, verdana, sans-serif;}

h2 {font-family: "Times New roman", serif;}

font-style, 表示字体样式，有如下几个选项

normal(正常)、italic(斜体)、oblique(倾斜)

h2 {font-family:"Times New roman", serif; font-style: italic;}

font-size, 表示字体大小，可通过多个不同单位(px,pt,百分比以及em)来设置，

h3 {font-size: 120%;}

p {font-size: 12em;}

上面4种单位有本质区别。'px'和'pt'将字体设置为固定大小，而'%'和'em'允许页面浏览者自行调整字体显示尺寸

font是上述有关字体的CSS属性的缩写，比如下面四行应用于p元素的代码

p {

font-style: italic;

font-weight: bold;

font-size: 30px;

font-family: arial, sans-serif;

}

如果使用font属性的话，上述四行代码可简化为

p {

font: italic bold 30px arial, sans-serif;

}

font属性的值应按以下次序书写

font-style | font-variant | font-weight | font-size | font-family

五、文本

主要属性

text-align, 文本对齐，包含了 left(左对齐)、right(右对齐)、center(居中)和justify(两端对齐)

td {

text-align: center;

}

p {

text-align: justify;

}

text-decoration, 文本装饰，包括下划线、删除线、上划线等

h1 {

text-decoration: underline;

}

h2 {

text-decoration: overline;

}

h3 {

text-decoration: line-through

}

letter-spacing, 字体间距，可以使用像素进行表示属性值

h1 {

letter-spacing: 6px;

}

p {

letter-spacing: 3px;

}

text-transform, 用于控制文本的大小写，包括首字母大写(capitalize)、全部大写(uppercase)、全部小写(lowercase)或none

h1 {

text-transform: uppercase;

}

li {

text-transform: capitalize;

}

六、链接

前面的属性都可以应用到链接上（如修改颜色、字体和添加下划线等），但CSS允许根据链接是未访问的，已访问的、活动的、是否有鼠标悬停等分别定义不同的属性，这需要通过伪类(pseudo-class)来控制这些效果。

a {

color: blue;

}

a:link {

color: blue;

}

a: visited {

color: red;

}

未访问过的链接和已访问过的链接分别使用a:link和a:visited。活动的链接对应a:active，而有鼠标悬停的链接对应的伪类是a:hover，例如需要当鼠标光标移动到链接上时将链接显示为橙色斜体

a:hover {

color: orange;

font-style: italic;

}

如果还需要特殊效果，还可以修改字体间距letter-spacing或字体增粗等。

有些时候不需要链接的下划线，那么可以将text-decoration属性设置为none就行了

a:link {

color:blue;

text-decoration:none;

}

七、边框

设置对象的边框样式

border-width, 长度值（不可为负值）

border-style, 边框样式

none: 无边框，默认值

solid: 实线边框

double: 双线边框

border-color, 指定颜色

border,可以用于简写，顺序是 border-width | border-style | border-color

border-collapse 有两个取值

border-collapse: separate为边框独立（默认）

border-collapse: collapse为相邻边被合并

table {

border: 1px solid black;

border-collapse: collapse;

}

td {

border: 1px solid black;

border-collapse: collapse;

}

八、ID选择器

id选择器可以为标有特定id的HTML元素指定的样式，以"#"来定义

下面两个id选择器，第一个可以定义元素的颜色为红色，第二个定义元素的颜色为绿色

#red {color: red;}

#green {color: green;}

<p id="red">这个段落是红色的。</p>

<p id="green">这个段落是绿色的。</p>

ID选择器只能在每个HTML文档中出现一次。

九、类选择器

类选择器以一个点号显示：

.center {text-align: center}

上述例子作用于所有拥有center类的HTML（文本居中效果）

This heading will be center-aligned

</h1>

This paragraph will also be center-aligned.

</p>

类名的一个字符不能使用数字，可能会在除IE外的浏览器中不起作用。

ID选择器和类选择器的区别

由于ID只能用来定义单一元素，因此如果需要程序、JS控制的东西，需要用id定义；重复使用的元素、类别，用class定义。

十、CSS总结

CSS涉及的内容繁多，最好对照参考文档来进行使用。

CSS3.0 CHM中文版：http://pan.baidu.com/s/1tgwj0

0 0