CSS初识和CSS基本选择器

最新推荐文章于 2022-10-26 20:27:52 发布

一条咸鱼o*v*o

最新推荐文章于 2022-10-26 20:27:52 发布

阅读量240

点赞数

文章标签： css css3 前端

本文链接：https://blog.csdn.net/m0_45659764/article/details/123311977

版权

一、基础认知

1.1 CSS的介绍

CSS（Cascading style sheets）：层叠样式表

CSS作用是什么？

给页面中的HTML标签设置样式

1.2 CSS语法规则

写在哪里？

css写在style标签中，style标签一般写在head标签里面，title标签下面

怎么写？

<style>
    选择器{
        css的属性名:属性值; //样式的键值对
    }
</style>

<style>
        p {
            /* 文字颜色 */
            color: red;
            /* 文字大小 */
            font-size: 30px;
            /* 背景颜色 */
            background-color: skyblue;
            /* 宽度 */
            width: 300px;
            /* 高度 */
            height: 300px;
        }
    </style>

2.1 CSS引入方式

内嵌式：CSS写在style标签中

提示：style标签虽然可以写在页面任意位置，但是通常约定写在head标签中

外联式：CSS写在一个单独的.css文件中

提示：需要通过link标签在网页中引入

行内式：CSS写在标签的style属性中

提示：不推荐使用

引入方式	书写位置	作用范围	使用场景
内嵌式	CSS写在style标签中	当前页面	小案例
外联式	CSS写在单独的CSS文件中，通过link标签引入	多个页面	项目中
行内式	CSS写在标签的style属性中	当前标签	配合js使用

内嵌式

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- 1、内嵌式 -->
    <style>
        p {
            color: red;
        }
    </style>
</head>

外联式

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 外联式 -->
    <link rel="stylesheet" href="./CSS/1.css">
    
</head>

行内式

<body>
    <p style="color: green;">我是一个p标签</p>
    <p>我也是一个p标签</p>
</body>

二、基础选择器

1.1 选择器的作用

选择器的作用：

选择页面中对应的标签，方便后续设置样式

1.2 标签选择器

结构：标签名{css属性名;属性值;}

作用：通过标签名，找到页面中所有这类标签，设置样式

注意点：

标签选择器选择的是一类标签，而不是单独某一个
标签选择器无论嵌套关系有多深，都能找到对应的标签

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            color: blue;
        }

        div {
            color: red;
        }
    </style>
</head>

<body>
    <p>我是p标签</p>
    <p>我也是p标签</p>
    <div>我是一个div</div>
    <div>我也是一个div</div>
    <div>
        <div>
            <div>
                <p>p标签</p>
            </div>
        </div>
    </div>
</body>

2、类选择器

结构：.类名{ css属性名:属性值;}

作用：通过类名，找到页面中所有带这个类名的标签，设置样式

注意点：

所有标签上都有class属性，class属性的属性值称为类名
类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头
一个标签可以同时有多个类名，类名之间以空格隔开
类名可以重复，一个类选择器可以同时选中多个标签

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .red {
            color: red;
        }

        .yellow {
            color: yellow;
        }

        .pink {
            color: pink;
        }

        .big {
            font-size: 30px;
        }
    </style>
</head>

<body>
    <p class="red big">小红</p>
    <p class="yellow">小黄</p>
    <p class="pink">小粉</p>
</body>

3.id选择器

结构：#id属性值{ css属性名:属性值;}

作用：通过id属性值，找到页面中带有这个id属性值的标签，设置样式

注意点：

所有标签上都有id属性
id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的
一个标签上只能有一个id属性值
一个id选择器只能选中一个标签

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #red {
            color: red;
        }

        #green {
            color: green;
        }
    </style>
</head>

<body>
    <p id="red">红果果</p>
    <p id="green">绿泡泡</p>
</body>

补充：类与id的区别

class类名与id属性值的区别

class类名相当于姓名，可以重复，一个标签可以同时有多个class类名
id属性值相当于身份证号码，不可重复，一个标签只能有一个id属性值

类选择器与id选择器的区别

类选择器以.开头
id选择器以#开头

实际开发的情况

类选择器用的最多
id一般配合js使用，除非特殊情况，否则不要使用id设置样式
实际开发中会遇到冗余代码的抽取（可以将一些公共的代码抽取到一个公共的类中去）

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .common {
            font-size: 30px;
            color: red;
        }
    </style>
</head>

<body>
    <p class="common">我想变大，也想变红</p>
    <div class="common">我想变大，也想变红</div>
</body>

4、通配符选择器

结构：*{ css属性名:属性值;}

作用：找到页面中的所有的标签，设置样式

注意点：

开发中使用极少，只会在极特殊的情况下才会用到
可能会用于去除标签默认的margin和padding

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            color: red;
        }
    </style>
</head>

<body>
    <h1>我是h1</h1>
    <div>小姐姐</div>
    <p>小哥哥</p>
    <h2>我是h2</h2>
    <p>giegie</p>
    <span>大可爱</span>
</body>

* {
     list-style-type: none; //去掉无序列表每一项前的圆点
}

一条咸鱼o*v*o

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS初识和CSS基本选择器

一、基础认知1.1 CSS的介绍CSS（Cascading style sheets）：层叠样式表CSS作用是什么？给页面中的HTML标签设置样式1.2 CSS语法规则写在哪里？css写在style标签中，style标签一般写在head标签里面，title标签下面怎么写？<style> 选择器{ css的属性名:属性值; //样式的键值对 }</style><style> ..
复制链接

扫一扫