CSS - CSS基础 - 《Web 学习笔记》

tags: ‘CSS’
categories: “CSS”
CSS2.1

tags: ‘CSS’

categories: “CSS”

CSS2.1

CSS介绍

CSS：层叠样式表（英文Cascading Style Sheets）：负责给页面做美化的
html专注于骨架，css专注于页面的样式

CSS简介
层叠样式表负责页面的表现，给页面标签增加样式如字体颜色、宽高、背景色

引入CSS的方式

文件：02.27/1css-helloworld.html

行内式

使用标签的style样式

    <!--行内式 通过标签的style属性来指定
        k:v;（键值对模式）
    -->
    <p style="color:red;font-size: 20px;">大家都是年轻人嘛。相互伤害</p>

内嵌式

语法：

内嵌式在head标签内部放置下面的代码。实际上style标签的代码是可以放置在任意位置

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

<!--  style标签放在head中，style中写CSS代码 -->
<head>
    <style>
        div { // 标签名
            color: orange;
            text-decoration: underline;
        }
        /*
        选择器 {
            css样式
        }
        */
    </style>
</head>
<body>
    <div>为了遇见更好的他，先自我变得优秀</div>
</body>

外链式

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

<!-- // 先建一个文件  文件名.css 例如index.css
// 文件中写CSS语法，即上面style标签内部的东西，之前的style标签还是属于html的 -->
<!-- index.css： -->
a {
    color: gray;
}
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
        // 在html中将文件引入
        // href表示文件的地址
        // rel：relationsheep（关系）：表示从外部引入的文件和当前网页是什么关系，是样式表的关系（stylesheet）
        // 这样浏览器能更好的来理解这个文件，理解成引入的文件和当前文件是样式表的关系 
    -->
    <link rel="stylesheet" href="index.css">
    <!-- // 上面这样写相当于一个style标签将index.css中的文件放到style标签内 -->
</head>
<body>
    <a href="http://www.baidu.com">百度</a>
</body>
</html>

选择器

标签选择器

使用
— 标签选择器(标签名)
div（标签名） {
key: value;
key: value;
}
特点：选中页面所有的div

使用标签选择器的场景：是让某一类标签有一个特殊的样式的时候可以使用标签选择器

文件：02.27/2selector.html
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- // 使用内嵌式 -->
    <style>
        /* // 标签选择器，即标签名 */
        div {
            font-size: 28px;
        }
        p {
            color: purple;
        }
    </style>
</head>
<body>
    <div>我爱我家</div>
    <p>岁月蹉跎，请君珍惜</p>
</body>

id选择器

使用
— id选择器
先给作用的元素设置id，然后通过#id属性值
#id名称 {
key: value;
key: value;
}
特点：选中唯一的元素，因为id是唯一的。只选择一个元素，页面中不能有同名的id

使用场景：id一般使用不是很多。如果只要对一个元素设置样式，会使用id选择器

文件：02.27/2selector.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 
        #号不能丢弃，加上id名 
        一般页面的id是唯一的，所以通过id找的元素也是唯一的
        // 每一个标签都有id属性
        选择页面id值为div1的元素
        */
        #div1 {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <!-- // 每一个标签都有id属性 -->
    <div id="div1">我爱中国</div>
    <div>我爱人民</div>
</body>
</html>

类选择器

语法
— 类选择器
.类名 {
k:v;
k:v;
…
}
给需要设置该类样式的标签添加class属性=”类名”

特点：一般情况把某一类样式定义一个类这样以后可以复用。对元素设置多个class，只需要在class属性中写入多个class的名称，中间使用空格隔开
// 标签的class属性只能写一次

文件：02.27/2selector.html
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 类选择器 */
        /*
        类选择器需要加一个.
        */
        .font60 {
            font-size: 60px;
        }
        .red {
            color: red;
            /* font-size: 60px; */
        }
        .blue {
            color: blue;
            /* font-size: 60px; */
        }
        .green {
            color: green;
            /* font-size: 60px; */
        }
    </style>
</head>
<body>
    <div class="font60 green">我爱人民</div>
    <div>我爱我家</div>
    <p class="font60">只要功夫深,铁棒磨成针</p>
    <p>岁月蹉跎，请君珍惜</p>
    <span class="font60 red">V</span>
    <span class="font60 blue">u</span>
    <!-- 
        /* 标签的class属性只能写一次 */
        /* 对元素设置多个class，只需要在class属性中写入多个class的名称，中间使用空格隔开  */
    -->
    <span class="font60 green">e</span>
    <!--
    /*一般在设计类的时候会原子化，这样以后方便复用*/ 
    -->
</body>

通配符选择器

语法：
— 通配符选择器
* {
key: value;
key: value;
}

  * 代表所有元素

场景：设置页面中所有的元素为相同的样式的时候，使用通配符选择器

文件：02.27/2selector.html
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*
        通配符选择器
        */
        * {
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div>我爱我家</div>
    <p>岁月蹉跎，请君珍惜</p>
    <span>V</span>
</body>

后代选择器

语法：
将任意选择器使用空格隔开

文件：02.27/3selector.html
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 后代选择器*/
        /* 
        选择div标签的子类标签名为p的标签
        通配符选择器类似于，列出所有标签，所有的标签使用,分割
         */
        div p {
            font-size: 30px;
            color: green;
        }
        ul li p {
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <p>我是div内部的元素</p>
    </div>
    <p>p标签</p>
    <ul>
        <li>
            <p>我隐藏的比较深</p>
        </li>
    </ul>
</body>

儿子选择器

语法：
选择器 > 选择器 {
key: value;
key: value;
}


<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* div的亲儿子p*/
        div>p {
            font-size: 30px;
            color: green;
        }
    </style>
</head>
<body>
    <!-- /*上面样式对下面这个起作用*/ -->
    <div>
        <p>我是div内部的元素</p>
    </div>
    <!-- /*上面的样式对下面这个不起作用*/ -->
    <div>
        <ul>
            <li>
                <p>我隐藏的比较深</p>
            </li>
        </ul>
    </div>
</body>