css 语法格式

　　css中文意思“层叠样式表”，用于控制网页样式。

①.启用外部样式表：

<link rel=stylesheet href="css/left.css" type="text/css">

②.使用html内部样式表：

<style type="text/css">
     /* 页面初始化 */
     html, body, h1, h2, h3, p, ul, ol, li, a {
         padding:0;
         border:0;
         margin:0;
     }
</style>

③.内联样式表

<h style="margin-top:33px;" >内联样式表演示</h>

目录： 1.属性  2.选择器 3.伪类

1.属性

---

1.1.字体

　　斜体字

p{
  font-style:italic;
}

1.2.字体颜色

body {
  color:red;
}
h1 {
  color:#00ff00;
}

1.3.背景

span.highlight　{
  background-color:yellow;
}

1.4.间距

 　　字符间距

h1 {
  letter-spacing: -0.5em;
}
h4 {
  letter-spacing: 20px;
}

　　行间距

p {
  line-height: 200%;
}

p{
  line-height: 10px;
}

p {
  line-height: 0.5;
}

　　单词间距

p {
　　word-spacing: 10px;
}

1.5.布局

　　用来对齐文本，居中对齐。

h1 {
　　text-align: center;
}

　　段落首行缩进

p {
  text-indent:50px;
}

p {
  text-indent:2em;
}

1.6.边框样式

　　点边框

p {
border-style: dotted;
}

　　双线框

p {
border-style: double;
}

　　实心框

p {
border-style: solid;
}

　　为边框添加颜色

p {
border-style: solid;
border-color: #77eeff;
}

1.7.格式控制

　　强制字母大小写，所有大写、所有小写、驼峰模式：

p {
  text-transform: uppercase;
}

p {
  text-transform: lowercase;
}

p {
  text-transform: capitalize;
}

　　带删除线、下划线：

p {
  text-decoration: line-through;
}

p {
  text-decoration: underline;
}

1.8.列表

　　用图像做为列表框标记

ul {
list-style-p_w_picpath: url('monkey.gif');
}

更多列表内容

2.选择器

---

2.1.通用选择器

* {
padding:0;
border:0;
margin:0;
}

2.2.元素选择器

h1 {
color:blue;
}

2.3.类选择器

<p class="sayhello">
    Hello everyone.
</p>

.sayhello {
text-align: center;
}

2.4.id选择器

<p id="sayhello">Hello everyone.</p>

#sayhello {
color:green;
}

2.5.嵌套选择器

　　形如，a标签中的span中的div标签：（空格间隔）

a span div{
background-color: pink;
}

2.6.组合选择器

　　形如，a标签、span标签、div标签都应用相同的样式：

a,span,div{
background-color: pink;
}

3.伪类

---

3.1.超连接

　　为超连接添加颜色（默认、访问过、鼠标滑过、激活；下边四个有顺序）

a:link {
  color: #FF0001;
}
a:visited {
  color: #00FF02;
}
a:hover {
  color: #FF00F3;
}
a:active {
  color: #0000F4;
}

　　更炫的超连接效果（字体变色、字体变大、出现背景色、出现下划线）

a.one:link {color: #ff0000}
a.one:visited {color: #0000ff}
a.one:hover {color: #ffcc00}

a.two:link {color: #ff0000}
a.two:visited {color: #0000ff}
a.two:hover {font-size: 150%}

a.three:link {color: #ff0000}
a.three:visited {color: #0000ff}
a.three:hover {background: #66ff66}

a.five:link {color: #ff0000; text-decoration: none}
a.five:visited {color: #0000ff; text-decoration: none}
a.five:hover {text-decoration: underline}

3.2.与类、元素选择协同

<a class="hi" href="index.html">And</a>

a.hi : visited {color: #03AAEE}