一、什么叫CSS
- 什么是CSS
- CSS（Cascading Style Sheet，层叠样式表）是由W3C（万维网联盟）的CSS工作组创建和维护的。它是一种不需要编译，可以直接由浏览器执行的标记性语言，用于控制Web页面的外观。通过使用CSS控制页面各元素的属性显示，可以将页面的内容与表现形式分离。
- CSS也被叫做级联样式表。
- CSS本身也是文本。
- CSS历史
- CSS1作为一项W3C推荐，CSS1发布于1996年12月17日。1999年1月11日，此推荐被重新修订。
- CSS2作为一项W3C推荐，CSS2发布于99年1月11日。CSS2添加了对媒介（打印机和听觉设备）和可下载字体的支持。
- CSS3计划将CSS划分为更小的模块。
- CSS的工作环境
- CSS的显示环境——浏览器。
- CSS的编辑环境
能够编辑CSS的软件很多，例如Sublime、Dreamweaver、webstorm等。
- CSS的优势
- 避免使用不必要的HTML元素。
- 缩短更新和维护时间。
- 做出HTML实现不了的特效。
二、DIV和SPAN标签介绍
- 认识两个新HTML标签<div> <span>
- div标签：是用来为HTML文档内大块（block-level）的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的，中文我们把它称作“层”。
- span标签：是被用来组合文档中的行内元素。span没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。
三、CSS样式规则
- CSS规则
- 选择符（selecter）：所谓选择符就是规则中用于选择文档中要应用样式的那些元素。该元素可以是（X）HTML的某个标签，也可以是页面中指定的class（类）或者id属性限定的标记。
- 声明：声明包含在一对大括号“{}”内，用于告诉浏览器如何渲染页面中与选择符相匹配的对象。声明内部由属性及属性值组成，并用冒号隔开，以分号结束，声明的形式可以是一个或者多个属性的组合。
- 属性（property）：属性是由官方CSS规则约定的，而不是自定义的，除个别浏览器私有属性以外。
- 属性值（value）：属性值放置在属性名和冒号后面，具体内容随属性的类别而呈现不同形式，一般包括数值、单位以及关键字。
- 例如：
p{ color: red; } .head{ color: green; } #span1{ color: gold; }
四、样式表的加载方式
- 样式表加载总结
- 一、内嵌样式表——直接在页面的标签里加。
- 代码：
<div style="color: red; width: 400px;">测试内嵌样式表</div>
- 二、内部样式表——在head部分加入。
- 代码：
<style> .inner{ color: green; width: 400px; } </style>
- 三、链入外部样式表——在head部分加入。
- 代码：
<link rel="stylesheet" href="css/demo01.css">
- 四、导入外部样式表——在head部分加入。
- 代码：
<style> @import url(css/demo02.css); </style>
结果：
- 注意
五、选择器
- 通配选择符
- 在编写代码时，用“*”表示通配符选择符，其作用是定义页面所有元素的样式。
- 代码：
*{ padding: 0px; margin: 0px; }
- 类选择符
- 类选择符通过直接引用元素中类属性的值二产生效果，这个应用前面总是有一个句点“.”，这个句点是用来标识一个类选择符，类名可以随意命名，但是最好根据元素的用途来定义一个有意义的名称。
- 代码：
.outer{ color: blue; width: 400px; } <div class="outer">测试类选择符</div>
- ID选择符
- ID选择符与类选择符及其相似，类选择符是以句点“.”开头，而ID选择符是以“#”开头。对于一个HTML文档来说，其中的每一个标签都可以使用id=“ ”的形式进行一个名称指派，但是需要注意，在一个HTML文件中id是具有唯一性，是不可以重复的。
- 代码：
#importer{ color: black; width: 400px; } <div id="importer">测试ID选择符</div>
- 包含选择符
- 如果用户想对某个对象中的子对象进行样式指派，包含选择符就能发挥作用了。包含选择符又称为后代选择符，因为该选择符是作用于某个元素的子元素的，而且不限于两层标签元素。
- 代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试</title> <style> div p span{ color: red; } </style> </head> <body> <div> <p> <span> 测试包含选择符 </span> </p> </div> </body> </html>
结果：
- 群组选择符
- 群组选择符使用符号对选择符进行了分隔，这样书写的优点在于同样的样式只需要书写一次，减少了代码量，有利于改善CSS的代码结构。
- 代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试</title> <style> div,#p1,.span1{ color: red; } </style> </head> <body> <div> 测试 </div> <p id="p1"> 测试 </p> <span class="span1"> 测试 </span> </body> </html>
结果：
六、伪类
- 伪类
- 伪类可以让用户在使用页面的过程中增加更多的交互效果，例如应用最为广泛锚点标签<a>的几种状态（未访问链接状态、已访问链接状态、鼠标指针悬停在链接上的状态以及被激活的链接状态），具体代码如下所示。
- 代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试</title> <style> a:link {color:#000000;} /* 未访问链接*/ a:visited {color:#00FF00;} /* 已访问链接 */ a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */ a:active {color:#0000FF;} /* 鼠标点击时 */ </style> </head> <body> <p><b><a href="#" target="_blank">这是一个链接</a></b></p> <p><b>注意：</b> a:hover 必须在 a:link 和 a:visited 之后，需要严格按顺序才能看到效果。</p> <p><b>注意：</b> a:active 必须在 a:hover 之后。</p> </body> </html>
结果：
七、CSS颜色
- CSS颜色
- background-color属性为元素设置背景色。这个属性接受任何合法的颜色值。
- CSS中，颜色值通常以以下方式定义：
- 十六进制 - 如：“ff0099”
- RGB - 如：“rgb(255,0,0)”
- 颜色名称 - 如：“red”
八、背景图像
- 背景图像
CSS属性定义背景效果
- background-color：背景颜色
- background-image：背景图片
- background-repeat：背景重复
- background-attachment：背景滚动
- background-position：背景定位
九、文本
- 文本
- color：文本颜色
- text-align：文本对齐
- text-decoration：文本修饰（下划线）
- text-indent：文本缩进
十、CSS列表
- CSS列表{list-style-type:XXXX ;}
属性值
