CSS的基本语法及引入方法，外联式、嵌入式、内联式、CSS选择器，标签选择器、id选择器、类选择器、层级选择器、伪类及伪类选择器

最新推荐文章于 2024-04-19 12:52:58 发布

Chains-X ♔

最新推荐文章于 2024-04-19 12:52:58 发布

阅读量1.1k

点赞数

分类专栏： WEB前端文章标签： web前端 CSS CSS选择器

本文链接：https://blog.csdn.net/mk1843109092/article/details/100056891

版权

WEB前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

本文介绍了CSS的基本语法，包括选择器的使用，如标签选择器、id选择器、类选择器、层级选择器，以及外联式、嵌入式、内联式的CSS页面引用方法。同时，讲解了伪类和伪元素选择器的应用，如:hover和:before、:after。

摘要由CSDN通过智能技术生成

CSS

为了让网页元素的样式更加丰富，也为了让网页的内容和样式能拆分开，CSS由此思想而诞生，CSS是 Cascading Style Sheets 的首字母缩写，意思是层叠样式表。有了CSS，html中大部分表现样式的标签就废弃不用了,html只负责文档的结构和内容，表现形式完全交给CSS，html文档变得更加简洁。

Css基本语法及页面引用

css基本语法

css的定义方法是：
选择器 { 属性:值; 属性:值; 属性:值;}
选择器是将样式和页面元素关联起来的名称，属性是希望设置的样式属性每个属性有一个或多个值。

示例: 1.css

div{
    width:200px;
    height:200px;
    background-color:red;
}

css页面引入方法

外联式：通过link标签，链接到外部样式表到页面中。

<link rel="stylesheet" type="text/css" href="css/main.css">

嵌入式：通过style标签，在网页上创建嵌入的样式表。

<style type="text/css">

    div{ width:100px; height:100px; color:red }
    ......

</style>

内联式：通过标签的style属性，在标签上直接写样式。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css的使用</title>
    <!--1.外链式,通过link标签引入css文件  要在head标签当中引入-->
    <link rel="stylesheet" href="./1.css">
    <!--2.嵌入式 是通过style标签来写css 也要写在head标签当中-->
    <style>
        div{
            width:200px;
            height:200px;
            background-color:yellow;
        }
    </style>

</head>
<body>
    <!--3.内联式  同style属性来设置css是样式-->

    <!--在css的三种使用方式中存在优先级问题, 离元素越近那谁的优先级就越高-->
    <!--<div style="width:200px;height:200px;background-color:green;"></div>-->
    <div style="width:200px;height:200px;background-color:green;"></div>

</body>
</html>

CSS选择器

常用的选择器有如下几种：

标签选择器

标签选择器，通过标签俩选择元素，此种选择器影响范围大，建议尽量应用在层级选择器中。

举例:

*{margin:0;padding:0}
div{color:red}   


<div>....</div>   <!-- 对应以上两条样式 -->
<div class="box">....</div>   <!-- 对应以上两条样式 -->

id选择器

通过id名来选择元素，元素的id名称不能重复，所以一个样式设置项只能对应于页面上一个元素，不能复用， id名一般给程序使用，所以不推荐使用id作为选择器。

举例:

#box{color:red} 

<div id="box">....</div>   <!-- 对应以上一条样式，其它元素不允许应用此样式 -->

类选择器

通过类名来选择元素，一个类可应用于多个元素，一个元素上也可以使用多个类，应用灵活，可复用，是css中应用最多的一种选择器。

举例:

.red{color:red}
.big{font-size:20px}
.mt10{margin-top:10px} 

<div class="red">....</div>
<h1 class="red big mt10">....</h1>
<p class="red mt10">....</p>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css的三种基本选择器</title>
    <style>
        /* 标签选择器 通过标签来设置元素的样式 影响范围最大*/
        /*div{*/
            /*width:100px;*/
            /*height:100px;*/
            /*background-color:green;*/
        /*}*/
        /* .类选择器 通过class类名来设置元素的样式 影响范围可控制相对较小*/

        /* 注意: 基本三种选择器优先级问题 影响范围越大的选择器优先级最低 id>class>元素选择器 */
        .item1{
            width:200px;
            height:200px;
            background-color:red;
        }
        .item2{
            width:100px;
            height:100px;
            /*设置边框 */
            border:1px solid red;
        }
        .bg{
            background-color:pink;
        }
        /* #id选择器 通过id属性的值来设置元素的样式 影响范围最小*/
        /*  注意id在html当中具有唯一性,不能重名 */
        #box1{
            width:300px;
            height:300px;
            background-color:blue;
        }
        #box2{
            width:100px;
            height:100px;
            /*设置边框*/
            border:1px solid red;
        }
        #box3{
            width:100px;
            height:100px;
            background-color:blue;
        }

    </style>
</head>
<body>
    <div class="item1 " id="box3"></div>
    <div class="item2 bg"></div>
    <div class="item1"></div>
    <div id="box1"></div>
    <div id="box2"></div>
</body>
</html>

层级选择器

主要应用在选择父元素下的子元素，或者子元素下面的子元素，可与标签元素结合使用，减少命名，同时也可以通过层级，防止命名冲突。

举例:

.box span{color:red}
.box .red{color:pink}
.red{color:red}

<div class="box">
    <span>....</span>
    <a href="#" class="red">....</a>
</div>

<h3 class="red">....</h3>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层级选择器</title>
    <style>
        /* 层级选择器 通过父级元素来设置子级元素的样式 还可以设置子元素的子级的样式*/
        /*层级选择器可以和多种选择器混合使用*/
        .wrap{
            width:500px;
            height:500px;
            border:1px solid red;
        }
        .wrap div{
            width:300px;
            height:300px;
            background-color:red;
        }
        .wrap .in{
            width:200px;
            height:200px;
            background-color:green;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="in"></div>
        <div>
            <div class="in"></div>
        </div>
    </div>
</body>
</html>

组选择器

多个选择器，如果有同样的样式设置，可以使用组选择器。也成为并列选择

举例:

.box1,.box2,.box3{width:100px;height:100px}
.box1{background:red}
.box2{background:pink}
.box2{background:gold}

<div class="box1">....</div>
<div class="box2">....</div>
<div class="box3">....</div>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>并列选择器</title>
    <style>
        /*组选择器 可以同这给多个元素设置相同的样式*/
        .box1,.box2,.box3{
            width:200px;
            height:200px;
        }
        .box1{
            /*width:200px;*/
            /*height:200px;*/
            background-color:red;
        }
        .box2{
            /*width:200px;*/
            /*height:200px;*/
            background-color:green;
        }
        .box3{
            /*width:200px;*/
            /*height:200px;*/
            background-color:blue;
        }
    </style>
</head>
<body>
    <!--要求一下三个元素的宽度和高度都为200px box1背景颜色为红色 box2北背景为绿色 box背景为蓝-->
    <div class="box1"></div>
    <p class="box2"></p>
    <div class="box3"></div>
</body>
</html>

伪类及伪元素选择器

常用的伪类选择器有hover，表示鼠标悬浮在元素上时的状态，伪元素选择器有before和after，它们可以通过样式在元素中插入内容。

.box1:hover{color:red}

<div class="box1">....</div>

a:hover {color: #FF00FF; text-decoration: underline} /* 鼠标在该元素上时 */


a:before{content:"Hello";}         /*在每个<a>元素之前插入内容*/
a:after{content:"world";}        /*在每个<a>元素之后插入内容*/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类选择器</title>
    <style>
        /*hover 设置鼠标悬停在元素上时的状态*/
        .box{
            width:200px;
            height:200px;
            background-color:green;
        }
        .box:hover{
            /*鼠标悬停上之后的样式*/
            background-color:red;
            width:500px;
            height:500px;
        }

        /* after 在元素里面的尾部插入内容*/
        .box:after{
            content:'ll';
        }
        /*before 在元素里面的头部插入内容*/
        .box:before{
            content:'I';
        }
    </style>
</head>
<body>
    <div class="box">love</div>
</body>
</html>