前端基础（二）：CSS

茉栀。。。

已于 2022-07-25 08:56:16 修改

阅读量495

点赞数

文章标签： css 前端 css3

于 2022-07-24 15:50:58 首次发布

本文链接：https://blog.csdn.net/m0_61426204/article/details/125904929

版权

一、CSS基础语法

格式：
选择器{属性1：值1；属性2：值2}
单位：
px->像素(pixel)
%->百分比：例：外容器->600px，当前容器50%->300px
基本样式：
width、height、background-color

<!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>
        div{width: 50%; height: 100px;background-color: red;}
        span{ background-color: aqua;}
    </style>
</head>
<body>
    <div>这是一个块</div>
    <div>又是一个块</div>
    <span>这是一个内联</span>
</body>
</html>

CSS注释：快捷键->shift+alt+a
/* CSS注释的内容 */

二、CSS样式的引入方式

（1）内联（行内、行间）样式：

在html标签上添加style属性来实现

（2）内部样式：

在< style>标签内添加样式，内部样式的优点是可以复用代码

<!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>
        div{width: 100px;height: 100px;background:red}
    </style>
</head>
<body>
  <!--  <div style="width: 100px;height: 100px;background:red" >内联样式</div> -->
  <div>内部样式</div>
</body>
</html>

（3）外部样式：

引入一个单独的CSS文件，name.css

方式一< link>标签：
rel属性->指定引入的外部资源跟页面的关系

href属性->引入外部资源的地址
方式二@import：有很多问题，不建议使用

<!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">
    <!-- <link rel="stylesheet" href="./外部样式.css"> -->
    <title>Document</title>
    <style>
        @import url('./外部样式.css');
    </style>
</head>
<body>
    <div>外部样式</div>
</body>
</html>

三、CSS中的颜色表示法

（1）单词表示法：

red、blue、green、yellow…

（2）十六进制表示法：

#0000->黑色、#ffff->白色、#ff0000->红色…
（0 1 2 3 4 5 6 7 8 9 a b c d e f）

（3）rgb三原色表示法：

rgb(0,0,0)->黑色、rgb(255,255,255)->白色…
（取值范围：0~255）

提取颜色的下载地址：https://www.baidufe.com/fehelper
提取颜色的工具：
photoshop工具

四、CSS背景样式

（1）backgrouond-color：背景颜色

（2）backgrouond-image：背景图片

url（背景地址）
默认：会水平垂直都铺满背景图

（3）backgrouond-repeat：背景图片的平铺方式

repeat-x：x轴平铺
repeat-y：y轴平铺
repeat：x、y都进行平铺，默认值
no-repeat：都不平铺

（4）backgrouond-position：背景图片的位置

x、y：number（px、%）
单词
x：left、center、right
y：top、center、bottom

（5）backgrouond-attachment：背景图随滚动条的移动方式

scroll：默认值，背景图随滚动条一起移动（背景位置是按照当前元素进行偏移）
fixed：背景图不随滚动条一起移动（背景位置是按照浏览器进行偏移）

<!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>
        body{height: 2000px;}
        div{width: 600px;height: 600px;background-color: blue;
            background-image:url(./背景样式.jpg) ;
            background-repeat: repeat-x;
            background-position: right bottom;
            background-attachment: scroll;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

视觉差网站练习

<!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>
        #div1{width: 1400px;height: 800px;background-image: url(./背景样式1.jpg);background-attachment: fixed;}
        #div2{width: 1400px;height: 800px;background-image: url(./背景样式2.jpg);background-attachment: fixed}
        #div3{width: 1400px;height: 800px;background-image: url(./背景样式3.jpg);background-attachment: fixed}
    </style>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
</body>
</html>

五、CSS边框样式

（1）border-style：边框的样式

solid：实线
dashed：虚线
dotted：点线

（2）border-width：边框的大小

px…

（3）border-color：边框的颜色

red、#f00…

<!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>
        /* div{width: 300px;height: 300px;border-style: solid;border-color: aqua;} */
         div{width: 300px;height: 300px;border-style: dashed;border-color: aqua;}
         /* div{width: 300px;height: 300px;border-right-style: dotted;border-right-width: 10px; border-right-color: aqua;} */
    </style>
</head>
<body>
    <div></div>
</body>
</html>

tupian

注：针对某一条进行单独设置
border-left-style：中间是方向 left、right、top、bottom

div{width: 300px;height: 300px;
border-right-style: dotted;
border-right-width: 10px; 
border-right-color: aqua;}

练习：利用边框实现三角形
透明颜色：transparent

<!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>
        body{background-color: aqua;}
        div{width: 0px;height: 0px;
            border-top-color: transparent;
            border-top-style: solid;
            border-top-width: 30px;

            border-right-color:yellow;
            border-right-style: solid;
            border-right-width: 30px;

            border-bottom-color: transparent;
            border-bottom-style: solid;
            border-bottom-width: 30px;

            border-left-color: transparent;
            border-left-style: solid;
            border-left-width: 30px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

六、CSS文字样式

（1）font-family：字体类型

英文字体：Arial，‘Times New Roman’…（只支持英文）
中文字体：微软雅黑（默认），宋体…（中英文都支持）
中文字体的英文名称
微软雅黑：‘Microsoft YaHei’、宋体：SimSun…

注：

字体中出现空格的情况必须用引号，例：‘Times New Roman’
多个字体类型的设置目的：防止计算机有的字体识别不出来，多加备选字体

（2）font-size：字体大小

字体默认大小：16px
写法：number（px）、单词（不推荐使用）

注：字体大小一般设为偶数

（3）font-weight：字体粗细

模式：正常（normal）、加粗（bold）
写法：单词（normal、bold）、number（100 200 … 900，其中100-500都是正常的，600-900是加粗）

（4）font-style：字体样式

模式：正常（normal）、斜体（italid）
写法：单词（normal、italid）
注：oblique也是表示斜体
区别：
1、italid 所有带有倾斜字体的可以设置
2、oblique 没有带有倾斜字体的也可以设置

<!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>
        div{font-family:'Times New Roman';}
     </style>
</head>
<body>
    <div>这是一段文字</div>
    <p>这是一段文字</p>
    <div>this is next</div>
    <p>this is next</p>
</body>
</html>

七、CSS段落样式

（1）text-decoration：文本装饰

下划线：underline
删除线：line-through
上划线：overline
不添加任何装饰：none
添加多个文本修饰：通过空格隔开

（2）text-transform：文本大小写（针对英文段落）

大写：lowercase
小写：uppercase
仅针对首字母大写：capitalize

（3）text-indent：文本缩进

首行缩进：默认情况下，一个字符16px
em单位：相对单位，1em永远都是跟字体的大小相同，首行缩进两个字符就是2em，不用管字体是否为默认字体

（4）text-align：文本对齐方式

左对齐：left
右对齐：right
居中对齐：center
两端对齐：justify

（5）line-height：自定义行高

什么是行高：一行文字的高度，上边距和下边距是等价关系。行高由上边距、字体大小和下边距组成

默认行高：不是固定值，根据当前字体的大小在不断变化
取值：number（px）、scale（比例值，跟文字大小成比例）

（6）letter-spacing：定义字间距

（7）word-spacing：定义词间距（针对英文）

（8）强制折行：（针对英文和数字）

word-break：break-all；（非常强烈的折行）
word-wrap：break-word；（不是那么强烈的折行，会产生一些空白区域）

<!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>
       /*  p{width: 300px;text-decoration: underline;} */
      /*  p{text-transform: lowercase;} */
     /*  p{text-indent: 2em;font-size: 18px;} */   /*首行缩进20px,默认情况下一个字是16px，首行缩进2个字符即32px*/
     /* p{text-align: left;} *//* 左对齐 */
     /* p{line-height: 20px;} *//* 自定义行高 */
     /* p{letter-spacing: 5px;}
     p{word-spacing: 10px;} */
     div{width: 300px;height: 300px;border: 1px solid red; word-break: break-all;}
    </style>
</head>
<body>
    <p>CSDN是全球知名中文IT技术交流平台,创建于1999年,包含原创博客、精品问答、职业培训、
        技术论坛、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区</p>
        <p>asAFdhSDFjkhfkjljdSFShfshgafhgDFSFshgfhdfafGAFhdjkfhak</p>
        <div>asAFdhS DFjkhfkjljdSFsffdfsShfshgafhgDFS Fshgfh dfafGA Fhdjk fhak</div>
</body>
</html>

练习

<!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>
        div{width: 800px;}
        h1{text-align: center;color: #ff6600;}
        h2{color: #00a0ff;text-indent: 2em;}
        #p1{font-style: italic;font-weight: 800;text-indent: 2em;}
        #p2{color: #66ff00;line-height: 30px;text-indent: 2em;}
        #p3{color: #00ffff;line-height: 30px;text-indent: 2em; text-decoration: underline;font-style: italic;}
        #p4{font-weight: bold;letter-spacing: 10px;line-height: 30px;text-indent: 2em;}
        #p5{color: #cc00cc;line-height: 30px;text-indent: 2em;}
    </style>
</head>
<body>
    <div>
    <h1>Angelababy简介</h1>
    <h2>基本信息</h2>
    <p id="p1">杨顾(Angelababy ) , 1989年2月28日出生于上海，13岁时移居香港，中国影视女演员。</p>
    <p id="p2">2009年主演电影《全城热恋》，2012年，凭借爱情片《第一次》获得第十三届华语电影传媒大奖“最受瞩目女演员奖”。
        2013年1月，《南都娱乐周刊》举办新生代四小花旦的评选活动，
        杨颖以总分70分的综合得分与刘诗诗、杨幂、倪妮共同当选为新一代“四小花旦”﹔
        同年在徐克导演的影片《狄仁杰之神都龙王》中担任女主角，并且获
        得第21届北京大学生电影节最受欢迎女演员奖;4月，Angelababy主演电视剧《大汉情缘之云中歌》，2014年加盟综艺节目
       《奔跑吧兄弟》并主演电影版﹔同年主演顾长卫导演的电影《微爱之渐入佳境》，票房突破2.8亿。
        2015年5月参演好莱坞电影《独立日2》;7月，主演电影《摆渡人》.</p>
    <h2>早年经历</h2>
    <p id="p3">1989年2月28日，Angelababy出生在上海，中文名标额、标颍自小随家人到上海定居，在上海的演艺学校学演戏
        及跳腥，13岁时，标颖回吉满加入了Talent Bang.还担任Viva Club Disney主持。</p>
    <h2>个人生活</h2>
    <p id="p4">2 0 1 5年5月27日，黄晓明和A n g e l a b a b y （杨颖）在青岛民政局领证完婚。</p>
    <p id="p5">2015年10月8日，黄晓明和Angelababy在上海展览中心正式举办婚礼。上午8点，Angelababy工作室曝光了
        一两人的婚纱照。照片中,两人以巴黎地标建筑为背景，浪漫亲吻。</p>

  </div>

</body>
</html>

八、CSS复合样式

一个CSS属性只控制一种样式，叫做单一样式。一个CSS属性控制多种样式，叫做复合样式。
复合的写法是通过空格的方式实现的
复合写法有的是不需要关心顺序的，例如background、border，有的是需要的，例如font
（1） background：
red url() repeat center
（2）border:
1px red solid
（3）font：
注：
最少要有两个值size family，且两个词的顺序不能改变，还要放在最后的位置
weight style size family √
style weight size family √
weight style size/line-height family √

<!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>
        div{width: 800px;height: 800px;
            background: red url(./背景样式1.jpg) no-repeat center;
            /* border: 2px black solid; */
            border-right: 2px blue dashed;
            font:30px 宋体 ;
        }
    </style>
</head>
<body>
    <div>这是一段文字</div>
</body>
</html>

注：尽量不要混写，如果非要混写，那么一定要先写复合样式再写单一样式，否则会出现错误

九、CSS选择器

（1）ID选择器

css：#elem{}
html：id=“elem”

注:
1.在一个页面中，ID值是唯一的。

2.命名规范：由字母、下划线、中划线组成(命名的第一位不能是数字)。

3.命名方式：

驼峰式：
searchButton（小驼峰，第一个单词首字母小写，第二个单词首字母大写）
SearchButton（大驼峰，第一个单词首字母大写，第二个单词首字母也大写）
下划线式：search_small_button
短线式：search-small-button

4.快捷方式：div+#+name+回车

<!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>
        #div1{background: red;}
        #div2{background: blue;}
    </style>
</head>
<body>
    <div id="div1">这是一个块</div>
    <div id="div2">这又是一个块</div>
</body>
</html>

（2）CLASS选择器

css：elem{}
html：class=“elem”

注：
1.class选择器是可以复用的。
2.可以添加多个class样式。
3.多个样式的时候，样式的优先级根据CSS中顺序决定，而不是class属性中的顺序
4.标签+类的写法

p.box{background: red;}/* 只想让p标签生效，不想让div生效，可以用标签+类的写法 */

5.快捷方式：div.name+回车

<!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>
    /* .box{background: red;}
    .content{font-size: 30px;} */
    p.box{background: red;}/* 只想让p标签生效，不想让div生效，可以用标签+类的写法 */
    </style>
</head>
<body>
    <!-- <div class="box">这是一个块</div>
    <div class="box">这又是一个块</div>
    <p class="box"></p>
    -->
    <div class="box content">这是一个块</div>
    <div class="box">这又是一个块</div>
    <p class="box">这是一个段落</p>
</body>
</html>

（3）标签选择器（TAG选择器）

css：div{}
html：< div>< /div>
使用场景：
1：去掉某些标签的默认样式时
2：复杂的选择器中，如层次选择器

（4）群组选择器

css：div，p，span{}
可以通过逗号的方式，给多个不同的选择器添加统一的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>Document</title>
    <style>
        /* div{background: red;} 
        #text{background: red;}
        .title{background: red;} */
        div,#text,.title{background: red;}/* 等价于上面三行，群组选择器 */

    </style>
</head>
<body>
    <div>这是一个块</div>
    <p id="text">这是一个段落</p>
    <h2 class="title">这是一个标题</p>
</body>
</html>

（5）通配选择器

*{ }->div，ul，li，p，h1，h2，…{ }
包含了所有的标签
注：尽量避免使用通配选择器，因为会给所有的标签添加样式
使用场景：去掉所有标签的默认样式时

<!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>
        
        *{border: 1px red solid;}
 
    </style>
</head>
<body>
    <div>这是一个块</div>
    <p id="text">这是一个段落</p>
    <h2 class="title">这是一个标题</p>
</body>
</html>

（6）层次选择器

后代：M N{ }
父子：M>N{ }
兄弟：M~N{ }：当前M下面的所有兄弟N标签
相邻：M+N{ }：当前M相邻的N标签

<!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>
   /*  ul li{border:1px red solid;} */
   /*  ul>li{border:1px red solid;} */
   /* div~h2{border: 1px red solid;} */
   div+h2{background: red;}

    </style>
    
</head>
<body>
   <!--  <ul>
        <li>
            <ul>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </li>
        <li></li>
        <li></li>
    </ul>
    <ol>
        <li></li>
        <li></li>
        <li></li>
    </ol> -->
    <div>这是一个块</div>
    <h2>这是一个标题</h2>
    <h2>这是一个标题</h2>
    <h2>这是一个标题</h2>
    <p>这是一个段落</p>
    <h2>这是一个标题</h2>
    <h2>这是一个标题</h2>
    <h2>这是一个标题</h2>
</body>
</html>

（7）属性选择器

=：完全匹配
*=：部分匹配
^=：起使匹配
$=：结束匹配
[ ][ ]:组合匹配

<!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>
        /* div[class]{background: red;} *//* 选择带有class的添加样式 */
        /* div[class=box]{background: red;} */
        /* div[class=search]{background: red;} *//* 选择class=search的添加样式 */
        /* div[class*=search]{background: red;} *//* 只要有search的都会添加样式 */
        /* div[class^=search]{background: red;} */
        div[class][id]{background: red;}/* 既有class属性又有id属性的才会被添加样式
 */
    </style>
</head>
<body>
    <div>aaaaaaa</div>
    <div class="box" id="elem">aaaaaaa</div>
    <div class="search">aaaaaaa</div>
    <div class="search-button">aaaaaaa</div>
    <div class="button-search">aaaaaaa</div>
</body>
</html>

（8）伪类选择器

css伪类选择器用于向某些元素添加特殊的效果，一般用于初始样式添加不上的时候，用伪类来添加

:link：
访问前的样式（只能添加给a标签）
:visited：
访问后的样式（只能添加给a标签）
:hover：
鼠标移入时的样式（可以添加给所有的标签）
:active：
鼠标按下时的样式（可以添加给所有的标签）

注：
1.如果四个伪类都生效，一定要注意顺序:LVHA。
2.一般网站只这样去设置:a{}（link visited active）、 a:hover{}

<!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>
        /* div{width: 200;height: 200px;background: red;} */
        /* div:hover{background: blue;} *//* 鼠标移入时背景颜色会变成蓝色 */
       /*  a:link{color: red;}
        a:visited{color: blue;}
        a:hover{color: green;}
        a:active{color: yellow;} */
        a{color: gray;}
        a:hover{color: red;}

    </style>
</head>
<body>
    <!-- <div></div> -->
    <a href="#">这是一个链接</a>
</body>
</html>

:after、 :before
通过伪类的方式给元素添加一个文本内容
使用content属性
:checked 、:disabled、:focus
都是针对表单元素的
：nth-of-type()、:nth-child()
1、角标是从1开始的，1表示第一项，2表示第二项
2、还可以表示n值，n值表示0到无穷大
:first-of-type、:first-child
第一个
:last-of-type、:last-child
最后一个
:only-of-type、:only-child
仅在有一个的时候有效果
注：
nth-of-type()、:nth-child()之间的区别
1、type:类型，child：孩子

<!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>
        /* div{width: 200;height: 200px;background: red;} */
        /* div:hover{background: blue;} *//* 鼠标移入时背景颜色会变成蓝色 */

        /* a:link{color: red;}
           a:visited{color: blue;}
           a:hover{color: green;}
           a:active{color: yellow;} */

        /* a{color: gray;}
           a:hover{color: red;} */

        /* div:after{content: "word";color: red;} *//* 可以仅对word这一个单词添加样式 */
        /* :checked{width: 100px;height: 100px;}
           :focus{background: red;}*/

            /* li:nth-of-type(3){background: red;} *//* 不通过id、class,选择li中第三个加背景色 */
           /*  li:nth-of-type(2n){background: red;} *//* 2的倍数会加上背景色 */
           /*  li:nth-of-type(2n+1){background: red;} *//* 奇数会加上背景色，通过n可以实现隔行添加样式 */

           li:nth-child(2){background: red;}/* li的第二个孩子是div不是li，所以就不会有效果 ，这就是与nth-of-type()的区别*/
    </style>
</head>
<body>
    <!-- <div></div> -->
    <!--  <a href="#">这是一个链接</a> -->

    <!-- <div>hello</div> -->
    <!-- <input type="checkbox">
    <input type="checkbox" checked>
    <input type="checkbox" disabled>
    <input type="text"> -->

    <ul>
        <li></li>
        <div>aaaaaaa</div>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>

十、CSS样式继承

文字相关的样式可以被继承

布局相关的样式不能被继承

默认是不能被继承的，但是可以设置继承属性（inherit值）

<!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>
        div{width: 300px;height: 300px;border: 1px red solid;color: red;}
        p{border: inherit;}/* 让p标签能够继承边框的样式 */
    </style>
</head>
<body>
    <div>
        <p>这是一个段落</p>
    </div>
</body>
</html>

十一、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>Document</title>
    <style>
     div{color: red;}
     /* div{color: blue;} *//* 相同样式后写的优先级高 */

    </style>
    <link rel="stylesheet" href="./外部样式.css"><!-- 后引入的方式优先级高
</head> -->
<body>
  <div>这是一个块</div>  
</body>
</html>

单一样式优先级
style行间（内联）>id>class>tag（标签）>*（通配）>继承

<!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>
        /* #elem{color: red;} */
        /* .box{color: blue;} */
        /* div{color: green;} *//* 标签的优先级低于class的优先级 */
        *{color: blueviolet;}/* 标签的优先级高于通配 */
        body{color: bisque;}/* 通配的优先级高于继承 */
    </style>
</head>
<body>
    <!-- <div id="elem" style="color:blue;"></div> -->
    <!-- id的颜色是红色，style的是蓝色，结果会显示蓝色，说明style的优先级高于id -->
    <div id="elem" class="box">这是一个块</div>
    <!-- id的颜色是红色，class的是蓝色，结果会显示红色，说明id的优先级高于class -->
</body>
</html>

注：
style行间（内联）权重->1000
id ->100
class ->10
tag（标签）->1（权重就代表等级）

!important
1、提升样式优先级，非规范方式，不建议使用
2、不能针对继承的属性进行优先级的提升

 #elem{color: aqua !important;} /* 会提升优先级 */

标签+类与单类

div.box{color: aquamarine;}
   .box{color: red;}/* 标签+类的优先级高于单类的优先级 */

群组优先级与单一选择器的优先级相同，靠后写的优先级高（同一等级的前提下）

  div{color: aqua;
  div,p{color: chocolate;}

层次优先级

1、权重比较（等级的比较，不是数值相加的比较）
ul li .box p input{} -> 权重：1+1+10+1+1
.hello span #elem{} ->权重： 10+1+100

2、约分比较(相同等级的约掉）
ul li .box p input{}–> li p input{}
.hello span #elem{}–>#elem{}