前端入门知识——css（2）

最新推荐文章于 2022-07-26 09:30:10 发布

前端头条

最新推荐文章于 2022-07-26 09:30:10 发布

阅读量494

点赞数

分类专栏： HTML5 SEO HTML 科技 web前端程序员 css3 框架 css JavaScript 资讯编程文章标签：程序员编程 web前端资讯科技

本文链接：https://blog.csdn.net/tianduantoutiao/article/details/90678762

版权

HTML 同时被 3 个专栏收录

40 篇文章 0 订阅

订阅专栏

科技

40 篇文章 0 订阅

订阅专栏

web前端

40 篇文章 0 订阅

订阅专栏

CSS颜色表示法
css颜色值主要有三种表示方法：

颜色名表示，比如：red 红色，gold 金色。
rgb表示，比如：rgb(255,0,0)，表示红色。
16进制数值表示，比如：#ff0000 表示红色，这种可以简写成 #f00。
css颜色表示法示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css颜色表示法</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        div {
            font-size: 30px;
            /*以下三种方法，效果一致*/
            /*color: green;*/
            /*color: rgba(0,255,0);*/
            color: #00ff00;
        }
    </style>
</head>

<body>
<div>这是一个div标签</div>
</body>
</html>

CSS选择器
如果对同一内容区添加样式，下面的样式会覆盖上面的样式；
在css中，#代表id选择器，.代表类选择器；

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

1.标签选择器
标签选择器，此种选择器影响范围大，建议尽量应用在层级选择器中。

标签选择器举例：

*{margin:0;padding:0}
div{color:red} 
<div>....</div> <!-- 对应以上两条样式 -->
<div class="box">....</div> <!-- 对应以上两条样式 -->

01标签选择器示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* 针对所有的标签选择器，慎用 */
        * {
            color: red;
        }
        /* 仅针对所有的div标签选择器 */
        div {
            font-size: 30px;
        }
    </style>
</head>

<body>
<div>第一个div标签</div>
<div>第二个div标签</div>
<div>第三个div标签</div>
</body>
</html>

01标签选择器示例

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

id选择器举例：
#box{color:red} 
<div id="box">....</div> <!-- 对应以上一条样式，其它元素不允许应用此样式 -->

02id选择器示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>id选择器</title>
    <style>
        div {
            font-size: 30px;
            color: red;
        }
        /* id选择器，用#作为id选择器的标识 */
        /* 如果对同一内容区添加样式，下面的样式会覆盖上面的样式 */
        #d1 {
            color: gray;
        }
    </style>
</head>
<body>

<div id="d1">第一个div标签</div>
<div>第二个div标签</div>
<div>第三个div标签</div>

</body>
</html>

02id选择器示例

3.类选择器
通过类名来选择元素，一个类可应用于多个元素，一个元素上也可以使用多个类，应用灵活，可复用，是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>

03类选择器示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>类选择器</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        .d1 {
            font-size: 30px;
            color: deeppink;
        }
        .d2 {
            font-style: italic;
        }
        .d3 {
            color: green;
        }
    </style>
</head>
<body>
<div class="d1">这是第一个div标签</div>
<div class="d1 d2">这是第二个div标签</div>  <!-- 多个类可以作用于一个元素 -->
<!--如果一个元素上有多个类，多个类之间有重复的样式，那么在外联式/嵌入式中后定义的类选择器的样式会覆盖先定义的；-->
<p class="d3 d1">这是一个p标签</p>

<p>下面是没有添加类选择器的标签</p>
<div>这是第一个div标签</div>
<div>这是第二个div标签</div>
<p>这是一个p标签</p>
</body>
</html>

03类选择器示例

4.层级选择器
主要应用在选择父元素下的子元素，或者子元素下面的子元素，可与标签元素结合使用，减少命名，同时也可以通过层级，防止命名冲突。
层级选择器可以包含多层，比如box中嵌套box，二层box下再嵌套span；但一般而言，最好不要超过四层。
层级选择器之间用空格隔开；

层级选择器举例：
.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>

5.组选择器
多个选择器，如果有同样的样式设置，可以使用组选择器，抽离重复样式。组选择器之间用逗号分隔开。

组选择器举例：
.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>

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

伪类选择器举例
.box1:hover{color:red}
.box2:before{content:'行首文字';}
.box3:after{content:'行尾文字';}
<div class="box1">....</div>
<div class="box2">....</div>
<div class="box3">....</div>

06伪类和伪元素选择器示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类和伪元素选择器</title>
    <style>
        .link {
            font-size: 30px;
            text-decoration: none;
            color: deeppink;
        }
        /* 使用伪类选择器 在鼠标悬浮链接后变色加粗 */
        .link:hover {
            color: aqua;
            font-weight: bold;
        }
        .d1, .d2, .d3 {
            font-size: 20px;
        }
        /*使用伪元素选择器，给文字前后添加内容*/
        .d1:before {
            content: "***";
            color: red;
        }
        .d3:after {
            content: "???";
            color: blue;
        }
    </style>
</head>
<body>
<a href="http://www.baidu.com" class="link">百度一下，你就知道</a>
<div class="d1">这是第一个div标签</div>
<div class="d2">这是第二个div标签</div>
<div class="d3">这是第三个div标签</div>
</body>
</html>

06伪类和伪元素选择器示例

注意：

id选择器基本不用，用得最多的是类选择器。
如果一个元素上有多个类，多个类之间有重复的样式，那么在外联式/嵌入式中后定义的类选择器的样式会覆盖先定义的；
id选择器的权重要高于类选择器的权重，即id和类的样式同时作用于一个内容区，会优先使用id的样式。

最后，给大家推荐一个前端学习进阶内推交流圈子（前端资料分享），不管你在地球哪个方位，
不管你参加工作几年都欢迎你的入驻！（会定期免费提供一些收藏的免费学习书籍资料以及整理好的面试题和答案文档！）

如果您对这个文章有任何异议，那么请在文章评论处写上你的评论。

如果您觉得这个文章有意思，那么请分享并转发，或者也可以关注一下表示您对我们文章的认可与鼓励。

愿大家都能在编程这条路，越走越远。