1 方式1
 2     head标签里面写
 3     <style>
 4         div{
 5             background-color: red;
 6             height: 100px;
 7             width: 100px;
 8         }
 9     </style>
10 方式2
11     内敛样式:
12     <div style=" height: 200px;width: 200px;"></div>
13 方式3 
14     外部文件引入
15     head标签里面写link标签
16     <link rel="stylesheet" href="文件路径">

 1 元素选择器:
 2     div{  #标签名字
 3          color:red;
 4     }
 5 id选择器:id值不能重复
 6     <div id="xuefei">
 7         雪飞大美女
 8     </div>
 9     
10     #xuefei{  
11         color:green;
12     }
13 类选择器: 类值可以重复
14     <div id="dazhuang" class="c1">
15         大壮dsb
16     </div>
17     <div id="xuefei" class="c1">
18         雪飞大美女
19     </div>
20     
21     .c1{
22         color: green;
23     }
24     
25     div.c1{ #div标签里面含有class值为c1的标签
26         color: green;
27     }
28 通用选择器
29 *{ #找到所有的标签
30     color: green;
31 }

1 div a{   #找到div标签后代里面的所有a标签
2     color:red;
3 }

1 div>a{ #找到div的儿子标签这一代的a标签
2     color:red;
3 }

1 div+a{  #找到是紧挨着div标签的下一个标签(是兄弟标签)
2      color: red;
3 }

1 div~a{  #找到的是同级的后面的所有兄弟标签
2     color: red;
3 }

 1     #通过属性名来查找
 2     [title]{ #找到所有含有title属性的标签  
 3         color: red;
 4     }
 5     
 6     div[title]{  #含有title属性的div标签
 7         color: red;
 8     }
 9     #通过属性名对应的值来查找,当属性值的值为数字的时候,数字要加上引号[title=‘666‘]
10     input[type=text]{ #含有type属性,并且type属性的值为text的input标签
11         background-color: red;
12     }

1 多个选择器选择的标签设置相同css样式的时候,就可以用分组
2 div,p{  #div选择器和p选择器共同设置相同的样式,可以逗号分隔
3     color:red;
4 }

 1 a标签自带的效果:未访问过的时候是蓝色的字体颜色,访问过之后是紫色的,自带下划线
 2 
 3 /* 未访问的链接 */
 4 a:link {
 5   color: #FF0000
 6 }
 7 
 8 /* 已访问的链接 */
 9 a:visited {
10   color: #00FF00
11 } 
12 
13 /* 鼠标移动到链接上 */  这个用的比较多,可以应用在其他标签上
14 a:hover {  
15   color: #FF00FF
16 } 
17 
18 /* 选定的链接 */ 就是鼠标点下去还没有抬起来的那个瞬间，可以让它变颜色
19 a:active {
20   color: #0000FF
21 }
22 
23 /*input输入框获取焦点时样式*/
24 input:focus {   #input默认的有个样式，鼠标点进去的时候，input框会变浅蓝色的那么个感觉
25   #outline: none;
26   background-color: #eee; #框里面的背景色
27 }

 1          /*伪元素选择器*/
 2         div:first-letter{
 3             color: red;
 4             font-size: 20px;
 5         }
 6         /*在p标签内容的前面插入一些内容*/
 7         p:before{
 8             content: ‘?‘;
 9             color: green;
10             font-size:100px;
11         }
12         /*在p标签内容的后面插入一些内容*/
13         p:after{
14             content: ‘哈哈!‘;
15             color: pink;
16         }

 1       /*优先级数字越大,越优先显示其效果,优先级相同的,显示后面定义的选择器对应的样式*/
 2         /*id选择器优先级为100*/
 3         /*#d1{*/
 4             /*color:deepskyblue;*/
 5         /*}*/
 6         /*!*继承的优先级为0*!*/
 7         /*body{*/
 8             /*color:red;*/
 9         /*}*/
10         /*!*类选择器的优先级是10*!*/
11         /*.c1{*/
12             /*color: blue;*/
13         /*}*/
14         /*.c2{*/
15             /*color: orange;*/
16         /*}*/
17         /*!*元素选择器优先级是1*!*/
18         /*div{*/
19             /*color: green;*/
20         /*}*/
21         内敛样式优先级为1000
22         <p class="cc3" style="color: red;">我是cc3的p标签</p>
23         
24         important优先级最高,最牛逼
25         .cc1 .cc3 {
26             color: purple!important;
27         }
28  

1     div{
2             width: 100px;  宽度
3             height: 100px; 高度
4             background-color: pink;
5         }

1 .c1 a{  
2     color: red;
3 }

1 .c1{
2     font-family: ‘楷体‘,‘宋体‘,‘微软雅黑‘;
3 }

1 .c1{
2             /*font-family: ‘楷体‘,‘宋体‘,‘微软雅黑‘;*/
3             font-size:14px; 默认字体大小为16px.
4             
5         }

1 color:red;

 1  .c1{
 2            
 3             font-weight: bold;
 4             font-weight: 100;
 5         }
 6         
 7 
 8 值    描述
 9 normal    默认值，标准粗细
10 bold    粗体
11 bolder    更粗
12 lighter    更细
13 100~900    设置具体粗细，400等同于normal，而700等同于bold

1         p{
2             /*color: red;*/
3             /*color: #78FFC9;*/
4             /*color: rgb(123,199,255);*/
5              color: rgba(123,199,255,0.3);  多了一个透明度的数字:0-1的一个数字
6         }

 1     text-align
 2     
 3     div{
 4             width: 200px;
 5             height: 200px;
 6             background-color: yellow;
 7             /*text-align: center;*/
 8             text-align: right;
 9         }
10         
11     left    左边对齐 默认值
12     right    右对齐
13     center    居中对齐

 1     text-decoration
 2     
 3     div a{
 4             /*text-decoration: none;*/  #给a标签去除下划线
 5             /*text-decoration: line-through;*/
 6             text-decoration: overline;
 7         }
 8     值    描述
 9     none    默认。定义标准的文本。
10     underline    定义文本下的一条线。
11     overline    定义文本上的一条线。
12     line-through    定义穿过文本下的一条线。

1 p {
2   text-indent: 32px; #首行缩进两个字符，因为我记得一个字在页面上的默认大小为16px
3 }

 1 背景颜色
 2 background-color: red;
 3 
 4     div{
 5             width: 600px;
 6             height: 600px;
 7             /*background-color: red;*/
 8             /*background-image: url("yeye.jpg");*/
 9             /*background-repeat: no-repeat;*/
10             /*background-position: 100px 50px;*/  相对于div标签的,距离左边100px,距离上面50px
11             background:url("yeye.jpg") no-repeat left center;
12             /*background-position: right top;*/
13 
14         }
15 简写方式,颜色  图片路径 是否平铺 图片位置
16 background:#ffffff url(‘1.png‘) no-repeat right top;
17