CSS常用标签

1.字体，文本设置

font-size:20px //字体大小20px
font-weight:bold  //字体加粗
color:red          //字体设置为红色
font-family:"宋体";  //字体改为宋体
font-style:italic;          //字体改为斜体
text-decoration:underline;  //给文字增加下划线
text-decoration:line-through;//给文字增加删除线
text-indent:2em;          //给段落缩进两个字
line-height:1.5em;         //将文字行高设置为1.5个字
word-spacing:20px;    //文段每个字间隔20px
text-align:center;     //文本文字居中

2.内联式，嵌入式，外部式

<span style="color:pink">超酷的互联网</span>  //这种样式称为内联式
span{ color:red;}                            //嵌入式
<link href="style.css" rel="stylesheet" type="text/css">   //这成为外部式（外联CSS文件）
ps:优先级：内联式 > 嵌入式 > 外部式。***一般情况下，<title>中先写外部式，再写嵌入式***

3.ID选择器，类选择器

.stress{ color:red; } <span class="stress">勇气</span>  //这是类选择器的用法
#stress{ color:red;} <span id="stress">胆小如鼠</span>  //这是ID选择器的用法

那么他们有什么区别呢：

1、ID选择器只能在文档中使用一次。

 /*++++++++++++++++++++++++++以下为正确代码++++++++++++++++++++++++++++++*/
 <p>三年级时，我还是一个<span class="stress">胆小如鼠</span>
 的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个
 <span class="stress">勇气</span>来回答老师提出的问题。</p>
 /*++++++++++++++++++++++++以下为错误代码++++++++++++++++++++++++++++++++*/
 <p>三年级时，我还是一个<span id="stress">胆小如鼠</span>
 的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个
 <span id="stress">勇气</span>来回答老师提出的问题。</p>

2、可以使用类选择器词列表方法为一个元素同时设置多个样式。

 /*以下为正确代码，三年级”三个文字设置文本颜色为红色并且字号为25px*/
 .stress{ color:red;}
.bigsize{ font-size:25px;}
<p>到了<span class="stress bigsize">三年级</span>下学期时，我们班上了一节公开课...</p>
 /*以下为错误代码，无法使三年级”三个文字设置文本颜色为红色并且字号为25px*/
#stressid{    color:red;}
#bigsizeid{    font-size:25px;}
<p>到了<span id="stressid bigsizeid">三年级</span>下学期时，我们班上了一节公开课...</p>

4.子选择器,后代选择器,全选择,伪类选择器

/*++++++++++++++++++++++++++++++子选择器（针对儿子）+++++++++++++++++++++++++++++++++++++++++++-*/
.first>span{ border:1px solid red ;}                              //这一行写在head里
<p class="first">三年级时，<span >我还是一个胆小如鼠的小女孩</span>……。</p>    /*我还是一个胆小如鼠的女孩有红色边框*/
/*++++++++++++++++++++++++++++++后代选择器（针对所有后代）+++++++++++++++++++++++++++++++++++++++*/
.first span{ border:1px solid red;}
<p class="first">三年级时，<span>我还是一个<span>胆小如鼠</span></span>……。</p>  /*我还是……框里 胆小如鼠也有框*/
/*+++++++++++++++++++++++++++++++全选择器++++++++++++++++++++++++++++++++++++++++++++++++++++*/
* {color:red;}  /*写在<style></style>里，让所有标签变红*/
/*++++++++++++++++++++++++++++++伪类选择器+++++++++++++++++++++++++++++++++++++++++++++++++++*/
a:hover{color:red;   }             /*<p>标签也适用*/
<a href="http://www.imooc.com">胆小如鼠</a>  /*鼠标滑过的时候能够变红*/

5.权值

p{color:red;}                                           /*权值为1*/
p span{color:green;}                            /*权值为1+1=2*/
.warning{color:white;}                           /*权值为10*/
p span.warning{color:purple;}                /*权值为1+1+10=12*/
#footer .note p{color:yellow;}               /*权值为100+10+1=111*/
<span style="color:pink">超酷的互联网</span>     /*权值1000*/
p{color:red!important;}                    /*权值最高，高于内联式*/
/*继承的权值为0.1*/
ps：CSS最终样式取权值最高的

6.块状元素，内联元素，内联块状元素

a{display:block;}             //将a元素设置为块级元素
div{display:inline; }         //将div元素设置为内联元素
a{display:inline-block;}    //将a元素设置为内联块状元素
对比：
块级元素：每个块级元素都占一行，元素的高度、宽度、行高以及顶和底边距都可设置，宽度为父元素宽度
内联元素：和其他元素都在一行上，元素的高度、宽度及顶部和底部边距不可设置，宽度为文字或图片宽度
内联块状元素：和其他元素都在一行上，元素的高度、宽度、行高以及顶和底边距都可设置。

7.盒模型

盒模型包括：内容,填充padding,边框border,边界margin
内容：文字图片等  
可调参数： width:200px;  height:30px;

填充：元素内容与边框之间是可以设置距离的，称之为“填充”。
可调参数：  padding:10px;

边框：就是围绕着内容及补白的线
可调参数：border:2px  solid  red;   //边框2像素，实线，红色框

边界：元素与其它元素之间的距离可以使用边界
可调参数： margin:10px;

8.模型

.container{
  display: flex;
  flex-direction: column;
}
.container2{
  display: flex;
  flex-direction: raw;
}
//flex模型，使用这种方法即可使容器里每个元素垂直/水平分布

9.浮动

在父组件内浮动
效果：

三个左浮动（float:left ）从左到右红蓝绿，父组件宽度不够就这样了

10.弹性盒子模型

对一个元素用display:flex ，其子元素能flex浮动，利于垂直居中