CSS技术介绍

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。作用：美化网页。

CSS2.0.chm

CSS语法规则

选择器{属性1：值1；属性2：值2}。如：

div{
    height: 0px;
    width: 0px;
}

CSS与HTML的结合方式

行内样式：通过标签的style属性来定义样式
<div style="border: 1px solid red;">div 标签 1</div>

内部样式：在head标签里用style标签来定义样式
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        div{border: 1px solid red;}
    </style>
</head> 

外部样式：通过link标签来引入外部样式
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/style.css"/>
        <style type="text/css">
            .div2{
                height: 50px;
                width: 50px;
                background: blue;
            }
        </style>
        <style type="text/css">
            @import url("css/style.css");
        </style>
    </head>
    <body>
        <div class="div1" style="background: red; height: 50px; width: 50px;">内联</div>
        <div class="div2" >内部</div>
        <div class="div3">外部</div>
    </body>
</html>
<!--css包下的style.css文件中-->
.div3{
    width: 50px;
    height: 50px;
    background: green;
}

CSS选择器

标签名选择器

语法  :  
标签名  {
    属性名 :  属性值;  
    ...
}
p{color:red;}

id选择器

在同一个页面，id是不能重复的，只能给唯一的一个标签使用。

语法  :      
#id属性名  {
    属性名   :   属性值;  
    ...
}
id="属性名"

class选择器（类选择器)

在标签上添加 class属性，然后在style里面写选择器 (. 开头)，更加精确的去控制样式。class名可以有多个。

语法 :       
.class属性名 {
	属性名:属性值;  
    ...
}
class="属性名"

组合选择器

组合选择器的格式是：
选择器 1，选择器 2，选择器 n{
    属性：值;
}

组合选择器可以让多个选择器共用同一个 css 样式代码。

常用样式

1、字体颜色 color:red;

颜色可以写颜色名如：black，blue，red，green 等。

颜色也可以写 rgb 值和十六进制表示值：如 rgb(255,0,0)，#00F6DE，如果写十六进制值必须加#。

2、宽度、高度width:19px; height:20px;

可以写像素值：19px；也可以写百分比值：20%；

3、背景颜色

background-color:#0F2D4C;

4、字体样式

color：#FF0000；字体颜色红色font-size：20px;字体大小

5、边框

红色1像素实线边框border：1px solid red;

6、div居中

margin-left: auto; margin-right: auto;

7、文本居中

text-align: center;

8、超链接去下划线

text-decoration: none;

9、表格细线

table {
    border: 1px solid black; /设置边框/
    border-collapse: collapse; /将边框合并/
}
td,th {border: 1px solid black; /设置边框/ }

10、列表去除修饰

ul { list-style: none; }

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>06-css 常用样式.html</title>
        <style type="text/css">
            div {
                color: red;
                border: 1px yellow solid;
                width: 300px;
                height: 300px;
                background-color: green;
                font-size: 30px;
                margin-left: auto;
                margin-right: auto;
                text-align: center;
            }

            table {
                border: 1px red solid;
                border-collapse: collapse;
            }

            td {
                border: 1px red solid;
            }

            a {
                text-decoration: none;
            }

            ul {
                list-style: none;
            }
        </style>
    </head>
    <body>
        <ul>
            <li>11111111111</li>
            <li>11111111111</li>
            <li>11111111111</li>
            <li>11111111111</li>
            <li>11111111111</li>
        </ul>
        <table>
            <tr>
                <td>1.1</td>
                <td>1.2</td>
            </tr>
        </table>
        <a href="http://www.baidu.com">百度</a>
        <div>我是 div 标签</div>
    </body>
</html>

目录CONTENT

CSS