文章目录
CSS学习
什么是CSS？（what）
样式解决了一个很大的问题
css是如何工作的，仔细体会CSS的用法及智慧
CSS语法
CSS注释
CSS Id和Class选择器
标记选择器
id 选择器
class 选择器
全局选择器
继承选择器
伪类
CSS创建
CSS的学习我选择的是菜鸟教程
在线编辑工具
CSS学习
什么是CSS？（what）
CSS指的是层叠样式表
样式表定义如何显示HTML元素
样式通常存储在样式表中
添加样式到HTML，使得样式与内容分离，易于维护
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一个
样式解决了一个很大的问题
样式表定义如何显示 HTML 元素，就像 HTML 中的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。我们只需要编辑一个简单的 CSS 文档就可以改变所有页面的布局和外观。
css是如何工作的，仔细体会CSS的用法及智慧
CSS如何工作
CSS语法
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明
选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开
CSS声明总是以分号(;)结束，声明总以大括号({})括起来:
为了让CSS可读性更强，你可以每行只描述一个属性:
h1{ color:blue; font-size:12px; }
CSS注释
注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它。
CSS注释以 /* 开始, 以 */ 结束
p{ text-align:center; /*这是一个注释*/ color:rgb(252, 0, 0); font-family:arial; }
CSS Id和Class选择器
如果你要在HTML元素中设置CSS样式，你需要在元素中设置"id" 和 "class"属性。
标记选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> p{ font-size: 2em; color: #000000; } </style> </head> <body> <p>我是一个段落</p> </body> </html>
通过标记来简单更改样式，有局限，所以就有了class 和 id 选择器
id 选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。
以下的样式规则应用于元素属性 id=“xigua”:
#xigua { text-align:center; color:red; }
ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。
class 选择器
class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：
在以下的例子中，所有拥有 center 类的 HTML 元素均为居中。
.center {text-align:center;}
你也可以指定特定的HTML元素使用class。在以下实例中, 所有的 p 元素使用 class=“center” 让该元素的文本居中:
p.center {text-align:center;}
类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。
全局选择器
如若想要HTML中所有标记都使用同一种格式，就可以使用全局选择器。
语法格式：
*{margin:0; padding=0}
其中*表示对所有标记起作用，margin表示属性名称，0表示属性值
这个css表示设置所有标记的外边距和内边距都为0
<html> <head> <title>全局选择器</title> <style> *{ color: red; font-size: 20px; } </style> </head> <body> <h1>动漫</h1> <p>斗罗大陆</p> 你收看了吗 </body> </html>
组合选择器
将多种选择器进行搭配，可以构成一种复合选择器，也成为组合选择器，即将标记，类，ID选择器结合起来使用，标记+类，标记+ID。比如：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* 标记选择器 */ p{ color: red; } /* 标记加类组合选择器 */ p.zuhe{ color: blue; } /* 类选择器 */ .zuhe{ color: gold; } /*标记加ID组合选择器 */ h4#zuhe1{ color: rgb(18, 177, 39); } </style> </head> <body> <P>qu tong</P> <p class="zuhe">使用class组合选择（标记.类名）</p> <h3 class="zuhe">使用类选择</h3> <h4 id="zuhe1">使用ID组合（标记#ID）</h4> </body> </html>
继承选择器
默认儿子继承父亲，除非大儿子说不要继承说不要继承父亲，那么他不继承，后面的儿子都没吭气，那么他们默认都继承爸爸的样式。
我们要了解HTML文档树和CSS继承。
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> h1{ color:red; } h1 strong{color:blue} </style> </head> <body> <h1>zheng chang de</h1> <h1> CSS的<strong>继承</strong></h1> </body>
伪类
伪类也是选择器的一种，用伪类定义的CSS样式并不作用在标记上，而是作用在标记的状态上。
由于很多浏览器支持不同类型的伪类，没有统一起来，因此不常用。
超链接的伪类是主流浏览器都支持的，包括 ：link ：visited：hover三种状态。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> a:link{color: red;} /*没有访问的链接*/ a:visited{color: green;} /*已访问的链接*/ a:hover{color: blue;} /*鼠标移动到链接上*/ a:active{color: orange;} /*选定的链接(表示点击但没有放手)*/ </style> </head> <body> <a href="">连接到本页</a> <a href="http://www.baidu.com">百度</a> </body> </html>
属性选择器
直接通过标记属性来进行控制，而不通过标记名或自定义名，直接使用属性控制HTML标记样式的选择器称为“属性选择器”
属性选择器能够通过某个属性是否存在或属性值来寻找元素，因此能实现某些非常有趣的效果，CSS2标准有4个属性选择器，CSS3又新加了3个属性选择器，一共有7个属性选择器，共同构成了强大的标记属性过滤体系。
CSS创建
当读到一个样式表时，浏览器会根据它来格式化 HTML 文档。
如何插入样式表
插入样式表的方法有三种:
外部样式表(External style sheet)
内部样式表(Internal style sheet)
内- 联样式(Inline style)
外部样式表
当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 标签链接到样式表。 标签在（文档的）头部：
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。
不要在属性值与单位之间留有空格（如："margin-left: 10 px" ），正确的写法是 "margin-left: 10px" 。
内部样式表
当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用
<head> <style> hr {color:sienna;} p {margin-left:20px;} body {background-image:url("images/back40.gif");} </style> </head>
内联样式
由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。
要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距：
<p style="color:sienna;margin-left:20px">这是一个段落。</p>
导入样式
导入和链接样式基本相同，都需要创建一个单独的CSS文件，然后将其引入到HTML中。只不过语法不太一样
<head> <style type="text/css"> @import "1.2.css" </style> </head>
css 7 种选择器：
id 选择器
类选择器
伪类选择器
属性选择器
伪元素选择器
通配选择器
标签选择器
CSS 优先规则：
内联样式 > id 选择器 > 类选择器 = 伪类选择器 = 属性选择器 > 标签选择器 = 伪元素选择器
多重样式
如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来
例如，外部样式表拥有针对 h3 选择器的三个属性
h3 { color:red; text-align:left; font-size:8pt; }
而内部样式表拥有针对 h3 选择器的两个属性：
h3 { text-align:right; font-size:20pt; }
假如这个页面同时与外部样式表链接，那么 h3 得到的样式是：
color:red; text-align:right; font-size:20pt;
颜色属性将被继承于外部样式表，而文字排列（text-alignment）和字体尺寸（font-size）会被内部样式表中的规则取代。
多重样式优先级
一般情况下，优先级如下：
（内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式
注意：如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。
