前端开发前端CSS3(一) - Powered by Discuz! Archiver

小秦哥 发表于 3 天前

前端CSS3(一)

一、基础认知

1.1 CSS介绍

CSS：层叠样式表(Cascading style sheets)
问题1：CSS作用是什么?
        给页面中的HTML标签设置样式
问题2：写在那里?
        css写在style标签中，style标签一般写在head标签里面，title标签下面
问题3：怎么写?
https://i-blog.csdnimg.cn/direct/d7353c5ec918447da5478c08981fee6e.png

1.2 CSS引入方式

内嵌式：CSS 写在style标签中
        提示：style标签虽然可以写在页面任意位置，但是通常约定写在 head 标签中
https://i-blog.csdnimg.cn/direct/256a16eea0e54f21b467de9a80500165.png
外联式：CSS 写在、个单独的.css文件中
        提示：必要通过link标签在网页中引入
https://i-blog.csdnimg.cn/direct/231edea769d54f2c9ff3fd595df5c1ee.pnghttps://i-blog.csdnimg.cn/direct/6c6da42d27614b3e89b9d72498b7c6c1.pnghttps://i-blog.csdnimg.cn/direct/39d6ed668b524028b800fd430a14a7c4.png
行内式：CSS 写在标签的style属性中
        提示：不推荐使用，之后会配合js使用
https://i-blog.csdnimg.cn/direct/4bce62f0f3e044428f8e622b379c7839.png

问题：CSS常见三种引入方式的特点区别有哪些(书写位置、作用范围、使用场景)?
https://i-blog.csdnimg.cn/direct/8d72212a43814aa9be47919336e09f87.png

二、基础选择器

2.1 选择器的作用

选择器的作用：选择页面中对应的标签(找)，方便后续设置样式(改)

2.2 标签选择器

结构：标署名 {css属性名：属性；}
作用：通过标署名，找到页面中全部这类标签，设置样式
留意点：
        ①标签选择器选择的是一类标签，而不是单独某一个
        ②标签选择器无论嵌套关系有多深，都能找到对应的标签
https://i-blog.csdnimg.cn/direct/1d39a1bc64aa430c86d31a146e4ebc15.png

2.3 类选择器

结构：.类名 {css属性名：属性值；}
作用：通过类名，找到页面中全部带有这个类名的标签，设置样式
留意点：
①全部标签上都有class属性，class属性的属性值称为类名(雷同于名字)
②类名可以由数字、字母、下划线、中划线组成，但不能以数字大概中划线开头
③一个标签可以同时有多个类名，类名之间以空格隔开
④类名可以重复，一个类选择器可以筒时选中多个标签
https://i-blog.csdnimg.cn/direct/bd05feca955b4072be351007dcc784ac.png

2.4 id选择器

结构：#id属性值 {css属性名：属性值；}
作用：通过id属性值，找到页面中带有这个id属性值的标签，设置样式
留意点：
        ①全部标签上都有id属性
        ②id属性值雷同于身份证号码，在一个页面中是唯一的，不可重复的!
        ③一个标签上只能有一个id属性值
        ④一个id选择器只能选中一个标签
https://i-blog.csdnimg.cn/direct/403b88a0e59b4ac0927de4e0c565e300.png

2.5 通配符选择器

结构：*{css属性名：属性值；}
作用：找到页面中全部的标签，设置样式
留意点:
        ①开辟中使用极少，只会在极特殊环境下才会用到
        ②在小页面中大概会用于去除标签默认的margin和paddinghttps://i-blog.csdnimg.cn/direct/926228aa2c0c450498fa9fda8b0c9118.png
https://i-blog.csdnimg.cn/direct/4fcb0d38f5a64419adb5e0ec1857d39c.png

三、字体和文本样式

3.1 字体样式

1. 字体巨细：font-size

属性名：font-size
取值：数字 + px
留意点：
        ①谷歌欣赏器默认文字巨细是16px
        ②单元必要设置，否则无效
https://i-blog.csdnimg.cn/direct/1da9738a4f5446739fd23b4ff7f3e0cd.png

2. 字体粗细：font-weight

属性名：font-weight
取值：
        关键字：
https://i-blog.csdnimg.cn/direct/8c6a1207316945bfa4f7cb442aaee000.png
        纯数字:100~900的整百数：
https://i-blog.csdnimg.cn/direct/6adfd5cf87234efeafa0f2958fe63634.png
留意点：
①不是全部字体都提供了九种粗细，因此部分取值页面中无变革；
        ②实际开辟中以：正常、加粗两种取值使用最多。
https://i-blog.csdnimg.cn/direct/665de34e44f349dcac657d1e5e8d9120.png
https://i-blog.csdnimg.cn/direct/556fd5f782554838a1af3071dfcec6aa.png

3. 字体样式：font-style(是否倾斜)

属性名：font-style
取值：
        正常(默认值)：normal
        倾斜：italic
https://i-blog.csdnimg.cn/direct/fb272a54242141ac92d862e32417d85f.png
https://i-blog.csdnimg.cn/direct/2c5e74a7a3a240c89e1965292047cd02.png

4.字体类型：font-family

属性名：font-family
常见取值：具体字体1,具体字体2,具体字体3,具体字体4..,字体系列
        具体字体："Microsoft YaHei"、微软雅黑、黑体、宋体、楷体等......
        字体系列：sans-serif、serif、monospace等......
渲染规则：
        1. 从左往右按照次序查找，假如电脑中未安装该字体，则显示下一个字体
        2. 假如都不支持，此时会根据操作系统，显示最后字体系列的默认字体
留意点:
        ①假如字体名称中存在多个单词，推荐使用引号包裹
        ②最后一项字体系列不必要引号包裹
        ③网页开辟时，尽量使用系统常见自带字体，包管不同用户欣赏网页都可以正确显示
https://i-blog.csdnimg.cn/direct/8c64246ec08a4ecca57f9863eaf8f411.png

常见字体系列(了解)
无衬线字体(sans-serif)
1. 特点：文字笔画粗细匀称，而且首尾无装饰
2. 场景：网页中大多接纳无衬线字体
3. 常见该系列字体：黑体、Arial
衬线字体(serif)
1.特点：文字笔画粗细不均，而且首尾有笔锋装饰
2. 场景：报刊册本中应用广泛
3.常见该系列字体：宋体、Times New Roman
等宽字体(monospace)
1. 特点：每个字母或文字的宽度相等
2. 场景：一般用于程序代码编写，有利于代码的阅读和编写
3. 常见该系列字体：Consolas、fira code
https://i-blog.csdnimg.cn/direct/0993cdd8e8754d8f915f518de386a339.png
https://i-blog.csdnimg.cn/direct/61746ed941a740e2b923e154f6f75815.png

样式的层叠问题

问题：给同一个标签设置了雷同的样式，此时欣赏器会如何渲染呢?
结果：假如给同一个标签设置了雷同的属性，此时样式会层叠(覆盖)，写在最下面的会生效
TIP:
        CSS(Cascading style sheets) 层叠样式表
        所谓的层叠即叠加的意思，表示样式可以一层一层的层叠覆盖
https://i-blog.csdnimg.cn/direct/9dc2a4f32492442b81696759a44242c1.png

5. 字体类型：font属性连写

属性名：font(复合属性)
取值：font : style weight size family；
省略要求:
        只能省略前两个，假如省略了相称于设置了默认值
留意点：假如必要同时设置单独和连写形式
        要么把单独的样式写在连写的下面
        要么把单独的样式写在连写的里面
https://i-blog.csdnimg.cn/direct/9d8be0db1a93496881406a794897d33a.png

3.2 文本样式

1. 文本缩进：text-indent

属性名：text-indent
取值：
数字+px
        数字+em(推荐：1em=当前标签的font-size的巨细)
https://i-blog.csdnimg.cn/direct/45c3b9961c5744bb93975d0105eaa932.png
https://i-blog.csdnimg.cn/direct/d3ff623a0ca64035b3313187b55cfd01.png

2. 文本程度对齐方式：text-align

属性名：text-align
取值：
https://i-blog.csdnimg.cn/direct/1111d8945d72471fa035d08fa32fa827.pnghttps://i-blog.csdnimg.cn/direct/928e77b9ebee4982a8b8b28ab7e314ec.png
留意点：假如必要让文本程度居中，text-align属性给文本地点标签(文本的父元素)设置

程度居中方法总结 text-align：center

text-align：center能让哪些元素程度居中?
1. 文本
2.span标签、a标签
3.input标签、img标签
留意点：假如必要让以上元素程度居中， text-align：center 必要给以上元素的父元素设置
https://i-blog.csdnimg.cn/direct/c80acf3401964b31acf9b69b795cf390.png

3. 文本修饰：text-decoration

属性名：text-decoration
取值：
https://i-blog.csdnimg.cn/direct/5bf61b7ec3ed4d1aabe9fbe62374db42.png

https://i-blog.csdnimg.cn/direct/7fa6b713f63f47fd946d744cc7165bc0.png

留意点：开辟中会使用 text-decoration:none；清除a标签默认的下划线

https://i-blog.csdnimg.cn/direct/a19d420e61be4bacb16943f9dfd75652.pnghttps://i-blog.csdnimg.cn/direct/32d912452d3c410cb18dac07ddd66f6e.png

3.3 line-height行高

作用：控制一行的上下行间距
属性名：line-height
取值：
        数字+px
        倍数(当前标签font-size的倍数)
应用：
1.让单行文本垂直居中可以设置 line-height：文字父元素高度
2.网页精准结构时，会设置 line-height：1 可以取消上下间距（line-height：1 表示行高是1倍，即字号巨细）
行高与font连写的留意点：
        假如同时设置了行高和font连写，留意覆盖问题
        font : style weight size/line-height family ;
https://i-blog.csdnimg.cn/direct/03a24034ab51416bbe32eaee0570d3f4.png
https://i-blog.csdnimg.cn/direct/0e77b8510ff34cd88bf09dbd40247bb9.png

拓展：颜色常见取值(了解)

属性名：
        如：文字颜色：color
        如：配景颜色：background-color
属性值：
https://i-blog.csdnimg.cn/direct/9ee58db5e91d4d7e91355e265a4b6c99.png

拓展：标签程度居中方法总结 margin：0 auto

问题：假如必要让div、p、h(大盒子)程度居中?
        可以通过margin：0 auto；实现
留意点：
        ①假如必要让 div、p、h(大盒子)程度居中，直接给当前元素本身设置即可
        ②margin：0 auto 一般针对于固定宽度的盒子，假如大盒子没有设置宽度，此时会默认占满父元素的宽度

四、Chrome调试工具

方法：在欣赏器打开的页面空缺处，点击鼠标右键，选择”查抄“
https://i-blog.csdnimg.cn/direct/f5f73a1c86374c4f9f5151661dfff98d.png
https://i-blog.csdnimg.cn/direct/62ed97e991174fd7bc77948a70bd6f3a.png

五、综合案例

1.消息网页案例-结果图

要求：对于巨细、颜色等具体样式取值，参考结果图上的标注即可
https://i-blog.csdnimg.cn/direct/89d6f5ced4e94328ac6a706a42c126df.png
<!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>你好</title>
<style>
   div {
         width: 800px;
         height: 600px;
         margin: 0 auto;
   }

   .center {
         text-align: center;
   }

   .color1 {
         color: #808080;
   }

   .color2 {
         color: #87ceeb;
         font-weight: 700;
   }

   a {
         text-decoration: none;
   }

   .indent {
         text-indent: 2em;
   }
</style>
</head>

<body>
<div>
   <h1 class="center">《自然》评选改变科学的10个计算机代码项目</h1>
   <p class="center">
         <span class="color1">2077年01月28日14:58</span>
         <span class="color2">新浪科技</span>
         <a href="#">收藏本文</a>
   </p>
   <hr />
   <p class="indent">
         2019年，事件视界望远镜团队让世界首次看到了黑洞的样子。不过，研究人员公布的这张发光环形物体的图像并不是传统的图片，而是经过计算获得的。利用位于美国、墨西哥、智利、西班牙和南极地区的射电望远镜所得到的数据，研究人员进行了数学转换，最终合成了这张标志性的图片。研究团队还发布了实现这一壮举所用的编程代码，并撰文记录这一发现，其他研究者也可以在此基础上进一步加以分析。
   </p>
   <p class="indent">
         这种模式正变得越来越普遍。从天文学到动物学，在现代每一项重大科学发现的背后，都有计算机的参与。美国斯坦福大学的计算生物学家迈克尔·菜维特因"为复杂化学系统创造了多尺度模型”与另两位研究者分享了2013 年诺贝尔化学奖，他指出，今天的笔记本电脑内存和时钟速度是他在1967年开始获奖工作时实验室制造的计算机的1万倍。“我们今天确实拥有相当可观的计算能力，"他说，“问题在于，我们仍然需要思考。"
   </p>
   <p class="indent">
         如果没有能够解决研究问题的软件，以及知道如何编写并使用软件的研究人员，一台计算机无论再强大，也是毫无用处的。如今的科学研究从根本上已经与计算机软件联系在一起，后者已经渗透到研究工作的各个方面。近日，《自然》(Nature)杂志将目光投向了幕后，着眼于过去几十年来改变科学研究的关键计算机代码，并列出了其中10个关键的计算机项目。
   </p>
   <p class="indent">
         最初的现代计算机并不容易操作。当时的编程实际上是手工将电线连接成一排排电路来实现的。后来出现了机器语言和汇编语言，允许用户用代码为计算机编程，但这两种语言都需要对计算机的架构有深入的了解，使得许多科学家难以掌握。20世纪50年代，随着符号语言的发展，特别是由约翰·巴克斯及其团队在加州圣何塞的IBM开发的“公式翻译”语言Fortran，这种情况发生了变化。利用Fortran，用户可以用人类可读的指令来编程，例如x = 3 +5。然后由编译器将这些指令转换成快速、高效的机器代码。
   </p>
</div>
</body>

</html>
2.小米官网卡片案例-结果图

要求：对于巨细、颜色等具体样式取值，参考结果图上的标注即可
https://i-blog.csdnimg.cn/direct/8d3d1d706e6f47e8a1ca42ab4008af0f.png
<!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>你好</title>
<style>
   body {
         background-color: #f5f5f5;
   }

   .goods {
         width: 234px;
         height: 300px;
         background-color: red;
         /* 让标签div居中 */
         margin: 0 auto;
         /* 让内容居中 */
         text-align: center;
   }

   img {
         width: 160px;
   }
   /* 产品标题 */

   .title {
         font-size: 14px;
         line-height: 25px;
   }

   .info {
         color: #ccc;
         font-size: 12px;
         line-height: 30px;
   }

   .money {
         font-size: 14px;
         color: #ffa500;
   }
</style>
</head>

<body>

<div class="goods">
   <img src="./images/car.jpg" alt="" />
   <div class="title">九号平衡车</div>
   <div class="info">成年人的玩具</div>
   <div class="money">1999元</div>
</div>
</body>

</html>
六、CSS进阶

6.1 选择器进阶

1.复合选择器

子女选择器：空格

作用：根据 HTML 标签的嵌套关系，选择父元素子女中满意条件的元素
选择器语法：选择器1 选择器2 { css }
结果：
        在选择器1所找到标签的子女(儿子、孙子、重孙子...)中，找到满意选择器2的标签，设置样式
留意点：
1.子女包括：儿子、孙子、重孙子...
2.子女选择器中，选择器与选择器之前通过空格隔开
https://i-blog.csdnimg.cn/direct/e63a1462e6c74692960c379ec492e6ce.png

子代选择器：>

作用：根据 HTML 标签的嵌套关系，选择父元素子代中满意条件的元素
选择器语法：选择器1 >选择器2{ css }
结果：在选择器1所找到标签的子代(儿子)中，找到满意选择器2的标签，设置样式
留意点：
        1. 子代只包括：儿子
        2.子代选择器中，选择器与选择器之前通过 > 隔开
https://i-blog.csdnimg.cn/direct/4fb769d5d2414571b5d14775f445ff78.png

2.并集选择器：，

作用：同时选择多组标签，设置雷同的样式
选择器语法：选择器1，选择器2{css}
结果：找到选择器1 和选择器2 选中的标签，设置样式
留意点:
①并集选择器中的每组选择器之间通过，分隔
② 并集选择器中的每组选择器可以是基础选择器大概复合选择器
③ 并集选择器中的每组选择器通常一行写一个，提高代码的可读性
https://i-blog.csdnimg.cn/direct/f085ab30991f420ebad95306e9d7fbfe.png

3.交集选择器：紧挨着

作用：选中页面中同时满意多个选择器的标签
选择器语法：选择器1选择器2 {css}
结果：(既又原则)找到页面中既能被选择器1选中，又能被选择器2选中的标签，设置样式
留意点：
①交集选择器中的选择器之间是紧挨着的，没有东西分隔
②交集选择器中假如有标签选择器，标签选择器必须写在最前面
https://i-blog.csdnimg.cn/direct/530a87d103b6492bb59679bb1e742232.png

4.hover伪类选择器

作用：选中鼠标悬停在元素上的状态，设置样式
选择器语法：选择器:hover{css}
留意点：伪类选择器选中的元素的某种状态
https://i-blog.csdnimg.cn/direct/b4988ad278b848b59bd185c05b260b76.png

5.Emmet语法

作用：通过简写语法，快速生成代码
语法：雷同于选择器的写法
https://i-blog.csdnimg.cn/direct/e9b6c596f52841cc8231795cd8c46a08.png


<!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>你好</title>
<style></style>
</head>

<body>
<div></div>
<h1></h1>


<div class="box"></div>
<p class="box"></p>

<div id="box"></div>
<p id="box"></p>

<p class="red" id="one"></p>


<div></div>
<p></p>


<div>
   <p></p>
</div>

<ul>
   <li></li>
</ul>


<ul>
   <li></li>
   <li></li>
   <li></li>
</ul>



<ul>
   <li>111</li>
   <li>111</li>
   <li>111</li>
</ul>



<ul>
   <li>1</li>
   <li>2</li>
   <li>3</li>
</ul>
</body>

</html>
6.2 配景相干属性

1.配景颜色

属性名：background-color(bgc)
属性值：颜色取值：关键字、rgb表示法、rgba表示法、十六进制...
留意点：
①配景颜色默认值是透明：rgba(0,0,0,0)、transparent
②配景颜色不会影响盒子巨细，而且还能看清盒子的巨细和位置，一般在结构中会习惯先给盒子设置配景颜色
https://i-blog.csdnimg.cn/direct/7d692f5089034623a80daeaf90b751f2.png
https://i-blog.csdnimg.cn/direct/1ea5107f5cf5446db5ac9e1bb7bddc28.png

2.配景图片

属性名：background-image（bgi）
属性值：https://i-blog.csdnimg.cn/direct/1962ca47556c48a2a3edba317c95009c.png
留意点：
①配景图片中url中可以省略引号
        ②配景图片默认是在程度和垂直方向平铺的
        ③配景图片仅仅是指给盒子起到装饰结果，雷同于配景颜色，是不能撑开盒子的
https://i-blog.csdnimg.cn/direct/2e701b49d91b4c49acac0ab46d09a884.png
https://i-blog.csdnimg.cn/direct/bfccdfe744314fb293a8afe18eb8ea00.png

3.配景平铺

属性名：background-repeat(bgr)
属性值：
https://i-blog.csdnimg.cn/direct/588910baa0d647d3b75d1bfd3afd2b1d.pnghttps://i-blog.csdnimg.cn/direct/9e093259b2cc40c7aad3310465627063.png
https://i-blog.csdnimg.cn/direct/9920b276698646ed894b804980b0e1e8.png

4.配景位置

属性名：background-position（bgp）
属性值：https://i-blog.csdnimg.cn/direct/d57f4b5e97c34ecf8d48ec4d98753373.png
https://i-blog.csdnimg.cn/direct/d48e0b46c22845f8a4269c71020b561b.png
留意点：方位名词取值和坐标取值可以混使用，第一个取值表示程度，第二个取值表示垂直
https://i-blog.csdnimg.cn/direct/5d526ed32c7f4a0ca9a4c510cfa70b74.png

5.配景相干属性连写

属性名：background (bg)
属性值：单个属性值的合写，取值之间以空格隔开
书写次序：推荐：background：color image repeat position
省略问题:
        可以按照需求省略
        特殊环境：在pc端，假如盒子巨细和配景图片巨细一样，此时可以直接写 background：url()
留意点：
        假如必要设置单独的样式和连写
        ①要么把单独的样式写在连写的下面
        ②要么把单独的样式写在连写的里面
https://i-blog.csdnimg.cn/direct/373d4418b2664471bc83418288233990.png

(拓展) img标签和配景图片的区别

需求：必要在网页中展示一张图片的结果?
方法一：直接写上img标签即可
        img标签是一个标签，不设置宽高默认会以原尺寸显示
方法二：div标签 +配景图片
        必要设置div的宽高，因为配景图片只是装饰的CSS样式，不能撑开div标签
重要的图片用img，不重要的用background:url()
https://i-blog.csdnimg.cn/direct/8eb3b23a5128426cbf8dbe840b92b295.png
https://i-blog.csdnimg.cn/direct/3bda647779df469f8abfbc624f48075f.png

6.3 元素显示模式

1.块级元素

显示特点：
① 独占一行(一行只能显示一个)
②宽度默认是父元素的宽度，高度默认由内容撑开
        ③可以设置宽高

代表标签：div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer...
https://i-blog.csdnimg.cn/direct/6257ebe97c6846b08fda7681208dc6c3.png
https://i-blog.csdnimg.cn/direct/33b69d2bd3fa48709f6c7505d078f134.png

2.行内元素

显示特点：
        ①一行可以显示多个；
        ②宽度和高度默认由内容撑开；
        ③不可以设置宽高。
代表标签：a、span、b、u、i、s、strong、ins、em、del...
https://i-blog.csdnimg.cn/direct/6d82cd50634247d2a75223fc6a183600.png

3.行内块元素

显示特点：
        ①一行可以显示多个
        ②可以设置宽高
代表标签:
        input、textarea、button、select.....
        特殊环境：img标签有行内块元素特点，但是Chrome调试工具中显示结果是inline
https://i-blog.csdnimg.cn/direct/a555420be8494358b348073aafae8e0b.png

4.元素显示模式转换

目的：改变元素默认的显示特点，让元素符合结构要求
语法：
https://i-blog.csdnimg.cn/direct/e80d2208cd574bc4b7abd18f22803f67.png
https://i-blog.csdnimg.cn/direct/2a51657e70f14df3813f3750b0636c01.png

拓展：HTML嵌套规范留意点

1.块级元素一般作为大容器，可以嵌套：文本、块级元素、行内元素、行内块元素等等......
        但是：p标签中不要嵌套div、p、h等块级元素
2. a标签内部可以嵌套任意元素
        但是：a标签不能嵌套a标签

6.4 CSS特性

1.继承性

继承性的介绍
特性：子元素有默认继承父元素样式的特点(子承父业)
可以继承的常见属性(文字控制属性都可以继承）
1. color
2. font-style、font-weight、font-size、font-family
3. text-indent、text-align
4.line-height
5. ......
留意点：可以通过调试工具判断样式是否可以继承
https://i-blog.csdnimg.cn/direct/db8a6384a678400293bbfb0a027fdfed.png
https://i-blog.csdnimg.cn/direct/393d889a26944c0093785a0b4975908a.png

(拓展)继承失效的特殊环境
假如元素有欣赏器默认样式，此时继承性依然存在，但是优先显示欣赏器的默认样式
①a标签的color会继承失效；②h系列标签的font-size会继承失效
https://i-blog.csdnimg.cn/direct/34df57d87da54f8885718d168d551bcf.png

2.层叠性

特性：
        ①给同一个标签设置不同的样式 → 此时样式会层叠叠加 → 会共同作用在标签上
        ②给同一个标签设置雷同的样式 → 此时样式会层叠覆盖→ 终极写在最后的样式会生效
留意点：当样式辩论时，只有当选择器优先级雷同时，才能通过层叠性判断结果
https://i-blog.csdnimg.cn/direct/eb89f9de1dfe4fad9df33087a59f37a9.png

综合案例

综合案例(一)

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>你好</title>
<style>
   /* a显示模式是行内，加宽高默认不生效，转显示模式：行内块 */

   a {
         text-decoration: none;
         width: 100px;
         height: 50px;
         background-color: red;
         display: inline-block;
         color: #fff;
         text-align: center;
         line-height: 50px;
   }

   a:hover {
         background-color: orange;
   }
</style>
</head>

<body>
<a href="#">导航1</a>
<a href="#">导航2</a>
<a href="#">导航3</a>
<a href="#">导航4</a>
<a href="#">导航5</a>
</body>

</html>
综合案例(二)


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a {
   width: 120px;
   height: 58px;
   background-color: pink;

   /* 转换成行内块元素 */
   display: inline-block;
   /* 文本水平居中 */
   text-align: center;
   /* 文本垂直居中 */
   line-height: 50px;
   /* 文字文本修饰 */
   text-decoration: none;
   color: #fff;
}

.one {
   background: url('./images/bg1.png');
}
.two {
   background: url('./images/bg2.png');
}
.three {
   background: url('./images/bg3.png');
}
.four {
   background: url('./images/bg4.png');
}

.one:hover {
   background: url('./images/bg5.png');
}
.two:hover {
   background: url('./images/bg6.png');
}
.three:hover {
   background: url('./images/bg7.png');
}
.four:hover {
   background: url('./images/bg8.png');
}

</style>
</head>
<body>
<a href="#" class="one">五彩导航</a>
<a href="#" class="two">五彩导航</a>
<a href="#" class="three">五彩导航</a>
<a href="#" class="four">五彩导航</a>
</body>
</html> https://i-blog.csdnimg.cn/direct/1b4ea9b08c9848eba9116e7cd346a09d.png
3.优先级

优先级-基本测试

特性：不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器样式
优先级公式：
继承 < 通配符选择器(*) <标签选择器 <类选择器<id选择器<行内样式< !important
留意点:
        ① !important写在属性值的反面，分号的前面!
        ② !important不能提升继承的优先级，只要是继承优先级最低!
        ③实际开辟中不发起使用 !important
https://i-blog.csdnimg.cn/direct/b1a82b9ed6cc4db68014fceb0428901e.png

优先级-权重叠加计算

场景：假如是复合选择器，此时必要通过权重叠加计算方法，判断终极哪个选择器优先级最高会生效。
权重叠加计算公式：(每一级之间不存在进位)
https://i-blog.csdnimg.cn/direct/57c5135d31c94d17aa392591e74f5b65.png
比较规则：
①先比较第一级数字，假如比较出来了，之后的齐备不看
②假如第一级数字雷同，此时再去比较第二级数字，假如比较出来了，之后的齐备不看
③ ......
④假如终极全部数字都雷同，表示优先级雷同，则比较层叠性(谁写在下面，谁说了算!)

留意点：!important假如不是继承，则权重最高，天下第一！
https://i-blog.csdnimg.cn/direct/ea8a77e0b7ee458193ed72ba6c3e351b.png
https://i-blog.csdnimg.cn/direct/d703b1b655254c11962572d3d47c6f9a.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第1题：普通题</title>
<style>
/* (行内, id, 类, 标签) */
/* !important 最高 */
/* 继承: 最低 */

/* (0, 2, 0, 0) */
#father #son {
color:blue;
}

/* (0, 1, 1, 1) */
#father p.c2 {
color:black;
}

/* (0, 0, 2, 2) */
div.c1 p.c2 {
color:red;
}

/* 继承, 最低 */
#father {
color:green !important;
}

/* 继承, 最低 */
div#father.c1 {
color: yellow ;
}

</style>
</head>
<body>
<div id="father" class="c1">
<p id="son" class="c2">
这行文本是什么颜色的？
</p>
</div>
</body>
</html> <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第2题: 标签选择器选择一类</title>
<style>
/* (行内, id, 类, 标签) */
/* !important 最高 */
/* 继承: 最低 */

/* (0,0,0,2) */
   div div {
color: skyblue;
}

/* (0,0,0,1) */
div {
color: red;
}
</style>
</head>
<body>
<div>
<div>
<div>
这行文本是什么颜色？
</div>
</div>
</div>
</body>
</html> <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第3题: 权重叠加每位不存在进制</title>
<style>
/* (行内, id, 类, 标签) */
div div div div div div div div div div div div {
color: red;
}

.one {
color: pink;
}
</style>
</head>
<body>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div class="one">这行文字是什么颜色的？</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html> <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第4题：权重相同此时比较层叠性</title>
<style>
/* (0, 0, 2, 1) */
.c1 .c2 div {
color: blue;
}

/* (0, 1, 0, 1) */
div #box3 {
color:green;
}

/* (0, 1, 0, 1) */
#box1 div {
color:yellow;
}
</style>
</head>
<body>
<div id="box1" class="c1">
<div id="box2" class="c2">
<div id="box3" class="c3">
这行文本是什么颜色的？
</div>
</div>
</div>
</body>
</html> <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第5题: 全是继承的特殊情况</title>
<style>
/* 都是继承, 继承里面谁高, 看继承哪个父级, 哪个父级高, 哪个选择器生效 */

/* 继承 */
div p {
color:red;
}

/* 继承 */
.father {
color:blue;
}
</style>
</head>
<body>
<div class="father">
<p class="son">
<span>文字</span>
</p>
</div>
</body>
</html>

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

页: [1]

ToB企服应用市场:ToB评测及商务社交产业平台's Archiver

前端CSS3(一)