前端CSS3(一)

小秦哥 · 3 天前

一、基础认知

1.1 CSS介绍

CSS：层叠样式表(Cascading style sheets)
问题1：CSS作用是什么?
给页面中的HTML标签设置样式
问题2：写在那里?
css写在style标签中，style标签一般写在head标签里面，title标签下面
问题3：怎么写?

1.2 CSS引入方式

内嵌式：CSS 写在style标签中
提示：style标签虽然可以写在页面任意位置，但是通常约定写在 head 标签中

外联式：CSS 写在、个单独的.css文件中
提示：必要通过link标签在网页中引入

行内式：CSS 写在标签的style属性中
提示：不推荐使用，之后会配合js使用

问题：CSS常见三种引入方式的特点区别有哪些(书写位置、作用范围、使用场景)?

二、基础选择器

2.1 选择器的作用

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

2.2 标签选择器

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

2.3 类选择器

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

2.4 id选择器

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

2.5 通配符选择器

结构：*{css属性名：属性值；}
作用：找到页面中全部的标签，设置样式
留意点:
①开辟中使用极少，只会在极特殊环境下才会用到
②在小页面中大概会用于去除标签默认的margin和padding

三、字体和文本样式

3.1 字体样式

1. 字体巨细：font-size

属性名：font-size
取值：数字 + px
留意点：
①谷歌欣赏器默认文字巨细是16px
②单元必要设置，否则无效

2. 字体粗细：font-weight

属性名：font-weight
取值：
关键字：

纯数字:100~900的整百数：

留意点：
①不是全部字体都提供了九种粗细，因此部分取值页面中无变革；
②实际开辟中以：正常、加粗两种取值使用最多。

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

属性名：font-style
取值：
正常(默认值)：normal
倾斜：italic

4.字体类型：font-family

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

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

样式的层叠问题

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

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

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

3.2 文本样式

1. 文本缩进：text-indent

属性名：text-indent
取值：
数字+px
数字+em(推荐：1em=当前标签的font-size的巨细)

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

属性名：text-align
取值：

留意点：假如必要让文本程度居中，text-align属性给文本地点标签(文本的父元素)设置

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

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

3. 文本修饰：text-decoration

属性名：text-decoration
取值：

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

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 ;

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

属性名：
如：文字颜色：color
如：配景颜色：background-color
属性值：

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

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

四、Chrome调试工具

方法：在欣赏器打开的页面空缺处，点击鼠标右键，选择”查抄“

五、综合案例

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>你好</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.小米官网卡片案例-结果图

要求：对于巨细、颜色等具体样式取值，参考结果图上的标注即可

<!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.子女选择器中，选择器与选择器之前通过空格隔开

子代选择器：>

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

2.并集选择器：，

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

3.交集选择器：紧挨着

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

4.hover伪类选择器

作用：选中鼠标悬停在元素上的状态，设置样式
选择器语法：选择器:hover{css}
留意点：伪类选择器选中的元素的某种状态

5.Emmet语法

作用：通过简写语法，快速生成代码
语法：雷同于选择器的写法

<!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
②配景颜色不会影响盒子巨细，而且还能看清盒子的巨细和位置，一般在结构中会习惯先给盒子设置配景颜色

2.配景图片

属性名：background-image（bgi）
属性值：

留意点：
①配景图片中url中可以省略引号
②配景图片默认是在程度和垂直方向平铺的
③配景图片仅仅是指给盒子起到装饰结果，雷同于配景颜色，是不能撑开盒子的

3.配景平铺

属性名：background-repeat(bgr)
属性值：

4.配景位置

属性名：background-position（bgp）
属性值：

留意点：方位名词取值和坐标取值可以混使用，第一个取值表示程度，第二个取值表示垂直

5.配景相干属性连写

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

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

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

6.3 元素显示模式

1.块级元素

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

代表标签：div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer...

2.行内元素

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

3.行内块元素

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

4.元素显示模式转换

目的：改变元素默认的显示特点，让元素符合结构要求
语法：

拓展：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. ......
留意点：可以通过调试工具判断样式是否可以继承

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

2.层叠性

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

综合案例

综合案例(一)

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>

复制代码

3.优先级

优先级-基本测试

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

优先级-权重叠加计算

场景：假如是复合选择器，此时必要通过权重叠加计算方法，判断终极哪个选择器优先级最高会生效。
权重叠加计算公式：(每一级之间不存在进位)

比较规则：
①先比较第一级数字，假如比较出来了，之后的齐备不看
②假如第一级数字雷同，此时再去比较第二级数字，假如比较出来了，之后的齐备不看
③ ......
④假如终极全部数字都雷同，表示优先级雷同，则比较层叠性(谁写在下面，谁说了算!)

留意点：!important假如不是继承，则权重最高，天下第一！

<!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企服之家，中国第一个企服评测及商务社交产业平台。

		自动登录	找回密码
密码			立即注册

前端CSS3(一)

本帖子中包含更多资源

0 个回复

快速回复

楼主热帖

标签云