css的简单应用

1.基础语法

css规则由两个主要的部分构成：选择器，以及一条或多条声明。

selector{declaration1;declaration2;declaration3;}

selector 选择器

declaration  声明

 属性（property）是你希望设置的样式属性（style attribute）每个属性有一个值。属性和值被冒号分开。

h1{color:red;font-size:14px}

h1是选择器，color:red 是一个声明，font-size:14px 是另一个声明。

（1）我们也可以使用十六进制的颜色值来表示颜色属性的值。

（2）如果属性的值为若干的单词，要给值加引号。

（3）如果不止一个声明时，每个声明要用分号分开。最好每个声明末尾都加上分号。

（4）最好每行只描述一个属性，这样可以加强可读性。

2.类选择器

在css中，类选择器以一个点号显示：

.center {text-align: center}

 这是一个居中的类。在HTML中引用如下：

<h1 class="center">
This heading will be center-aligned
</h1>

<p class="center">
This paragraph will also be center-aligned.
</p>

This heading will be center-aligned和This paragraph will also be center-aligned.这两句话在页面中都会居中。

 3.基本应用

（1）背景

p {background-color: 颜色;}    背景颜色  

p {background-color: 颜色; padding: 20px;}     修饰背景颜色，增加内边距

body {background-image: url(/i/eg_bg_04.gif);}    背景图片的设置

 （2）文本

p {text-indent: 5em;}     段落缩进

 （3）字体

body {font-family: sans-serif;}      设置一种字体，sans-serif是一种字体。可以查询css字体系列。

（4）链接

a:link {color:#FF0000;}          未被访问的链接 
a:visited {color:#00FF00;}     已被访问的链接
a:hover {color:#FF00FF;}      鼠标指针移动到链接上
a:active {color:#0000FF;}      正在被点击的链接 

  （5）列表

ul {list-style-type : type}    在一个无序列表中，列表项的标志是各列表旁的圆点。你可以用type类型把标志设置成你想要的格式。

 

uo {list-style-type : type}     有序列表，标志可能是数字或字母，然后用type把标志设置成自己想要的格式。