css引入方式和选择器

最新推荐文章于 2024-07-12 20:49:16 发布

no_name_sky

最新推荐文章于 2024-07-12 20:49:16 发布

阅读量95

点赞数

分类专栏：前端 css 文章标签： css html

本文链接：https://blog.csdn.net/no_name_sky/article/details/117675214

版权

前端同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

css

7 篇文章 0 订阅

订阅专栏

css是指层叠样式表，样式定义如何显示HTML元素。通常会把样式规则的内容保存在css文件中。

css三种引入方式

行内样式
内接样式
外接样式
3.1 链接式
3.2 导入式

行内样式

在标签内的style属性中添加样式。

<div>
<!--行内样式-->
    <p style="color:red;">是一个段落</p>
</div>

效果：
在这里插入图片描述

内接样式

head标签下的style标签中写样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
     /*检索所有的span标签，全部修改其样式*/
        span{
            color:green;
        }
    </style>
</head>
<body>

<div>
    <span>这是span1</span>
    <span>这是span2</span>
</div>

</body>
</html>

样式：
在这里插入图片描述

外接样式

链接式：
将样式写入到css文件中，在html中进行引用。
css文件：index.css

span {
    color: yellow;
    font-size:30px;
}

html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    // 链接式
    <link rel="stylesheet" href="index.css">
</head>
<body>

<div>
    <span>这是span1</span>
    <span>这是span2</span>
</div>

</body>
</html>

样式：
在这里插入图片描述
导入式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    <link rel="stylesheet" href="index.css">-->
    <style type="text/css">
    /*导入式，可以在css中使用此方式导入其他css文件*/
        @import url("index.css")
    </style>
</head>
<body>

<div>
<!--行内样式-->
    <p style="color:red;">是一个段落</p>
</div>

<div>
    <span>这是span1</span>
    <span>这是span2</span>
</div>

</body>
</html>

效果和链接式的一模一样。

选择器

选中哪些标签对其添加样式。有两种选择器：

基本选择器
高级选择器

基本选择器

包含标签选择器、id选择器、类选择器。

标签选择器

用标签名(包括body和其下的所有标签)做选择器。找到标签选择器选中的所有标签进行样式设置而不是某一个(是共性的)。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        p{
            color:green;
        }
    </style>
</head>
<body>

<div>
    <p>我是一个段落</p>
</div>

</body>
</html>

id选择器

同一个页面中，用id(同一个html页面中id值不能重复)来标识标签是唯一的，#id值选中对应id值得标签。
任何的标签都可以设置id，id的命名规范：以字母开头其后可以跟数字、下划线，大小写严格区分。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    /* id选择器，选中id值为s1的标签添加样式*/
        #s1{
            color:red;
        }
    </style>
</head>
<body>

<div>
    <span id="s1">123</span>
    <span>456</span>
</div>

</body>
</html>

样式：
在这里插入图片描述

类选择器

给标签加了类属性，表示这个标签属于这个类(可以给多个标签归属到同一个类中)。使用.class的值选中类下所有标签添加样式。
同一个标签中，可以携带多个类，class中的值以空格分隔设置多个值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    /* 类选择器，类下所有标签设定样式*/
        .title{
            color:yellowgreen;
            font-size:20px;
        }
        .td{
        /* 样式会重叠掉，后面重叠前面 */
            color:red;
        }
    </style>
</head>
<body>

<div>
    <h3 id="h" class="title td">三级标题</h3>
    <h3>三级标题1</h3>
    <h3 class="title">三级标题2</h3>
</div>

</body>
</html>

样式：
在这里插入图片描述

总结

不要试图用一个类将我们的页面写完，这个标签要携带多个类，共同设置样式。
每个类要尽可能的小，要有公共的概念，能够让更多的标签使用。
尽可能的使用class，除非一些特殊情况可以使用id。原因是，id一般用在js，js通过id来获取标签的。

高级选择器

后代选择器

选择的是标签的所有对应后代标签。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    /*后代选择器*/
    .container p{
    /*选中的是class值为container下的所有p标签*/
        color:red;
    }
    </style>
</head>
<body>

<div class="container">
	<p>段落1</p>
    <div>
        <p>这是一个段落</p>
    </div>
</div>

</body>
</html>

样式：
在这里插入图片描述

子代选择器

找到其标签的所有儿子标签，不再找孙子和孙子其后的标签。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    /*子代选择器*/
    .container>p{
    /*选择class值为container下的儿子标签(只走一级，不再找孙子和其后的标签)，对其进行样式设置*/
        color:red;
    }
    </style>
</head>
<body>

<div class="container">
    <p>段落1</p>
    <div>
        <p>这是一个段落</p>
    </div>
    <p>段落2</p>
</div>

</body>
</html>

样式：
在这里插入图片描述

交集选择器

交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为 class 选择器，两个选择器之间不能有空格。
交集选择器你可以理解为"并且"的意思，或者"既…又…"的意思。在实际开发中，用的相对较少，而且也不推荐使用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    /*交集选择器*/
    h3{
        width:300px;
        color:red;
    }

    .active{
        font-size:30px;
    }
	/*只有同时有h3 并且其class="active" 的标签才会添加样式*/
    h3.active{
        background-color:yellow;
    }
    </style>
</head>
<body>

<div class="container">
    <ul>
        <li class="item">
            <h3 class="active">这是h3</h3>
        </li>
        <li>
            <h3>这是有一个h3</h3>
        </li>
    </ul>
</div>

</body>
</html>

样式：
在这里插入图片描述

并集选择器(组合选择器)

对选中的所有标签都进行样式设置，多个选择器之间用’,'号分隔。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    /*并集选择器,设置多个标签统一样式*/
    a,h4{
        /* 所有a和h4都添加样式 */
        font-size:30px;
        text-decoration:none;
    }
    /*通配符选择器，选取页面上所有标签,性能有点差，一般不用，可以用组合来替代*/
    *{
        color:red;
        margin：0;
    }
    </style>
</head>
<body>

<div class="container">
    <div>
        <p>段落1</p>
        <a href="#">a1</a>
    </div>
    <ul>
        <li class="item">
            <h3 class="active">这是h3</h3>
            <h4>这是h4</h4>
        </li>
        <li>
            <h3>这是有一个h3</h3>
            <a href="#">a2</a>
        </li>
    </ul>
</div>

</body>
</html>

样式：
在这里插入图片描述

属性选择器

除了html元素的id和class外，还可以根据html元素的特定属性选择元素。
根据属性查找：[title]{color:red;}
根据属性和值，所有title值为hello的标签：[title="hello"]
根据属性和值，所有title值以hello开头的标签：[title^="hello"]
根据属性和值，所有title值以hello结尾的标签：[title$="hello"]
根据属性和值，所有title值包含hello的标签：[title*="hello"]
通常在表单控件中，使用比较多。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    /*属性选择器*/
    /*根据属性查找*/
    label[for]{
        color:red;
    }
    /*根据属性和值查找*/
    label[for="user"]{
        font-size:30px;
    }
    input[type="text"]{
        background-color:yellow;
    }
    </style>
</head>
<body>

<div class="box">
    <form action="">
        <label for="user">用户名:</label>
        <input type="text" id="user">
        <label for="pwd">密码:</label>
        <input type="password" id="pwd">
    </form>
</div>

</body>
</html>

样式：
在这里插入图片描述

伪类选择器

一般情况下用在a标签上。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    /*伪类选择器*/
    /*没有被访问的a标签样式*/
    .box .item1 a:link{
        color:#666;
    }
    /*访问过的a标签样式*/
    .box ul li.item2 a:visited{
        color:yellow;
    }
    /*鼠标移动到a标签上的样式*/
    .box ul li.item3 a:hover{
        color:red;
    }
    /*鼠标点击瞬间的样式*/
    .box ul li.item4 a:active{
        color:green;
    }

    /*选中第一个元素*/
    div ul li:first-child{
        font-size:20px;
    }
    /*选中当前指定元素,数值从1开始*/
    div ul li:nth-child(2){
        font-size:40px;
    }
    /*n标识选中所有从0开始的所有标签，0标识没有选中，2n表示所以偶数标签，2n-1表示所有奇数*/
    /*隔3换色，4n+1。隔x换色，(x+1)n+1*/
    </style>
</head>
<body>

<div class="box">
    <ul>
        <li class="item1">
            1
            <a href="#">张三</a>
        </li>
        <li class="item2">
            2
            <a href="#">张三1</a>
        </li>
        <li class="item3">
            3
            <a href="#">张三2</a>
        </li>
        <li class="item4">
            4
            <a href="#">张三3</a>
        </li>
    </ul>
</div>

</body>
</html>

样式：
在这里插入图片描述

伪元素选择器

对文本的操作。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    /*伪元素选择器*/
    /*选中文本的首个文字的样式*/
    p:first-letter{
        color:red;
    }
    /*在...之前添加内容*/
    p:before{
        content:"xx";
    }
    /*在..之后添加内容，用的多,用于清除浮动*/
    p:after{
        content:"yy";
        color:green;
    }
    </style>
</head>
<body>

<div class="box">
    <p>这是一个段落</p>
</div>

</body>
</html>