前端学习从入门到高级全程记录之3 （CSS基础知识）

最新推荐文章于 2023-04-29 12:00:00 发布
最新推荐文章于 2023-04-29 12:00:00 发布
阅读量337 收藏 1
点赞数
分类专栏： 前端 HTML CSS 文章标签： HTML 前端 CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhangbobo1997/article/details/97277947
版权
前端 同时被 3 个专栏收录
31 篇文章 0 订阅
订阅专栏
HTML
20 篇文章 0 订阅
订阅专栏
CSS
18 篇文章 0 订阅
订阅专栏

本次学习目标

从今天开始我们要学习CSS的知识了，前面HTML知识还比较生疏的同学别忘了复习。

本次学习目标：

  1. 学会使用CSS选择器
  2. 熟记CSS样式和外观属性
  3. 熟练掌握CSS各种选择器
  4. 熟练掌握CSS三种显示模式
  5. 熟练掌握CSS背景属性
  6. 熟练掌握CSS三大特性
  7. 熟练掌握CSS盒子模型
  8. 熟练掌握CSS浮动
  9. 熟练掌握CSS定位
  10. 熟练掌握CSS高级技巧强化CSS typora-copy-images-to：media

1.CSS的发展历程

从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。

随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能，但是随着这些功能的增加，HTML变的越来越杂乱，而且HTML页面越来越来臃肿，于是CSS便诞生了。

2.CSS–网页的美容师

CSS的出现，拯救了混乱的HTML，当然更加拯救了我们Web开发者。让我们的网页更加丰富多彩。

CSS的最大贡献就是：让HTML从样式中解脱，实现了HTML专注去做结构呈现，而样式交给CSS后，你可以完全放心干其他事了。

3.CSS初识

CSS（Cascading Style Sheets）美化样式

CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式：

CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。

4.引入CSS样式表（书写位置）

CSS可以写到哪个位置？是不是一定写道html文件里面呢？

行内式（内联样式）
内联样式，又有人称行内样式、行间样式、内嵌样式。是通过标签的style属性来设置元素的样式，其基本语法格式如下：

<标签名 style="属性1：属性值1；属性2：属性值2；属性3：属性值3；">内容</标签名>

语法中style是标签的属性，实际上任何HTML标签都拥有style属性，用来设置行内式。其中属性和值的书写规范与CSS样式规则相同，行内式只对其所在的标签及嵌套在其中的子标签起作用。
做一下练习：

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<title>Document</title>
</head>
<body>
	<h3 style="color: red; font-size: 50px;">青春不常在，抓紧谈恋爱</h3>
	<h3 style="color: red; font-size: 50px;">青春不常在，抓紧谈恋爱</h3>
	<h3 style="color: red; font-size: 50px;">青春不常在，抓紧谈恋爱</h3>
</body>
</html>

内部样式表
内嵌式是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义，其基本语法格式如下：

<head>
<style type="text/CSS">
  选择器{属性1：属性值1；属性2：属性值2；属性3：属性值3；}
</style>
</head>

做一下练习

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<title>Document</title>
	<style>
	    /*选择器就是选择标签的*/
		h3{
			color: blue;
			font-size: 50px;/*设置字的大小*/
		}
	</style>
</head>
<body>
	<h3>青春不常在，抓紧谈恋爱</h3>
	<h3>青春不常在，抓紧谈恋爱</h3>
	<h3>青春不常在，抓紧谈恋爱</h3>
</body>
</html>

内部式可以整体的改变样式，比行内式更加方便。
再练习一个小例子：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		h4 {
			color: deeppink;
		}
		p {
			color: #036;
		}
		h3 {
			color: green;
		}
		div {
			color: orange;
		}
	
	</style>
	<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h3>忆江南(1)</h3>

<div>唐.白居易</div>

<p>江南好，风景旧曾谙。(2) 日出江花红胜火，春来江水绿如蓝，(3) 能不忆江南。</p>

<h4>作者介绍</h4>

<p>白居易(772－846) ，字乐天，太原(今属山西)人。唐德宗朝进士，元和三年(808)拜左拾遗，后贬江州(今属江西)司马，移忠州(今属四川)刺史，又为苏州(今属江苏)、同州(今属陕西大荔)刺史。晚居洛阳，自号醉吟先生、香山居士。其诗政治倾向鲜明，重讽喻，尚坦易，为中唐大家。也是早期词人中的佼佼者，所作对后世影响甚大。</p>

<h4>注释</h4>
<p>
	
(1)据《乐府杂录》，此词又名《谢秋娘》，系唐李德裕为亡姬谢秋娘作。又名《望江南》、《梦江南》等。分单调、双调两体。单调二十七字，双凋五十四字，皆平韵。(2)谙(音安)：熟悉。(3)蓝：蓝草，其叶可制青绿染料。

</p>
<h4>品评</h4>

<p>此词写江南春色，首句“江南好”，以一个既浅切又圆活的“好”字，摄尽江南春色的种种佳处，而作者的赞颂之意与向往之情也尽寓其中。同时，唯因“好”之已甚，方能“忆”之不休，因此，此句又已暗逗结句“能不忆江南”，并与之相关阖。次句“风景旧曾谙”，点明江南风景之“好”，并非得之传闻，而是作者出牧杭州时的亲身体验与亲身感受。这就既落实了“好”字，又照应了“忆”字，不失为勾通一篇意脉的精彩笔墨。三、四两句对江南之“好”进 　行形象化的演绎，突出渲染江花、江水红绿相映的明艳色彩，给人以光彩夺目的强烈印象。其中，既有同色间的相互烘托，又有异色间的相互映衬，充分显示了作者善于著色的技巧。篇末，以“能不忆江南”收束全词，既托出身在洛阳的作者对江南春色的无限赞叹与怀念，又造成一种悠远而又深长的韵味，把读者带入余情摇漾的境界中。</p>
</body>
</html>

好好理解以下内部式。

外部样式表（外联式）
链入式是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中，其基本语法格式如下：

<head>
  <link href="CSS文件的路径" type="text/CSS" rel="stylesheet"/>
</head>

注意：link是个单标签。

该语法中，link标签需要放在head头部标签中，并且必须指定link标签的三个属性，具体如下：

href：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。

type：定义所链接文档的类型，在这里需要指定为"text/CSS"，表示链接的外部文件为CSS文件夹。

rel：定义当前文档与被链接文档之间的关系，在这里需要指定为"stylesheet",表示被链接的文档是一个样式表文件。

做一个练习：新建一个CSS文件夹与html文件同一目录，新建一个CSS文件放入该文件夹。
其中，HTML文件：

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" >
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<link rel="stylesheet" type="text/css" href="CSS/style.css"/>
	<title>Document</title>
</head>
<body>
	<div>
		中华有为
	</div>
	<div>
		中华有为
	</div>
	<div>
		中华有为
	</div>
</body>
</html>

CSS文件：

div{
	color: red;
}

保存并运行，观察结果。

三种是样式表总结
样式表优点缺点使用情况控制范围
行内样式表书写方便，权重高没有实现样式和结构相分离较少控制一个标签（少）
内部样式表部分结构和样式相分离没有彻底分离较多控制一个页面（中）
外部样式表完全实现结构和样式相分离需要引入最多，强烈推荐控制整个站点（多）

5.lable标签

在这里插入图片描述
在平常的时候，我们点击密码框会使光标定位到框内，现在实现这样的效果：点击“密码”也可以定位到密码框内。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<tr>
			<td>
				<label for="a">密码</label>
			</td>
			<td><input type="password" maxlength="6"  id="a"/></td>
		</tr>
	</body>
</html>

6.CSS样式规则

使用HTML时，需要遵从一定的规范：CSS亦如此，要想熟练地使用CSS对网页进行修炼，首先需要了解CSS样式规则，具体格式如下：
在这里插入图片描述
在上面的样式规则中：

1.选择器用于指定CSS样式作用的HTML对象，花括号内是对该对象设置的具体样式。
2.属性和属性值以“键值对”的形式出现。
3.属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等。
4.属性和属性值之间用英文“：”链接。
5.多个“键值对”之间用英文“；”进行区分。可以用段落和表格的对齐的演示。

7.选择器（重点）

要把元素分组，就要用到基础选择器组。

8.CSS基础选择器

标签选择器（元素选择器）

标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式，其基本语法格式如下：

标签名{属性1：属性值1；属性2：属性值2；属性3：属性值3；}或者
元素名{属性1：属性1；属性2：属性值2；属性3：属性值3；}

标签选择器最大的优点是能快速为页面中同类型的标签统一样式，同时这也是他的缺点，不能设计差异化样式：

标签选择器可以把某一类标签全部选择出来，例如：div span

我们之前写的都是标签选择器，div{} 、h3{}等等，这里就不再赘述了。

在这里我推荐三个W3cSchool的离线学习手册，链接：https://pan.baidu.com/s/1Q4KabK47w1sVEo66FoD-Dg 提取码：nszk 解压密码：zhangbobo1997
复制这段内容后打开百度网盘手机App，操作更方便哦

里面的内容对你非常有帮助，当然你也可以访问W3cSchool官网去查看和学习。

类选择器

类选择器使用“.”（英文点号）进行标识，后面紧跟类名，其基本语法格式如下：

.类名{属性1：属性值1；属性2：属性值2；属性3：属性值3；}

标签调用的时候用class=“类名”即可。

类选择器最大的优势是可以为元素对象定义单独或相同的样式。

小技巧
1.长名称或词组可以使用中横线来为选择器命名。

2.不建议使用“_”下划线来命名CSS选择器。

输入的时候少按一个shift键；
浏览器兼容问题（比如使用_tips的选择器命名，在IE6是无效的）；
能良好区分JavaScript变量命名（JS变量命名是用“_”）

3.不要纯数字、中文等命名，尽量使用英文字母来表示。

谷歌案列：
在这里插入图片描述
代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			span{/*标签选择器，让所有的span都变成100px*/
				font-size: 100px;
			}
			.a{
				color: blue;
			}
			.b{
				color: red;
			}
			.c{
				color: yellow;
			}
			.d{
				color: green;
			}
			/*类选择器可以选择一个或者多个标签*/
		</style>
	</head>
	<body>
		<span class="a">G</span>
		<span class="b">o</span>
		<span class="a">o</span>
		<span class="d">g</span>
		<span class="c">l</span>
		<span class="a">e</span>
	</body>
</html>
命名规范

命名规范：见上面百度网盘链接:学习手册。

命名是我们通俗约定的，但是没有规定必须要用这些常用的命名。

多类名选择器

我们可以给标签指定多个类名，从而达到更多的选择目的。
在这里插入图片描述
注意：

1.样式显示结果跟HTML元素中的类名先后顺序没有关系，受CSS样式书写的上下顺序有关。
2.各个类名中间用空格隔开。

做一个练习，在一个标签有多个属性的情况：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.red{
				color: red;
			}
			.font20{
				font-size: 50px;
			}
		</style>
	</head>
	<body>
		<!--有两个类名-->
		<div class="red font20">多类名</div>
		<div>多类名</div>
		<div>多类名</div>
		<div>多类名</div>
		<p class="red">多类名</p>
		<p>多类名</p>
		<p>多类名</p>
		<p>多类名</p>
		<p class="red">多类名</p>
		<div>多类名</div>
		<div>多类名</div>
		<div>多类名</div>
		<div>多类名</div>
	</body>
</html>

在有属性冲突的时候，遵循“后来者居上”的原则，下面做一个练习：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.red{
				color: red;
			}
			.font20{/*这里我多写了一个属性*/
				font-size: 50px;
				color: blue
			}
		</style>
	</head>
	<body>
		<!--有两个类名-->
		<!--这样的话，red将不会显示，而只显示font中的blue-->
		<div class="red font20">多类名</div>
		
		<!--改变顺序还是蓝色，它只看“style”里的顺序，行内的顺序不起作用-->
		<div class="font20 red">多类名</div>
		<div>多类名</div>
		<div>多类名</div>
		<p class="red">多类名</p>
		<p>多类名</p>
		<p>多类名</p>
		<p>多类名</p>
		<p class="red">多类名</p>
		<div>多类名</div>
		<div>多类名</div>
		<div>多类名</div>
		<div>多类名</div>
	</body>
</html>

多个类名选择器在后期布局比较复杂的情况下，还是较多使用的。

<div class="pink fontWeight font20">亚瑟</div>
<div class="font20">刘备</div>
<div class="font14 pink">安琪拉</div>
<div class="font14">貂蝉</div>

类名选择器：

<div class="nav">这个div的名字就是nav    nav就是div   这个div也是nav

我们想要把div找到，可以通过div{}，通过.nav{}来找。
id选择器

id选择器使用“#”进行标识，后面紧跟id名，其基本语法格式如下：

#id名{属性1：属性值1；属性2：属性值2；属性3：属性值3；}

该语法中，id名即为HTML元素的id属性值，大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能对应于文档中某一个具体的元素。

用法基本和类选择器相同。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#last{
				color: red;
			}
		</style>
	</head>
	<body>
		<!--把最后一个div选择出来-->
		<div>id选择器</div>
		<div>id选择器</div>
		<div>id选择器</div>
		<div id="last">id选择器</div>
	</body>
</html>
id选择器和类选择器区别

W3c标准规定，在同一个页面中，不允许有相同名字的id对象出现，但是允许相同名字的class。

类选择器（class）好比人的名字，是可以多次重复使用的，比如：张伟 王伟 李伟。

id选择器 好比人的身份证号码，全中国是唯一的，不得重复。只能使用一次。

id选择器和类选择器最大的不同在于使用次数上。

通配符选择器

通配符 选择器用"*"号表示，他是所有选择器中作用范围最广的，能匹配页面中所有的元素。其基本语法格式如下：

* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

做一个练习：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{/*   *号代表所有标签的意思   */
				color: red;
			}
		</style>
	</head>
	<body>
		<div>我是文字</div>
		<p>我是文字</p>
		<span>我是文字</span>
		<table>我是文字</table>
	</body>
</html>

注意：通配符使用的情况较少

例如下面的代码，使用通配符选择器定义CSS样式，清除所有HTML标记的默认边距。

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

注意：
这个通配符选择器，就像我们的电影明星中的梦中情人，想想它就好了，但是他不会和你过日子。

9.CSS字体样式属性

font-size：字号大小

font-size属性用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位。其中，相对长度单位比较常用，推荐使用像素单位px，绝对长度单位使用较少。具体如下：

相对长度单位说明
em相对于当前对象内文本的字体尺寸
px像素，最常用，推荐使用
绝对长度单位说明
in英寸
cm厘米
mm毫米
pt点
font-family：字体

font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等。例如将网页中所有段落文本的字体设置为微软雅黑，可以使用如下CSS样式代码：

p{font-family：“微软雅黑”}

可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体。

常用技巧：

1.现在网页中普遍使用14px+。
2.尽量使用偶数的数字字号，例如：px18.5，px17.55这样的不要用。ie6等老式浏览器支持奇数会有bug。
3.各种字体之间必须使用英文状态下的逗号隔开。
4.中文字体需要加英文状态下的引导，英文字体一般不需要加引号。当需要设置英文字体时，英文字体时，英文字体名必须位于中文字体名之前。
5.如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如：font-family："Times New Roman"；。
6.尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。

如果属性中有多个字体，例如：*{font-family：“宋体”，“黑体”}先找第一个，如果有就显示第一个，如果没有就找第二个，第二个有就显示第二个，没有的话就显示系统默认的字体。

Unicode字体

在CSS中设置字体名称，直接写中文是可以的。但是在文件编码（GB2312、UTF-8等）不匹配时会产生乱码的错误。xp系统不支持类似微软雅黑的中文。

方案一：你可以使用英文来代替。比如font-family：“Microsoft Yahei”。

方案二：在CSS直接使用Unicode编码来写字体名称可以避免这些错误。使用Unicode写中文字体名称，浏览器是可以正确的解析的。

font-family：“\5FAE\8F6F\96C5\9ED1”,表示设置字体为“微软雅黑”。
在这里插入图片描述
可以通过escape（）来测试属于什么字体。

字体名称英文名称Unicode 编码
宋体SimSun\5B8B\4F53
新宋体NSimSun\65B0\5B8B\4F53
黑体SimHei\9ED1\4F53
微软雅黑Microsoft YaHei\5FAE\8F6F\96C5\9ED1
楷体_GB2312KaiTi_GB2312\6977\4F53_GB2312
隶书LiSu\96B6\4E66
幼园YouYuan\5E7C\5706
华文细黑STXihei\534E\6587\7EC6\9ED1
细明体MingLiU\7EC6\660E\4F53
新细明体PMingLiU\65B0\7EC6\660E\4F53

为了照顾不同电脑的字体安装问题，我们尽量只使用宋体和微软雅黑中文字体

font-weight：字体粗细

字体加粗除了用 b 和 strong 标签之外，可以使用CSS来实现，但是CSS是没有语义的。

font-weight属性用于定义字体的粗细，其可用属性值：normal、bold、bolder、lighter、100~900（100的整数倍）。

小技巧：
数字400等价于normal，而700等价于bold。但是我们更加喜欢用数字来表示。

font-style：字体风格

字体倾斜除了用 i 和 em 标签之外，可以使用CSS来实现，但是CSS是没有语义的。

font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下：

normal：默认值，浏览器会显示标准的字体样式。

italic：浏览器会显示斜体的字体样式。

oblique：浏览器会显示倾斜的字体样式。

font-style：normal；让字体正常

小技巧：
平时我们很少给文字加斜体，反而喜欢给斜体标签（em，i）改为普通模式。

font：综合设置字体样式（重点）

font属性用于对字体样式进行综合设置，其基本语法格式如下：

选择器{font:font-style  font-weight  font-size/line-height  font-family;}

使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开。

注意：其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。

做一个练习：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			/*h1{
				font-size: 25px;
				font-family:"宋体" ;
				font-weight: 400;
			}  普通写法*/
			
			h1{
				/*选择器{font: font-style  font-weight  font-size/line-height  font-family;}*/
				font: 400 25px "宋体";
			}
		</style>
	</head>
	<body>
		<h1>字体连写是有顺序的</h1>
	</body>
</html>

10.CSS外观属性

color：文本颜色

color属性用于定义文本的颜色，其取值方式有如下3种：

1.预定义的颜色值，如red，green，blue等。
2.十六进制，如#FF0000，#FF6600，#29D794等，实际工作中，十六进制时最常用的定义颜色的方式。
3.RGB代码，如红色可以表示为rgb（255，0，0）或rgb（100%，%0，%0）.

需要注意的是，如果使用RGB代码的百分比颜色值,取值为0时也不能省略百分号，必须写为0%。
line-height：行间距

line-height属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高。line-height常用的属性值单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素px

一般情况下，行距比字号大7到8像素左右就可以了。

text-align：水平对齐方式
text-align属性用于设置文本内容的水平对齐，相当于html中的align对齐属性。其可用属性值如下：
left：左对齐（默认值）
right：右对齐
center：居中对齐
是让盒子里面的内容水平居中，而不是让盒子居中对齐
text-indent：首行缩进

text-indent属性用于设置首行文本的缩进，其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值，建议使用em作为设置单位。

1em就是一个字的宽度 如果是汉字的段落，1em就是一个汉字的宽度

做一个综合案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				font-family: "宋体";
			}
			p{
				font-size: 16px; /*千万别忘了带px*/
				line-height: 26px;/*行于行  行高之间的距离*/
				text-indent: 2em;/*段落首行缩进2个字   em也是一个单位，1em就是一个字的距离*/
			}
			a{
				/*font-weight: bold;   字体加粗*/
				font-weight: 700; 700没有单位==bold
			}
			h1{
				/*font-weight:normal ;  让粗体不加粗*/
				font-weight: 400;/*让粗体不加粗 400==normal 建议用数字*/
				text-align: center;/*让h1里面的文字水平居中*/
			}
			em{
				color: skyblue;
				font-style:normal ;/*让斜体不倾斜*/
			}
			span{
				color: #FF0000;
				/*color: #F00;等价于上面，必须两两相同才能简写*/
				
			}
			div{
				text-align: center;
			}
			.nub{
				color: #FF0000;
				font-weight: 400;/*字体不加粗*/
			}
		</style>
	</head>
	<body>
		<h1>中乙队赛前突然换帅仍胜毅腾 高原黑马欲阻击舜天</h1>

<div>2017年07月16日20:11 <span>新浪体育 评论中大奖</span> （<a href="#" class="nub">11</a>人参与） <a href="#">收藏本文</a></div>
<hr />
<p>新浪体育讯　7月16日是燕京啤酒<em>[微博]</em>2017中国足协杯第三轮比赛，丽江嘉云昊队主场迎战哈尔滨毅腾队的比赛日。然而就在比赛日中午，丽江嘉云昊队主帅李虎和另外两名成员悄然向俱乐部提出了辞呈，并且收拾行囊准备离开。在这样的情况下，丽江嘉云昊队不得不由此前的教练员杨贵东代理指挥了本场比赛。</p>

<p>在昨日丽江嘉云昊队主帅李虎就缺席了赛前的新闻发布会，当时俱乐部给出的解释是李虎由于身体欠佳，去医院接受治疗。然而今日李虎出现在俱乐部时，向记者否认了这一说法，并且坦言已经向俱乐部提出了辞呈。</p>

<p>据记者多方了解的情况，李虎<em>[微博]</em>极其教练组近来在执教成绩上承受了不小的压力，在联赛间歇期期间，教练组曾向俱乐部提出能够多引进有实力的球员补强球队，然而由于和俱乐部在投入以及成绩指标上的分歧，李虎最终和教练组一起在比赛日辞职。</p>

<p>这样的情况并没有影响到丽江嘉云昊队<em>[微博]</em>的队员，在比赛中丽江队在主场拼的非常凶，在暴雨之中仍然发挥出了体能充沛的优势，最终凭借点球击败了中超球队哈尔滨毅腾，顺利晋级下一轮比赛。根据中国足协杯的赛程，丽江嘉云昊队将在本月23日迎战江苏舜天队。</p>
	</body>
</html>
text-decoration文本的装饰

text-decoration 通常我们用于给链接修改装饰效果

值描述
none默认。定义标准的文本。
underline定义文本下的一条线。下划线 也是我们链接自带的
overline定义文本上的一条线。
line-through定义穿过文本下的一条线。

在这里插入图片描述
做一下练习：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>文本装饰</title>
		<style>
			div{
				font-size:40px ;
				text-decoration: none;/*取消装饰*/
				/*text-decoration: underline;下划线*/
				/*前两个用的比较多*/
				/*text-decoration: overline;上划线*/
				/*text-decoration: line-through;删除线*/
				font-style: initial;/*倾斜*/
			}
			s{
				/*text-decoration: none;取消删除线*/
			}
			em{
				font-style: normal;
			}
		</style>
	</head>
	<body>
		<div>
			装饰自己
		</div>
		
		<s>现价：888</s>
		<em>倾斜</em>  <i>倾斜</i>
		<strong>加粗</strong>
	</body>
</html>

11.总结

本次的学习在此告一段落，多加练习，下次的学习继续学习CSS的基本知识，尽请期待。

灬银瓶丶
关注
专栏目录
css中background书写顺序，css中权重怎么计算
夸克IT
09-04 374
css基础篇（第二篇） 回顾 上一篇css中基本山的认识了css是用来干什么的，以及大概的类型和基本的样式和数写规范之类的东西、重要的还是对于基础前端人员一个必备的技能：Chrome调试工具，这个是非常重要的，如果不了解或者不太熟悉css基础的话，建议去看一看css第一篇的东西，这一篇接着css开始讲。 常见的css选择器 在css中，除了类选择器和id选择器之外，常见的还有后代选择器和子元素选择器、交集选择并集选择器等。 后代选择器 后代选择器一般是指在div中包裹了a标签这类的选择器。 // 后代选择器
css第三天
yiranzaichenmi的博客
10-14 137
****一CSS的简介 CSS 的主要使用场景就是美化网页,布局页面的，CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称. 有时我们也会称之为 CSS 样式表或级联样式表。 CSS 是也是一种标记语言. CSS 让我们的网页更加丰富多彩，布局更加灵活自如。简单理解：CSS 可以美化 HTML , 让 HTML 更漂亮，让页面布局更简单。 CSS的语法规范： CSS 规则由两个主要的部分构成：选择器以及一条或多条声明。  选择器是用于指定 CSS 样式的 HTML 标签，花
认识CSS/css的作用和优势/css的常见的样式规则/引入css样式表的常用方法/css的基础选择器/学习笔记
No1banana的博客
01-22 716
一、CSS能够做什么 1.CSS能够实现结构与表现相互分离 通过CSS可以用来灵活的摄者网页的样式，而HTML标签只用于搭建网页的基本结构即可 2.CSS的优势 节约成本：css3版本提供了很佛新特性，减少代码量与开发成本 提高性能：CSS3能够使用更少的代码制作图形化网站， 二、CSS样式规则 选择器{ 属性1: 属性值1 ; 属性2 : 属性值2 ; } 上面的样式示例中，选择器用于制定CSS样式作用的HTML对象，{}中的是具体的样式属性，以键值对形式出现，用“:” “;” 进行区分。
前端学习从入门到高级全程记录之4 （CSS基础知识）
zhangbobo1997的博客
07-31 728
本次学习目标 学会使用CSS选择器 熟记CSS样式和外观属性 熟练掌握CSS各种选择器 熟练掌握CSS各种选择器 熟练掌握CSS三种显示模式 熟练掌握CSS背景属性 熟练掌握CSS三大特性 熟练掌握CSS盒子模型 熟练掌握CSS浮动 10.熟练掌握CSS定位 11.熟练掌握CSS高级技巧强化CSS typora-copy-images-to: media ☆本次学习我们继续学习CSS的基础...
前端学习从入门到高级全程记录之1 （HTML基础知识）
zhangbobo1997的博客
07-23 464
本次学习目标 掌握HTML的基本知识，能够写出简单的页面。 1. 开发工具 1.浏览器（chrome(谷歌浏览器)，IE浏览器，火狐浏览器，QQ浏览器等等)。 2.代码编辑器（sublime,HBuilder等）,网上资源非常多，请自行百度。 3.photoshop（进行一些切图等的操作） 2. Web标准（重点） 由于不同的浏览器解析出来的内容效果不一样，所以要制定统一的标准使不同的浏览器能展示...
前端学习从入门到高级全程记录之12 （CSS高级技巧）
zhangbobo1997的博客
11-08 319
目的 5.字体图标 图片是有诸多优点的，但是缺点很明显，比如图片不但增加了总文件的大小，还增加了很多额外的“http请求”，这都会大大降低网页的性能的。更重要的是图片不能很好的进行“缩放”，因为图片放大和缩小会失真。我们后面会学习移动响应式，很多情况下希望我们的图标是可以缩放的。此时，一个非常重要的技术出现了，就是字体图标（iconfont）。 字体图标优点 可以做出跟图片一样可以做的事情，改变...
前端学习从入门到高级全程记录之2 （HTML基础知识）
zhangbobo1997的博客
07-25 195
本次学习目标 学习基础知识，会灵活运用。 1.表格table（会使用） 表格到现在还是较为常用的一种标签，但不是用来布局，常见处理、显示表格数据。 创建表格 在HTML网页中，要想创建表格，就需要使用表格相关的标签，创建表格的基本语法格式如下： <table> <tr> <td>文字</td> </tr> </ta...
前端学习从入门到高级全程记录之21（JavaScript基础）
zhangbobo1997的博客
01-31 510
学习目标 从本期开始我们就要开始学习JavaScript了。那么学习javascript可以使用你自己熟悉的软件，这里我推荐WebStorm。当然，之前的HBuilder也是可以的。网上有很多免费资源，安装简单，这里我就不提供资源了，请大家自行百度。 1.JavaScript介绍 JavaScript是什么 HTML CSS JavaScript 编程语言 流程控制 Netscape在最初将其...
前端学习从入门到高级全程记录之38 （PHP基础Ⅰ）
zhangbobo1997的博客
05-21 621
学习目标 那么，从本期开始我们就要一起学习PHP的相关知识了。
H5前端_初级入门实战案例_特效动画_加载页面动画Ⅱ（css）.rar
11-01
总之，"H5前端_初级入门实战案例_特效动画_加载页面动画Ⅱ（css）.rar"是一个极好的学习资源，它将帮助初学者掌握如何利用CSS3创建动态、有趣的页面加载动画，同时也强调了代码的可读性和注释的重要性。通过实践这个...
超400集前端全栈精英开发班培训课程 前端大神全程亲授 十大专题打造前端高级架构师
09-21
- 掌握HTML/CSS基础知识，完成简单页面布局任务。 - 学习并理解前端测试的基本概念与方法。 - **有一定基础学员**： - 可以直接进入Node.js或MV*框架的学习。 - 加强对前端工程化工具的理解与运用。 - 开始...
Spring Boot入门(18)：使用Spring Boot快速实现静态资源映射，完美展示前端页面！
最新发布
**My Coding Family**
04-29 5362
Spring Boot如何设置静态资源映射，一文带你搞定。
前端学习从入门到高级全程记录之13 （京东项目一）
热门推荐
zhangbobo1997的博客
11-20 1万+
学习目的 本期将会学习一个京东项目，综合知识非常多。
前端学习从入门到高级全程记录之8 （PS基本使用&综合案例）
zhangbobo1997的博客
08-29 580
本期学习目标 本期我们将学习PS的基本使用并且运用以前所学的CSS和HTML的技术来完成一个综合案例。 1.Photoshop基本使用 早在第一期我就让大家去安装PS，不知道安装了没有，没有安装的尽快安装，百度有很多免费资源。之所以学习PS，是因为前端需要用到PS上的功能，例如切图，量尺寸等。 PS界面组成 菜单栏、选项栏、工具栏、浮动面板（拖曳名称，可单独操作面板）、绘图窗口 窗口菜单，可显示隐...
前端学习从入门到高级全程记录之16（CSS高级技巧）
zhangbobo1997的博客
12-02 561
本期目标 本期我们继续学习一些CSS的高级技巧。 1.CSS W3C 统一验证工具 CssStats 是一个在线的 CSS 代码分析工具，可以分析你写的代码到底好不好，哪里出错。 网址是： http://www.cssstats.com/ 如果你想要更全面的，这个神奇，你值得拥有： W3C 统一验证工具： http://validator.w3.org/unicorn/ ☆☆☆☆☆ 因...
前端学习从入门到高级全程记录之11 （云道页面例子后续）
zhangbobo1997的博客
11-02 559
5.字体图标 图片是有诸多优点的，但是缺点很明显，比如图片不但增加了总文件的大小，还增加了很多额外的“http请求”，这都会大大降低网页的性能的。更重要的是图片不能很好的进行“缩放”，因为图片放大和缩小会失真。我们后面会学习移动响应式，很多情况下希望我们的图标是可以缩放的。此时，一个非常重要的技术出现了，就是字体图标（iconfont）。 字体图标优点 可以做出跟图片一样可以做的事情，改变透明度...
前端学习从入门到高级全程记录之14 （京东项目二）
zhangbobo1997的博客
11-26 524
目标 本期继续学习经典项目—京东项目 京东项目（二） 1.navitems开始 navitems结束 2.底部服务开始 3.服务模块完成 4.help模块开始 help完成 5.京东底部完成 6.京东主题部分广告制作 7.广告复习again 8.版心三个模块划分 9.家用电器模块 10.轮播图部分完成 11.三个小问题 ...
前端学习从入门到高级全程记录之17（综合案例：学成在线）
zhangbobo1997的博客
12-13 434
学习目标 本期继续巩固之前学习的知识，学习一个新的案例：学成在线。 1.学成在线项目搭建 首先我们先看一下我们要做的部分： 然后所需要的材料： 文件太大，老办法： 百度网盘链接：https://pan.baidu.com/s/1RDMQn-cTevR_uZOxe1_klw 提取码：zpu7 所需要的图片： 1. ico图标制作 我们可以自己做的图片，转换为 ico图标，以便放到...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值