轻松学习网页设计

css简介

一、概念：

css是cascading style sheets（层叠样式表）的简称。

更多的人把它称作样式表。顾名思义，它是一种设计网页样式的工具。借助css的强大功能，网页将在你丰富的现象力下千变万化。实际上css的代码都是由一些最基本的语句构成的。

css可以作为html、xhtml、xml的样式控制语言。

二、css语法结构

选择符{属性：值}例如：body{font-size：12px;}

参数说明：

1、选择符（selecto）：指明这组样式所要针对的对象。可以是一个xhtml标签，如body，h1；也可以是定义了特定的id或class的标签，如#main选择符表示选择<div id="main">，即一个被制定了main为id的对象。

2、属性（proprety）：选择符的样式属性，如颜色、大小、定位、浮动方式等。

3、值（value）：是指属性的值。

4、同时可以为一个选择符定义多个属性，每个属性之间用分号“;”分割。

css长度单位

相对长度单位      说明

em                  相对于当前对象内文本的字体尺寸 相当于倍数

px                   像素（pixel）推荐使用

绝对长度单位      说明——基本上用不到

in                    英寸

cm                  厘米

mm                  毫米

pt                    点（point）

颜色单位          说明

十六进制          如：color.#ff0000 

颜色名称          如：color.red

三原色单位       如：rgb(255,0,0)

一般最常用的是十六进制，三原色单位的原理【红（r），绿（g），蓝（b）】混合而成。每个值域在0-255之间。

css控制字体

功能           语法

设置字号      font-size:12px

设置字色      color:#00000

设置字体      font-family:"黑体"（中文网页中最常用宋体，英文是Arial）

设置行高      line-height:150% line-height:1.5em 

小技巧：如果是12px、14px 行高设置在1.5-1.8之间为佳 字号越大，行高越小

设置字体粗细 font-weight:normail（正常） bold（粗体）

css选择符类型

1、类型选择符

就是html文档中的元素（作用于html标记）

如p{属性:值}

2、类选择符：可以自己定义样式，应用于一个或多个网页元素，类在网页中可以出现多次，用于定义重复的样式。类以英文"."开头，后面的名字自己定义，类定义后还需要在网页中加入class=类名称，加以调用。

如：.warning{属性：值}

<p class="warning">...</p>

3、ID选择符：与类基本相似，只是一英文"#"开头，因为ID具有唯一性，所以在网页中只能出现一次，用于定义只出现一次的样式。

如：#main{属性：值}

<p id="warning">...</p>