前端开发之css篇

一、css简介

　　css（Cascading Style Sheets）层叠样式表，是一种为html文档添加样式的语言，主要有两个功能：渲染和布局。使用css主要关注两个点：查找到标签，属性操作　　

二、css的引入方式

（1）行内式引入：

<div style="color:red;font-size: 16px">hello</div>

直接在html语句的属性中设置，这种方法的缺点是html代码和css代码混合在一起，耦合性太强，维护困难

（2）嵌入式引入：

 <style>
        div{
            color: red;
            font-size: 16px;
            background: grey;
        }
    </style>

在html中head部分添加css样式

（3）链接式引入：

单独写一个css文件，在html的头文件中引入。这种方式最常用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <link rel="stylesheet" href="index.css">

（4）导入式：

在style标签中引入外部的css文件

 <style type="text/css">
        @import "index.css";
    </style>

导入式和链接式引入有区别：

a.加载方式不同：导入式会先导入html,再用css渲染，如果此时网络卡了，在浏览器上显示的就是没有样式的内容，然后再一点点渲染，而链接式是一块加载的

b.链接式链接文件数量没有上限，但是导入式有上限

三、css选择器

上面四种引入css样式的方法中，除了缺点最明显的行内式，其他三种方法都需要先找到标签，才能对标签样式进行操作

1.基本选择器

通配选择器 *{color：red}
标签选择器 div{background:green}
id选择器　　#user{font-size:12px}
class选择器　　.user{border:1px solid red}

我们在html那篇博客里提到过id，id唯一标识一个标签，但是如果我们想对一系列标签添加同样的样式，肯定不能都用id,可以用class，从字面上理解就是一类具有类似作用的标签，在选择这些标签时用“点类名”的方式，而且class 也没有不能重名的限制

通用选择器一般用在预处理，初识化的时候

2.组合选择器

有时只用基本选择器并不能让我们准确找到标签，还需要用到一些组合标签

c1,c2 多元素选择器，同时匹配所有的c1元素和c2元素
c1 c2 后代选择器，匹配所有属于c1后代的c2元素
c1 > c2 子代选择器，用后代选择器有个问题，所有属于c1的后代都会被选择，包括孙子代，用子代选择器就不会有这个问题，子代选择器只会选择自己的儿子这一层级
c1+c2 毗邻元素选择器，匹配所有紧挨着c1元素之后的同级元素
c1~c2 普通兄弟元素，这个和毗邻元素选择器的区别就是，没有了紧挨着的限制

3.属性选择器

对于标签的固有属性，如id和class，可以通过#或.的方式找到。

如果是自定义属性，就要通过中括号的方式

 <style>
        #cl1{
            color: #000;
        }
        .c1{
            font-size: 12px;
        }
        div[zhang]{
            background: red;
        }
    </style>
</head>
<body>
    <div class="c1" id="cl1" zhang="123">123</div>
</body>

当有多个相同的自定义属性时，还可以用属性值区分，如div[zhang="123"]{}

四、伪类

1.anchor伪类：

　　我们浏览网页的时候，有时会遇到鼠标放在一个元素上时，元素会发生变化的情况，这就是通过anchor伪类实现的，不止有鼠标悬浮的样式，还可以设置点击时，以及点击后的样式

　　a:link 　　默认状态

　　a:hover 鼠标悬浮在元素上的样式

　　a:visited 点击过的元素的样式

　　a:active 在元素上按下鼠标时的样式

这四个标签是针对于a标签用的，但不限于a标签，其中hover是最常用的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <style>
        .out{
            width: 300px;
            height: 300px;
            background: greenyellow;
        }
        .out:hover{
            background: red;
        }
        .out:visited{
            background: white;
        }
        .out:active{
            background: black;
        }
    </style>
</head>
<body>
    <div class="out">
        <div class="c1"></div>
        <div class="c2"></div>
    </div>

</body>
</html>

View Code