css样式选择器学习笔记

选择器
ID选择器 #id
类选择器 .class
标签选择器 span
通用选择器 #{}
伪类选择符 a:link a:visited
a:hover a:active
分组选择符 h1，span
注意！
1.ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。
2.可以使用类选择器词列表方法为一个元素同时设置多个样式。
3.子选择器（child selector）仅是指它的直接后代，或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择
4.继承
某些样式可继承color
不可继承border:1px solid red
5.权值
CSS权值标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。例如下面的代码：
p{color:red;} /权值为1/
p span{color:green;} /权值为1+1=2/
.warning{color:white;} /权值为10/
p span.warning{color:purple;} /权值为1+1+10=12/

p{color:red!important;} 最高权值 注意：!important要写在分号的前面
6.层叠
层叠就是在html文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用。
内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）
7.body{font-family:"Microsoft Yahei";} 英文，M和Y一定要大写才能显示出来
因为这种字体即美观又可以在客户端安全的显示出来（用户本地一般都是默认安装的）
8.字体
font-family:设置字体；
font-size:字体大小；
{font-style:italic;}斜体
{text-decoration:underline;}设置字体样式_下划线
{text-decoration:line-through;}_删除线
p{text-indent:2em;}首行缩进2em
p{line-height:2em;}行高 2em
{letter-spacing:10px}文字间隔 或字母间隔
word-spacing单词间距设置
{text-align:center;}文本、图片设置居中样式

font-weight:bold：设置为粗体样式；
font-weight:normal 默认值
bold 定义粗体字符
bolder 定义更粗的字符
lighter 定义更细的字符
100-0=900 定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold

元素分类
常用的块状元素有：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
块级元素特点：
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度

常用的内联元素有：
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
内联元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。
小伙伴们你们观查一下右侧代码段，有没有发现一个问题，内联元素之间有一个间距问题，这个问题在本小节的 wiki 中有介绍，感兴趣的小伙伴可以去查看。

常用的内联块状元素有：
<img>、<input>
内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。(css2.1新增)，<img>、<input>标签就是这种内联块状标签。

inline-block 元素特点：

1、和其他元素都在一行上；

2、元素的高度、宽度、行高以及顶和底边距都可设置。

将内联元素a转换为块状元素，从而使a元素具有块状元素特点。a{display:block;}
将块状元素div转换为内联元素，从而使 div 元素具有内联元素特点。
div{display:inline;}