浅谈css

CSS(Cascading Style Sheets)
本人百度脑图地址：http://naotu.baidu.com/file/c7643a651e60f786b71f1afdf7bea877

1. 介绍
   层叠样式表
   层叠
   多个样式表修饰同一个元素
   优先级
   通用选择器（*） < 元素(类型)选择器 < 类选择器（class=""） < 属性选择器 < 伪类 < ID 选择器 < 内联样式
   样式表

{color:#fff;}

2. 在html中如何应用css

   1. 在元素中添加style属性，style属性值为css样式规则
      缺点:样式与结构与杂糅

      <div style="width:100px;height:100px;"></div>
      

      优点:简单直接，优先级高
      2) 将样式添加到head标签中的style标签里

   2. 将样式定义在css文件中，通过link导入进来

<link rel="stylesheet" href="./static/bootstrap-3.3.7/css/bootstrap.min.css">

3. 语法
   选择器 {
   样式名:样式值;
   样式名:样式值;
   …
   }

<style type="text/css">
        body{
            background: url("../image/10.jpg") no-repeat 398px 150px;
            background-size: 900px 600px;
        }
       table{
           border-collapse: collapse;
           width: 800px;
           height: 400px;
           margin: 220px 0 0 440px;
           border-color: yellow;
        }
       td{
           color: aqua;
       }
        th{
            text-align: center;
            color: greenyellow;
        }

4. 选择器

   1. 核心选择器
      (1)标签选择器

   div {
   color:red;
   }
   

   (2)id选择器

   #one {
   color:red;
   }
   

   (3)class选择器

    .nav {
               background: #007de8;
               color: #853e02;
           }
   

   (4)逗号选择器

 body,h1,h2,ul{
            margin: 0;
        }

(5)组合选择器
div#one {}
普遍选择器
* 不单独使用
2. 层次选择器
子元素选择器
.nav > ul > li {}

 .nav > ul > li > ul {
            display: none;
            position: absolute;
            background-color: pink;
            color: #007f80;
            width: 100%;
        }
```css
后代选择器
			.nav li {}
			

```css
 .nav li {
           line-height: 3em;
        }

下一个兄弟选择器
.products > li.ios + *{}
之后所有兄弟选择器
.products > li.ios ~ {}
3. 属性选择器,过滤（表单元素）
selector[]
input[placeholder]
input[type=text]
input[type^=t]
input[type$=t]
input[type=t]
4. 伪类选择器,过滤器
与状态相关
:link a标签还未被访问
:hover 光标悬浮到元素上
:active a标签激活
:visited a标签访问过

<style>
        a:link{
            color: green;
        }
        a:hover{
            color: aqua;
            font-size: 30px;
        }
        a:visited{
            color: red;
        }
        .product>li:first-child{
            color: black;
        }
    </style>

与子元素相关
:first-child
:last-child
:nth-child(v)
v 为数字，公式，关键字

.product>ol>li:nth-child(2n+1){
            color:greenyellow;

:first-of-type
			:last-of-type
			:nth-of-type

5. 伪元素

		::after
			::before

副作用：在dom节点中产生一个新节点

	::first-letter
	::first-line
	::selection