网页开发笔记（二）：CSS入门

CSS及语法

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
通俗的说css就是用来修饰html的

语法

一般来说css由三部分组成：选择器，属性，值
书写语法为选择器{属性：值}
选择器：浏览器根据选择器来决定收css样式影响的html标签元素
属性：要修改的样式值，属性和值用冒号进行分开，并且用花括号进行包围
多个声明的书写：多个属性之间用分号分割，最后一个最好带上分号，一般每行只描述一个属性。

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

CSS与HTML结合方法

1.使用在属性值中添加sytle
例：添加绿色边框

<div style="border: 1px solid #80ff00">div标签1</div>

2.在head标签中增加style标签
作用：使所有的style标签中的属性都产生相同的效果，在一整个页面产生相同的效果，代码复用性高。
例：添加红色边框和蓝色边框

    <style type="text/css">
        div{
            border: 1px solid #ff0000;
        }
        span{
            border: 1px solid blue;
        }
    </style>

3.把CSS标签单独写成文件，在通过link标签引用即可
作用：可以使所有的页面都产生相同的效果，代码服用程度极高。
调用标签：

<link rel="stylesheet" type="text/css" href="调用的文件">

标签名选择器

标签名选择器就是在head中添加style标签
格式：

标签名{
	属性：属性值；
}

ID选择器

作用：可以通过ID属性选择性的使用样式
格式：

#id属性值{
	属性：属性值；
}

使用方法：要现在标签中标签的属性中加上id值，再在标签名选择其中进行修饰
例：
添加id值：

<div id="id001">div标签1</div>

在标签选择器中进行调用：

    <style type="text/css">
        #id001{
            color: blue;
            font-size: 20px;
            border: 2px yellow;
        }
    </style>

Class选择器

作用：可以通过class属性有效地选择使用这个样式
与ID选择器的区别：ID唯一，而Class不唯一；ID只能作用与单个标签，而Class可以选择性复用
格式：

.class属性值{
			属性：属性值;
}

组合选择器

作用：能让多个选择器共用同一套代码
格式：

选择器1,选择器2,...,选择器n{
		属性:值;
}

例子：

.class001,#id001{
            font-size: 35;
            color: blue;
            border: 1px solid red;
        }