CSS基础样式、选择器

豆芽菜♀

已于 2022-04-28 22:40:30 修改

阅读量160

点赞数

分类专栏：前端文章标签： css3

于 2022-04-16 13:44:08 首次发布

本文链接：https://blog.csdn.net/m0_57752092/article/details/124202884

版权

前端专栏收录该内容

10 篇文章 1 订阅

订阅专栏

一、样式

1.内部样式

<!DOCTYPE html>
<html lang="en">
<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>
  h1{color: rgb(0, 0, 0);}
  h2{color: rgb(185, 73, 73);}
  h3{color: rgb(53, 41, 124);}
</style>
      
</head>
<body>
    <h3>nihhjdsvbdj</h3>
    <h2>hgsugvsbvkjdf</h2>
    <h1>gfeuaoetuomvt </h1>
</body>
</html>

2.外部样式

<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>
     <!-- 外部样式
     href=css文件的路径-->
     <!-- CSS外部引入方式1 -->
<link rel="stylesheet" href="html.css">  
     <!-- CSS外部引入方式2 -->
     <style type="text/css">
        @import url("html.css");
     </style>
</head>
<body>
    <h3>nihhjdsvbdj</h3>
    <h2>hgsugvsbvkjdf</h2>
    <h1>gfeuaoetuomvt </h1>
</body>

/* css外部样式 */
h1{color: rgb(29, 198, 63);}
h2{color: rgb(185, 73, 73);}
h3{color: rgb(53, 41, 124);}

3.行内样式

<h1 style="color: rgb(210, 25, 99);">gfeuaoetuomvt </h1>
    <div style="color: darkorange;">我是div</div>

优先级：行内>内部>外部把!important加到哪种样式属性之后，哪种样式优先级最高（针对同一个标签，同一种属性）

二、选择器

1.元素选择器

<style>
 div{
    color: rgb(30, 152, 68);
        }
 h1{
    background-color: black;
        }
</style>

<body>
 <div>5555555555555</div>
 <h1>999999999999</h1>
</body>

2.类选择器

<!DOCTYPE html>
<html lang="en">
<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{
            color: rgb(210, 49, 13);
            background-color: rgb(13, 109, 47);
        }
        .ibm{
            background-color: aquamarine;
            color: rgb(29, 4, 57);
        }       
    </style>
</head>
<body>
 <!-- 当一个标签同时拥有几个类选择器，且几个选择器都有相同属性时，style最后定义的属性优先级更高 --> 
    <div class="color ibm">111111111111</div>
    <div class="color">222222222222</div>
    <div class="ibm">33333333333</div>
    <div class="color">44444444444</div>
</body>
</html>

3.id选择器

<style>
#aaa{
     color: #000;
}    
#bbb{
     background-color: blueviolet;
} 
#ccc{
     color: rgb(156, 25, 25);
</style>

<body>
<!-- 一个标签不能用几个id选择器 -->
    <div id="aaa">rrrrrrrrrrr</div>
    <div id="bbb">kkkkkkkkkkk</div>
    <div id="ccc">yyyyyyyyyyy</div>
</body>

4.通配选择器

*{
     /*外边距*/
     margin: 0;
    /*内边距*/
     padding: 0;

 }

5.群组和后代选择器

<style>
/* 群组选择器 */
div,p,h3{
            background-color: rgb(209, 106, 10);
        }
</style>

<body>
<div>sssssssssssss</div>
<p>wwwwwwwwwww</p>
<h3>ffffffffff</h3>
</body>

/* 后代选择器 (从右向左选择，先找到p，再找到包裹p的div)*/
        div p{
            background-color: chartreuse;
        }
<div>
    <p>kkkkkkkkkk</p>
</div>
<h1>jjjjjjjjjj</h1>

6.伪类选择器

a:link{
            color: rgb(149, 231, 15);
        }
        a:visited{
            color: rgb(217, 11, 11);
        }
        a:hover{
            color: rgb(40, 19, 181);
        }
        a:active{
            color: rgb(237, 139, 11);
        }

<body>
        <a href="www.baidu.com">百度</a>
</body>

7.选择器的权重

豆芽菜♀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS基础样式、选择器

<!DOCTYPE html><html lang="en"><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>Do.
复制链接

扫一扫