CSS基础知识

注意

1.css 样式由选择符和声明组成，而声明又由属性和值组成，选择符{属性:值;}，便于补充声明，一般写上分号。
2.当网页制作者不设置css样式时，浏览器会按照自己的一套样式来显示网页。

CSS注释代码

/注释语句/，写在style标签内才有效。

外部式CSS样式

<link href="xxxxx.css" rel="stylesheet" type="text/css"/>

三种方法的优先级:内联式、嵌入式、外部式

其实就是就近原则，越是靠近被设置的元素的优先级越高。

选择器的种类及其用法

标签选择器

其实就是html代码中的标签，如html、body、h1、p、img等。(标签符号在markdown格式下显示有问题，无法显示)

类选择器

.类选器名称{css样式代码;}    
//例子
<span class="stress">胆小如鼠</span>
.stress{color:red;}   //写在<style></style>内

ID选择器

ID选择器都类似于类选择符，但也有一些重要的区别：
1.为标签设置id="ID名称"，而不是class="类名称"。
2.ID选择符的前面是井号（#）号，而不是英文圆点（.）。

类选择器和ID选择器的异同

相同点：都可以应用在不同的元素；
不同点：1.一个文档中，ID不能名字不能重复，而类选择器可以有很多个同名的。
2.可以使用类选择器词列表方法为一个元素同时设置多个样式，而ID选择器不可以。

//第二点的例子
.stress{
    color:red;
}
.bigsize{
    font-size:25px;
}
<p>到了<span class="stress bigsize">三年级</span>下学期时，我们班上了一节公开课...</p>

子类选择器

用">"表示，用于选择第一代子元素。

.food>li{border:1px solid red;}

包含（后代）选择器

用空格表示，用于选择所有子后代元素。

.food li{border:1px solid red;}

通用选择器

通用选择器是功能最强大的选择器，它使用一个（*）号指定，它的作用是匹配html中所有标签元素，如下使用下面代码使用html中任意标签元素字体颜色全部设置为红色：

* {color:red;}

伪类选择符

它允许给html不存在的标签（标签的某种状态），用得较多的是a:hover，用来给鼠标滑过的状态设置表现。

a:hover{color:red;}//设置颜色

分组选择符

当你想为html中多个标签元素设置同一个样式时，可以使用分组选择符（，），如下代码为右侧代码编辑器中的h1、span标签同时设置字体颜色为红色：

//设置字体颜色为红色：
h1,span{color:red;}
//它相当于下面两行代码：
h1{color:red;}
span{color:red;}

继承性、特殊性、层叠、重要性

继承性：CSS某些样式具有继承性，它不仅仅将某种特性应用于该标签，还应用在该标签的后代。

特殊性：浏览器是根据权值来判断使用哪种css样式的，权值高的就使用哪种css样式。标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100，继承的权值可以认为是0.1。一般来讲，当两种标签作用域是相同大小时才比较权值，否则按就近原则。

层叠：层叠就是在html文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用，也就是就近原则。

重要性：为某种样式设置最高权值，用!important

p{color:red!important;}

文字排版

字体:font-family:"字体"
字号、颜色:font-size:数字px;color:#数字
粗体:font-weight:bold
斜体:font-style:italic
下划线:text-decoration:underline
删除线:text-decoration:line-through
缩进:text-indent:数字em

段落排版

行高:line-height:数字em
中文字间距、字母间距:letter-spacing:数字px
单词间距:word-spacing:数字px
对齐:text-align:left/center/right