HTML+CSS基础学习-了解css(1)
CSS指层叠样式表(Cascading Style Sheets)，定义如何显示html元素，如文字大小、颜色、字体加粗等。样式表允许以多种方式规定样式信息，可以在单个html元素中，也可以在html页的头部，或者以外部文件的形式引入。
语法
主要两个部分构成：选择器和声明。
selector {declaration1; declaration2; ... declarationN }
选择器通常是需要改变样式的HTML元素。声明由属性和值组成，属性就是你需要改变的样式属性。多个声明由分号（;）,一般最后一条声明后也会加上分号。
示意图 来源w3school
注释
css中注释很简单，不用多说。/*注释语句*/
css样式设置方式
- 内联式
- 嵌入式
- 外部式
内联式
直接写在html标签style属性中。
<p style="color:red">这里文字是红色。</p>
嵌入式
css样式代码写在页面的<style type="text/css"></style>标签之间。一般嵌入式css写在<head></head>之间。
<style type="text/css">
span{
color:red;
}
</style>
外部式
css样式写在一个单独的文件中，扩展名.css，一般在head标签内使用link标签将文件链接到html文件内。
<link href="base.css" rel="stylesheet" type="text/css" />
优先级
一般来说：内联式 > 嵌入式 > 外部式。 就近原则（离被设置元素越近优先级别越高）
css选择器
- 标签选择器
p{font-size:12px;} - 类选择器
/* .类选器名称{css样式代码;} */ .main{font-size:14px;} - ID选择器
/* #类选器名称{css样式代码;} */ #main{font-size:14px;} - 子选择器
>用于选择指定标签元素的第一代子元素.food>li{border:1px solid red;} - 后代选择器 用于选择指定标签元素下的后辈元素
.first span{color:red;} - 通用选择器
*匹配html中所有标签元素* {color:red;} - 伪类选择符 常用的也就这一个
a:hover{color:red;} - 分组选择符
,h1,span{color:red;} /* 等价于 */ h1{color:red;} span{color:red;}
类和ID选择器的区别
类选择器和ID选择器都可以应用于任何元素，但是他们有一些不同的地方。ID选择器只能使用一次，一个元素只能设置一个ID属性，而类选择器则可以使用多次，多个不同的元素使用，而且一个元素也可以同时设多个样式，在class属性中以空格分割设置多个类选择器名。
继承
继承是css的一种规则，它允许样式不仅应用于某个特定的html标签元素，而且应用于其后代。根据CSS，子元素可以从父元素继承属性。
权值
当为同一个元素设置了多个不同的css样式代码时，最终启用哪一个css样式，就取决于权值，使用权值最高的。据了解标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100，继承也有权值但特别低，可以理解是最低的。
层叠
多重样式将层叠为一个
样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。
层叠就是在html文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用。(就近原则)
!important
!important要写在分号的前面，设置某些样式具有最高权值。
