CSS基础内容（一）

一入代码深世海，不知秃头何时来！又是深夜来临了，这一天又不知不觉过去了。整理一下今天CSS主要关键点内容，以便后续随时复习，加油！

CSS基础内容（一）

①简介

CSS（Cascading Style Sheets）层叠样式表。负责页面的表现给页面增加样式 如字体颜色、宽高、背景色...

②引入CSS

a.行内样式

<p style="color:red;font-size: 20px;">大家都是年轻人嘛。相互伤害</p>

b.内嵌式

在head标签内部放置

<style>
        div {
            color: orange;
        }
</style>

注：选择器（帮我们选择到操作的元素）{
        k:v;
        k:v;
    }

c.外链式

把样式写到一个或多个css文件中，在网页中通过link引用需要的样式文件

 <link rel="stylesheet" href="index.css">

③选择器

选中我们要设置样式的标签

a.标签选择器（标签名）

div {
    ....
}

​ 特点：选中页面所有的div标签

b.id选择器

​ 先给作用元素设置id，然后通过#id值

#div1 {
    text-decoration: underline;
}

​ 特点：选中唯一的元素

c.类选择器

给需要设置该类样式的标签 添加class="类名"，设置类的时候尽量原子化

格式：

.类名 {
k:v;
k:v;
.....
}

    .font60 {
         font-size: 60px;
    }
    .green {
         color: green;
    }

​ 特点：一般情况把某一样样式定义一个类，这样以后可以复用，也就是可以组合使用

d.通配符选择器

    * {
        background-color: bisque;
    }

注：* {
k:v;
k:v;
...
}
*代表所有元素，设置所有的元素

e.后代选择器

/* div标签的后代p */
   div p {
       font-size: 30px;
        color: green;
    }
/* div的亲儿子p */
   div>p {
       font-size: 30px;
       color: green;
   }
    ul li p {
            background-color: cadetblue;
   }

f.交集选择器

/* 交集选择器 p.p3--即是p元素class又是p3 */    
    ul li p.p3 {
            background-color: chocolate;
    }
/* p.p3--即是p元素id又是p3 */  
    ul li p#p3 {
            background-color: rgb(18, 80, 173);
    }

g.并集选择器

/* 并集选择器:用逗号隔开--即是满足p元素又是满足span元素*/
   p,
   span {
            text-decoration:underline;
   }

h.伪类选择器

不同状态下显示的样子

/* 未访问前 */
   a:link {
        text-decoration: none;
        color: rgb(252, 235, 235);
   }

/* 链接访问过的状态 */
    a:visited {
        color:#f00;
   }

/* 鼠标放入超链接状态 */
   a:hover {
       color: #0f0;
   }

/* 按住超链接不松手的状态 */
   a:active {
        color: #000;
   }

明天做点小案例巩固前面学习内容。