CSS入门学习
CSS的简介
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
基本语法结构
选择器 { 声明1; 声明2; }
详细样例：
h1 { font-size:12px; color:#F00; }
CSS的最后一条声明后的“;”可写可不写，但是，基于W3C标准规范考虑，建议最后一条声明的结束“;” 都要写上。
基本用法
给元素添加样式
行内样式
通过直接在元素上写个style属性
<h1 style="color:red ">改变标题颜色</h1>
这个语句的效果就是调整标题的颜色
运行效果：
内部样式
通过选择器，选择当前的文档中的元素，统一添加样式
<style type="text/css"> 选择器{ 样式的属性名：属性值; } h1{ color:red; } </style> <h1>内容</h1>
完整样例代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> h1{ color: red; } </style> <title></title> </head> <body> <h1>内容</h1> </body> </html>
效果截图：
这样我们就通过内部样式的方式来修饰了h1。
外部样式
单独将style标签中的内容统一定义在一个 css文件中，css文件中，不需要写style标记，直接写样式即可。
定义样式css文件
CSS代码保存在扩展名为.css的样式表中. HTML文件引用扩展名为.css的样式表
h1{ color:red; }
在html中引入css文档
<head> …… <link href="css文件的位置" rel="stylesheet" type="text/css" /> …… </head>
<h1>需要样式的标记</h1>
样例：
↓这个是css文件
↓这个是html代码
05.html文件通过 <link href="css/h1red.css" rel="stylesheet" type="text/css" />这句代码调用同级文件夹css中的 h1red.css 的css文件，来对 h1 标题进行颜色修改
完整代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link href="css/h1red.css" rel="stylesheet" type="text/css" /> </head> <body> <h1>需要样式的标记</h1> </body> </html>
效果截图：
选择器
标签选择
<h1>一级标题</h1> h1{ color: cornflowerblue; }
完整代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> h1{ color: blue; } </style> </head> <body> <h1>一级标题</h1> <h1>一级标题</h1> <h2>二级标题</h2> <h2>二级标题</h2> <h2>二级标题</h2> </body> </html>
效果截图：
从上面的效果截图我们可以所有的一级标题都变成了蓝色，因为我们对所有的h1标签都进行了设置颜色，这就是标签选择。
类选择
<h1 class="colorblue">一级标题</h1> <h2 class="colorblue">二级标题</h2>
.colorblue{ color: cornflowerblue; }
完整代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .colorblue{ color: cornflowerblue; } </style> </head> <body> <h1 class="colorblue">一级标题</h1> <h2 class="colorblue">二级标题</h2> <h2 class="colorred">二级标题</h2> <h2 class="colorred">二级标题</h2> <h3 class="colorblue">三级标题</h3> </body> </html>
效果截图：
从上图我们可以发现所有的 class=“colorblue” 的标题都是蓝色，不论是几级标题，而其他的非colorblue类都没有变颜色，这就是对类进行选择。
id选择
<h2 id="idh2">二级标题</h2> #idh2{ color: red; }
完整代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> #aa{ color: red; } </style> </head> <body> <h1 id="idh1">一级标题</h1> <h2 id="aa">二级标题</h2> <h3 id="aa">三级标题</h3> <h2 id="idh2">二级标题</h2> </body> </html>
运行效果截图：
通过上面的截图，我们不难发现只有只有 id=“aa” 的标题变了颜色，与是几级标题无关，只看是不是 id=“aa” ，这就是id选择
