大前端应用开发与架构设计-使用CSS美化Web站点(一)
大前端应用开发与架构设计
3.1 CSS概述
CSS(Cascading Style Sheets)即层叠样式表，是用来控制HTML元素的外观样式(例如字体颜色、大小以及元素的定位等等)，目前最新的版本是CSS3。
网页中使用HTML+CSS能够实现网页的元素与外观样式分离,也就是HTML只负责页面元素以及语义部分,CSS负责页面的外观样式，这也是W3C组织推荐的做法，尽量使用CSS取代HTML属性，因为如果让HTML既负责页面结构，又要负责页面样式，那样结构和样式会显得十分臃肿和混乱，可维护性和可重用性降低。
为了更加直观的理解CSS在网站总的作用，这里以淘宝网为例子。
带CSS的淘宝网首页
不带CSS的淘宝网首页
如何删除样式呢?如下图所示
只要在开发者工具的Elements选项中删除<header></header>标签中的<style></style>内容即可
3.2 CSS样式基本使用
CSS样式按照使用方式有三种，分别是行内样式，内部样式表和外部样式表。
- 行内样式表:用于控制页面中局部(例如某篇文章的一行)的内容样式，使用方式是在标签中定义属性
style="属性:值;属性:值"即可，日常开发中较少使用。 - 内部样式:用于控制当前页面的内容样式，使用方式是在
<head></head>标签内使定义<style></style>元素，然后将样式定义写在<style></style>元素内即可，此方式用于控制单页面，无法实现复用样式。 - 外部样式:用于控制网站的内容样式，使用方式是使用
<link href="样式路径" type="text/css" rel="stylesheet"/>即可，真正实现了网页的结构和内容样式的分离,也便于提高复用性(即多个网页使用同一个样式文件)，也是日常开发中最常用的样式使用方式。
如下应用案例(style_ref_type.html)所示,展示了三种样式的使用方式
在web/css路径下建立外部样式文件(out.css)
div:last-child{
color: blue;
}
#out_style_type{
font-size: 28px;
font-family: ‘Courier New‘, Courier, monospace;
font-style: italic;
font-weight: 400;
}
行内样式、内部样式和外部样式的使用
<!DOCTYPE html>
<html lang="en">
<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">
<title>三种样式表的使用</title>
<style>
div:nth-child(1){
color: red;
}
</style>
<!--引入外部的样式到当前的页面中-->
<link href="../../css/out.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<div>内部样式表,在页面的header标签中定义</div>
<!--行内样式 通过style属性设置样式 修改局部元素时使用-->
<div style="color:green;font-size:26px;">行内样式表,在元素中使用style属性定义样式</div>
<div id="out_style_type">引入外部文件的样式,实现HTML和CSS分离，是最常用的样式使用方式</div>
</body>
</html>
这里首先使用内部样式，因为在进行大型项目开发之前页面基本无需复用样式。
考虑到CSS是作用于HTML元素，所以先准备HTML元素，应用案例(css_style.html)如下所示
<!DOCTYPE html>
<html lang="en">
<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">
<title>CSS样式的定义以及标签选择器的使用</title>
</head>
<body>
<h1>前端学习技术指南</h1>
<hr/>
<p>
主要技术栈:HTML5+CSS3+JavaScript+JavaScript+jQuery+Bootstarp+Angular+Vue+Node+React+Git+Webpack+Glup
</p>
<p>
开发环境:Visual Studio Code+Git+WebStorm+Chrome+Apache
</p>
</body>
</html>
然后在<head></head>标签内部增加一对<style></style>标签，网页的所有内部样式都写在<style></style>标签内，然后分别修改<h1></h1>标题和<p></p>段落的字体颜色以及<p></p>段落的字体大小，代码片段如下所示
<style>
h1 {
color: aqua;
}
p {
color: blue;
font-size: 14px;
}
</style>
CSS样式使用格式如下
选择器{
属性名:属性值;
属性名:属性值；
}
其中选择器就是CSS样式作用于HMTL对象,也就是匹配HTML页面中的元素,花括号内({})是对该对象具体的样式设置
属性名和属性值以"键值对"的形式出现，它们中间使用冒号(:)分割,每个属性以分号(;)结束。
如果想在样式中间(即<style></style>标签内)增加注释说明的,便于程序后期维护，可以使用/**/来添加注释,需要注意的是注释不能嵌套，完整应用案例(css_style.html)如下
<!DOCTYPE html>
<html lang="en">
<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">
<title>CSS的使用</title>
<!-- 定义内部样式表-->
<style>
/*
样式定义的格式为
选择器{
属性名:属性值;
}
选择器就是CSS作用的HTML元素，这里使用了h1,p
*/
h1 {
color: aqua;
}
p {
/*如果元素有多个属性,使用分号隔开*/
color: blue;
font-size: 14px;
}
</style>
</head>
<body>
<h1>前端学习技术指南</h1>
<hr/>
<p>
主要技术栈:HTML5+CSS3+JavaScript+JavaScript+jQuery+Bootstarp+Angular+Vue+Node+React+Git+Webpack+Glup
</p>
<p>
开发环境:Visual Studio Code+Git+WebStorm+Chrome+Apache
</p>
</body>
</html>
3.3 CSS字体样式属性
字体样式属性主要用于控制字体的大小(font-size)、字体类型(font-family)、颜色(color)、加粗(font-weight)、倾斜(font-style)等外观样式。
font-size属性用于控制字体的大小，通常网页中使用的字体大小为14px+,在日常开发时尽量使用偶数(例如14，16，18)数字字号，如下代码片段所示，修改h1标题的字体大小为26px。
h1{
/*设置字体大小*/
font-size: 26px;
}
font-family属性用于设置字体，Windows系统默认是微软雅黑，当然网页也可以设置多个字体，字体之间使用逗号(,)隔开即可。
如果字体是中文(例如宋体)或者英文字体包含空格，#和$时必须使用引号("")括起来，例如‘Microsoft YaHei‘,‘Courier New‘, Courier, monospace，如果多个字体中包含了中文和英文字体，那么英文字体必须在中文字体之前。
在日常开发中推荐使用系统默认的字体，那样可以在任何浏览器中都能够正确的显示。
需要注意的是在旧版本(例如Windows XP)系统中不支持将font-family的属性值设置为类似微软雅黑或者宋体的中文，这里可以使用Unicode编码\5B8B\4F53和\5FAE\8F6F\96C5\9ED1分别来表示宋体和微软雅黑中文字体，这两种字体也是最常用的中文字体。如下代码片段所示展示了字体设置的常用案例
p{
font-family: ‘Microsoft YaHei‘,‘Courier New‘, Courier, monospace,"\5B8B\4F53","\5FAE\8F6F\96C5\9ED1"
}
font-weight属性用于设置字体的粗细，常用属性值有normal和bold,属性值还可以使用数字(100-900)表示,其中normal等价于400,bold等价于700。
span{
font-weight: 400;
}
font-style属性用于设置字体的风格(主要是倾斜或者不倾斜)，当属性值为normal时表示不倾斜，当属性值为italic时表示倾斜。
/*设置超链接标签的文本加粗和倾斜*/
div a{
font-weight: 700;
font-style: italic;
}
div em{
/*让斜体摆正*/
font-style: normal;
}
字体的应用案例(font_style.html)如下所示
<!DOCTYPE html>
<html lang="en">
<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">
<title>字体样式的使用</title>
<style>
h1{
/*设置字体大小*/
font-size: 26px;
/*设置字体颜色*/
color: aquamarine;
/*设置字体*/
font-family:"微软雅黑";
}
p{
/*网页中普遍使用14px+的字体大小*/
font-size: 14px;
/*如果有多个字体，使用逗号分隔，字体名包含空格 使用引号括起来*/
font-family: ‘Microsoft YaHei‘,‘Courier New‘, Courier, monospace
}
h3{
font-family: Cambria, Cochin, Georgia, Times, ‘Times New Roman‘, serif;
font-size :22px;
color: aqua;
}
/*设置div下的p标签样式*/
div p{
font-family: "\5B8B\4F53","\5FAE\8F6F\96C5\9ED1";
font-size: 18px;
color:red;
}
span{
font-weight: 400;
}
/*设置超链接标签的文本加粗和倾斜*/
div a{
font-weight: 700;
font-style: italic;
}
div em{
/*让斜体摆正*/
font-style: normal;
}
</style>
</head>
<body>
<h1>前端学习技术指南</h1>
<hr/>
<p>
主要技术栈:HTML5+CSS3+JavaScript+JavaScript+jQuery+Bootstarp+Angular+Vue+Node+React+Git+Webpack+Glup
</p>
<p>
开发环境:Visual Studio Code+Git+WebStorm+Chrome+Apache
</p>
<div>
<h3>学习编程的方法</h3>
<p>看视频、看书、写代码、写博客</p>
<span>与行内人交流，参加行业大会</span>
<p>分析开源项目</p>
</div>
<div>
<h4>程序员常去的网站</h4>
<a href="https://www.csdn.net">csdn</a>
<a href="https://www.cnblogs.com">cnblogs</a>
<a href="https://www.51cto.com">51cto</a>
<a href="http://www.chinaunix.net">chinaunix</a>
<a href="https://www.oschina.net">oschina</a>
</div>
<div>
<em>斜体内容</em>
</div>
</body>
</html>
在设置font属性时可以采用一种比较简单的写法，如下所示
选择器{font:font-style font-weight font-size font-family},需要注意的是属性值顺序是固定不变的,其中font-size和font-family属性值是必须设置的。
3.4 CSS基本选择器
在大型门户网站(腾讯、网易、新浪、搜狐)中，HTML元素成千上万，如果想要修改某些元素的样式，那么首先必须得找到元素。在CSS中，选择需要添加样式的元素称为选择器。
3.4.1 标签选择器
标签选择器是用来更改页面指定标签(元素)的外观样式,其语法格式为
标签名称{
属性名:属性值;
}
，其最大的优点是能快速为页面中同类型的标签统一样式，同时这也是他的缺点，不能设计差异化样式，应用案例(tag_selector.html)如下所示
<!DOCTYPE html>
<html lang="en">
<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">
<title>标签选择器的使用</title>
<style>
/*标签选择器:修改指定标签的样式,会更改所有指定标签的样式*/
p{
font-size:18px;
font-family: ‘Courier New‘, Courier, monospace;
}
h3{
color: deepskyblue;
}
</style>
</head>
<body>
<h1>前端学习技术指南</h1>
<hr/>
<p>
主要技术栈:HTML5+CSS3+JavaScript+JavaScript+jQuery+Bootstarp+Angular+Vue+Node+React+Git+Webpack+Glup
</p>
<p>
开发环境:Visual Studio Code+Git+WebStorm+Chrome+Apache
</p>
<h3>学习编程的方法</h3>
<p>看视频、看书、写代码、写博客</p>
<p>与行内人交流，参加行业大会</p>
<p>分析开源项目</p>
</body>
</html>
3.4.2 类选择器
类选择器用于解决标签选择器不能实现个性化样式，其定义格式为
.类选择器名称{属性名:属性值}
如果想要在HTML标签中使用该样式，只需要在HTML元素的开始标签中加上class=类型选择器名称即可,在定义类选择器时命名不能使用中文，建议命名见名知意,多个单词之间使用-隔开，应用案例(class_selector.html)如下所示。
<!DOCTYPE html>
<html lang="en">
<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">
<title>类选择器的使用</title>
<style>
/*定义三个类选择器，用于改变字体的颜色*/
.color-aqua{
color: aqua;
}
.color-chartreuse{
color: chartreuse;
}
.color-deepskyblue{
color: deepskyblue;
}
</style>
</head>
<body>
<div>
<h1>前端三大主流框架</h1>
<!--使用上面定义的类选择器-->
<p class="color-aqua">vue</p>
<p class="color-chartreuse">angular</p>
<p class="color-deepskyblue">react</p>
</div>
</body>
</html>
接下来结合标签选择器和类选择器实现Google的Logo,应用案例(google.html)如下所示
<!DOCTYPE html>
<html lang="en">
<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">
<title>使用标签和类样式选择器实现Google logo</title>
<style>
span{
font-size: 150px;
font-family: ‘Courier New‘, Courier, monospace;
font-weight: normal;
}
.blue{
color:blue;
}
.red{
color: red;
}
.orange{
color: orange;
}
.green{
color: green;
}
</style>
</head>
<body>
<span class="blue">G</span>
<span class="red">o</span>
<span class="orange">o</span>
<span class="blue">g</span>
<span class="green">l</span>
<span class="red">e</span>
</body>
</html>
在日常开发中，多个类选择器可以作用在同一个HTML元素中，以便HTM元素能够实现更多的样式效果，多个类选择器使用空格隔开，类选择器的顺序不会影响页面效果，应用案例(multi_class_selector.html)如下所示
<!DOCTYPE html>
<html lang="en">
<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">
<title>多个类选择器的使用</title>
<style>
h1{
font-size: 40px;
font-family: ‘Courier New‘, Courier, monospace;
color:chartreuse;
}
.font-size{
font-size: 28px;
}
.color{
color: aqua;
}
.font-weight{
font-weight: 700;
}
</style>
</head>
<body>
<div>
<h1>四大天王</h1>
<p class="font-family font-size color">刘德华</p>
<p class="font-weight">张学友</p>
<p class="font-size">黎明</p>
<p class="font-family">郭富城</p>
</div>
</body>
</html>
3.4.3 ID选择器
ID选择器用于改变页面中HTML元素中相同ID的元素的外观样式，其定义格式为
#ID名称{
属性名:属性值;
属性名:属性值;
}
应用案例(id_selector.html)如下所示
<!DOCTYPE html>
<html lang="en">
<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">
<title>id选择器的使用</title>
<style>
div{
font-size: 18px;
}
#color{
color: aquamarine;
}
</style>
</head>
<body>
<h1>CSS基本选择器</h1>
<div id="color">标签选择器</div>
<div>类选择器</div>
<div>样式选择器</div>
<div>通配符选择器</div>
</body>
</html>
ID选择器和类选择器的区别是基于HTML元素的ID属性是唯一的，因此ID选择器的样式只能使用一次，而类选择器定义的样式可以反复使用。
3.5 伪类选择器
伪类选择器主要是给其他选择器增加效果，常用的伪类选择器包括链接伪类选择器、结构伪类选择器、目标伪类选择器三种。
3.5.1 链接伪类选择器
链接伪类选择器主要是作用在超链接元素(即<a href=></a>)上，其最常用的样式效果就是当我们访问常见的电商站点(例如淘宝、京东)的超链接元素时，字体的颜色会发生改变。
链接伪类选择器可以设置未访问的链接(a:link),已经访问的链接(a:visited),鼠标移动到超链接上(a:hover)和选定的链接(a:active)四种链接样式结果，应用案例(alink.html)如下所示
<!DOCTYPE html>
<html lang="en">
<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">
<title>链接伪类选择器</title>
<base target="_blank"/>
<style>
/*
linked visisted hover active 顺序固定
日常开发中通常使用a:hover
*/
/*未访问的链接*/
a:link{
color: red;
font-size:16px;
font-weight: 400;
}
/*已经访问的链接*/
a:visited{
color: orange;
font-size: 16px;
}
/*鼠标悬浮在超链接元素的效果*/
a:hover{
color: aqua;
font-size: 24px;
font-family: ‘Courier New‘, Courier, monospace;
font-weight: 700;
}
/*选定(选中超链接不松开鼠标)的超链接*/
a:active{
color: deeppink;
font-size: 28px;
}
</style>
</head>
<body>
<div><a href="https://miaosha.jd.com/">京东秒杀</a></div>
<div><a href="https://a.jd.com/">优惠券</a></div>
<div><a href="https://red.jd.com/">闪购</a></div>
</body>
</html>
需要注意的是四种超链接样式效果的顺序是固定的，否则会无法显示设置的样式，日常开发中常用的是a:hover即鼠标移动到超链接上的样式效果，应用案例(alink_app.html)如下所示
<!DOCTYPE html>
<html lang="en">
<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">
<title>超链接伪类选择器的日常应用场景</title>
<style>
/*
在日常开发中(以京东网站为例)，超链接伪类选择器通常只设置鼠标移动到超链接的样式
*/
a{
color: gray;
font-size: 16px;
}
a:hover{
color:red;
font-size: 18px;
font-weight: 700;
}
</style>
</head>
<body>
<div><a href="https://miaosha.jd.com/">京东秒杀</a></div>
<div><a href="https://a.jd.com/">优惠券</a></div>
<div><a href="https://red.jd.com/">闪购</a></div>
</body>
</html>
3.5.2 结构(位置)伪类选择器
CSS3中新增结构伪类选择器，用于页面中同时有多个相同类型元素(例如多个<li></li>)的情况下,修改指定的元素样式。
Selector:first-chid匹配符合Selector选择器，而且必须是其父元素的第一个子节点的元素。
Selector:last-chid匹配符合Selector选择器，而且必须是其父元素的最后一个子节点元素。
Selector:nth-child(n)匹配符合Selector选择器，而且必须是其父元素的第n个子节点的元素。
Selector:nth-last-chid(n)：匹配符合Selector选择器，而且必须是其父元素的倒数第n个子节点的元素
，其中n可以是数字，奇数(odd),偶数(even),还可以是数学公式(例如n+1,2n 等等)。
应用案例(pos.html)如下所示
<!DOCTYPE html>
<html lang="en">
<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">
<title>结构(位置)伪类选择器</title>
<style>
/*选择第一个li元素*/
li:first-child{
color: red;
}
/*选择最后一个li元素*/
li:last-child{
color: aqua;
}
/*选择指定的li元素*/
li:nth-child(3){
color: darkorange;
}
</style>
</head>
<body>
<div>
<ul>
<li>first</li>
<li>second</li>
<li>third</li>
<li>fourth</li>
<li>fifth</li>
</ul>
</div>
</body>
</html>
3.5.3 目标伪类选择器
目标伪类选择器(:target)用于页面中活动的目标元素,应用案例(target.html)如下所示,当点击锚链接元素时，跳转到锚链接的内容会改变其样式。
<!DOCTYPE html>
<html lang="en">
<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">
<title>目标选择器</title>
<style>
/*当前活动目标元素改变字体颜色*/
:target{
color:salmon;
}
</style>
</head>
<body>
<div id="chatper">
<h1><a href="#first">第一章</a></h1>
<h1><a href="#">第二章</a></h1>
<h1><a href="#">第三章</a></h1>
<h1><a href="#">第四章</a></h1>
<h1><a href="#">第五章</a></h1>
<h1><a href="#">第六章</a></h1>
<h1><a href="#">第七章</a></h1>
<h1><a href="#">第八章</a></h1>
<h1><a href="#">第九章</a></h1>
<h1><a href=#"">第十章</a></h1>
<h1><a href="#">第十一章</a></h1>
<h1><a href="#">第十二章</a></h1>
<h1><a href="#">第十三章</a></h1>
<h1><a href="#">第十四章</a></h1>
<h1><a href="#">第十五章</a></h1>
<h1><a href="#">第十六章</a></h1>
<h1><a href="#">第十七章</a></h1>
<h1><a href="#">第十八章</a></h1>
<h1><a href="#">第十九章</a></h1>
<h1><a href="#">第二十章</a></h1>
<h1><a href="#">第二十一章</a></h1>
<h1><a href=#"">第二十二章</a></h1>
<h1><a href="#">第二十三章</a></h1>
<h1><a href="#">第二十四章</a></h1>
</div>
<div id="content">
<div id="first">
<h1>第一章</h1>
<div id="chapter1">
<p>生命不息，编码不止</p>
</div>
</div>
</div>
</body>
</html>
3.6 CSS外观样式
CSS外观样式主要用于控制本文颜色(color)、行间距(line-height)、水平对齐方式(text-align)、首行缩进(text-indent)、字间距(letter-spacing)和单词间距(word-spacing)以及CSS3新增的颜色半透明、文字阴影(text-shadow)效果。
3.6.1 文本颜色
在CSS中可以通过color属性定义文本的颜色，常用的取值方式有如下三种:
- 预定义的颜色值;例如red,green,blue等等
- 十六进制的颜色值，例如#FF0000,也是日常开发中最常用的使用方式
- RGB值，例如红色可以使用rgb(255,0,0)或者rgb(100%,0%,0%)
在日常开发中想要定义文本颜色，还要记住十六进制的颜色值比较繁琐，这里我们借助Visual Studio Code的取色器插件(Visual Color Picker)实现设置颜色，安装和使用教程如下图所示
颜色取色器使用
如下图所示，在使用时只需要使用Ctrl+Shift+P调出命令面板，然后输入VS Color Picker即可选颜色
颜色取值的应用案例(color.html)如下所示
<!DOCTYPE html>
<html lang="en">
<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">
<title>css更改外观属性</title>
<style>
/*使用预定义的颜色值*/
.red{
color:red;
}
/*
使用十六进制表示颜色
十六进制取值 0-9,a-f
*/
#hex_color{
color:#82ea8c;
}
/*使用rgb颜色值 最大数值为255*/
li:nth-child(3){
color: rgb(255, 0, 0);
}
</style>
</head>
<body>
<h3>CSS颜色属性的三种取值方式</h3>
<div id="color">
<ol>
<li class="red">预定义的颜色值，例如red,blue,green等等</li>
<li id="hex_color">十六进制的值，例如#FF0000,#FF6600,日常开发中十六进制是最常用的定义颜色的方式</li>
<li>RGB代码,如红色可以使用rgb(255,0,0)或者rgb(100%,0%,0%)</li>
</ol>
</div>
</body>
</html>
3.6.2 文本间距
在写新闻文章时，行与行之间是存在一定距离的，这在CSS中称为行间距(line-height),通常行间距取值是字体大小+8px，
还可以指定文本的水平对其方式(text-align),其主要取值包括left,center,right。
而且通常在段落的文本中，首行通常会缩进(text-indent)。
还可以通过letter-spacing调整中文文字之间的距离，通过world-spacing调整英文单词之间的距离，但是通常使用默认间距即可。
文本间距的应用案例(news.html)如下所示
<!DOCTYPE html>
<html lang="en">
<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">
<title>行高对其和首行缩进的属性使用</title>
<style>
h2 {
/*文本水平对齐的方式*/
text-align: center;
}
p {
font-size: 16px;
/* 行间距(行与行之间的距离) 字体大小+8px*/
line-height: 24px;
/*水平对齐方式 主要取值为left center right*/
text-align: left;
/*首行缩进 1em表示1个字的宽度*/
text-indent: 2em;
/*字间距*/
letter-spacing: 2px;
/*英文单词单词间距(对中文无效)*/
word-spacing: 1px;
}
</style>
</head>
<body>
<div id="news">
<h2>习大大外交思想引领中国特色大国外交开创新局面</h2>
<p>中央外事工作会议6月22日至23日在北京召开，这次会议，习大大总结了党的十八大以来我国对外工作取得的历史性成就，回答了新时代如何做好对外工作的重大理论和实践问题，为全面推进新时代对外工作明确前进方向、提供根本遵循。新华社《学习进行时》原创品牌栏目“讲习所”推出文章为您解读。</p>
<p> 做好对外工作的重大理论和实践问题，为全面推进新时代对外工作明确前进方向、提供根本遵循。新华社《学习进行时》原创品牌栏目“讲习所”推出文章为您解读。</p>
<p>作为习大大新时代中国特色社会主义思想的重要组成部分，习大大外交思想是新时代我国对外工作的根本遵循和行动指南。</p>
<p>Life is half spent before we know what it is.</p>
</div>
</body>
</html>
3.6.3 CSS3新特性之颜色半透明和文字阴影
如果要想实现颜色半透明的效果，只需要使用color:rgba(r,g,b,a)即可，其中前三个参数和之前介绍的颜色属性的RGB值一样，a表示alpha，取值范围为0-1之间。
文字阴影可以通过text-shadow属性实现，该属性有四个参数值，分别表示文字的水平位置、垂直位置、模糊距离以及阴影颜色，其中水平位置和垂直位置是必须的。
它们的应用案例(css3_feature.html)如下所示
<!DOCTYPE html>
<html lang="en">
<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">
<title>CSS3新特性之颜色半透明和文字阴影</title>
<style>
ul li {
font-size: 28px;
font-style: italic;
}
/*要想实现文字半透明效果，使用rgba(arg1,arg2,arg3,arg4) 传递四个参数，其中第四个参数的取值在0-1之间*/
li:nth-child(1) {
color: rgb(255, 77, 22);
}
li:nth-child(2) {
color: rgba(255, 77, 22, 0.5);
}
ol li{
font-size: 50px;
/*水平位置* 垂直位置* 模糊距离 阴影颜色*/
text-shadow: 5px 11px 3px rgba(255, 0, 0, 0.5);
}
</style>
</head>
<body>
<div>
<ul>
<li>CSS3新特性之未添加颜色半透明</li>
<li>CSS3新特性之添加颜色半透明效果</li>
</ul>
</div>
<div>
<ol>
<li>CSS3新特性之文字阴影</li>
<li>CSS3新特性之文字阴影</li>
</ol>
</div>
</body>
</html>
如果想要更改样式的属性值并立刻查看更改后的效果，可以直接在Chrome提供的开发人员工具中修改，如下图所示
不过需要指出的是，当修改后获得想要的样式结果后，需要将修改的内容复制到对应的源文件(例如这里的css3_feature.html)中，否则一刷新浏览器，修改的结果将会丢失。
3.6.4 综合案例
使用选择器及其文本样式实现新闻案例(selector_text_style_app.html)如下所示
<!DOCTYPE html>
<html lang="en">
<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">
<title>选择器及其文本样式的综合案例</title>
<style>
body {
color: #3c3c3c;
font-size: 16px;
}
h1 {
text-align: center;
font-weight: 400;
font-size: 26px;
}
p {
font-size: 16px;
line-height: 24px;
text-indent: 2em;
text-align: left;
letter-spacing: 1px;
}
/*标签选择器*/
div {
text-align: center;
font-size: 14px;
}
/*类样式选择器*/
.xinhua {
color: #ff8000;
}
/* 链接伪类选择器 */
.xinhua:hover {
color: #00ffff;
}
</style>
</head>
<body>
<h1>中国国家主席会见法国总理菲利普</h1>
<div>2018-06-25 12:10:32 来源:
<span>
<a class="xinhua" href="http://home.xinhua-news.com/rss/newsdetail/6c76532a6336b9f1a88587df2a24f820/1529899831084">新华网</a>
</span>
</div>
<hr />
<p>新华社北京6月25日电 国家主席25日在人民大会堂会见法国总理菲利普。</p>
<p>习大大欢迎菲利普访华，指出马克龙总统和总理先生在半年内相继访华，体现了法方对发展中法关系的高度重视，体现了中法关系的高水平。当前，世界正在发生深刻复杂变化。中方愿同法方一道，不断丰富中法全面战略伙伴关系内涵，继续做国家间相互尊重、合作共赢、交流互鉴的典范。</p>
<p>习大大强调，中法是全面战略伙伴，双方要强化伙伴意识，坚持相互信任、平等相待，尊重和照顾彼此核心利益和重大关切。充分发挥中法各个对话交流机制和平台作用，增进相互了解，深化互信。要着力深化务实合作，尽早落实已达成的各项合作共识和协议，发挥好重大项目的引领带动作用，加快培育新的合作增长点。中方赞赏法方愿积极参与共建“一带一路”的合作，愿本着共商共建共享原则，实现“一带一路”倡议同法国和欧盟发展战略有效对接。双方要共举多边主义旗帜，坚持公平正义，共同维护国际关系基本准则。中方愿同欧方一道努力，推动中欧关系行稳致远。
</p>
<p>菲利普表示，马克龙总统年初对中国成功的访问，再次彰显了法中战略合作的重要性。中国既有长远规划，又能脚踏实地，发展成就令人钦佩。法国对法中关系充满信心，愿继续深化两国经贸、文化交流，推进民用核能、航空航天等战略性合作。“一带一路”倡议是一个面向未来的合作设想，符合全人类的利益。法国在国际事务中坚持独立自主的政策，在多边主义面临挑战的今天，拥有稳定的合作伙伴非常宝贵。法方愿同中方共同致力于促进世界的和平与稳定，加强欧盟同中国的合作关系。
</p>
<p> 杨洁篪、王毅、何立峰等参加会见。
</p>
</body>
</html>
3.7 HTML标签分类
在使用HTML+CSS布局网页时，通常把HTML元素分为块级元素和行内元素，之前在讲述使用HTML构建Web站点时使用了典型的块级元素<div></div>和典型的行级元素<span></span>描述了两者在结构上的区别。
块级元素:总是从新行开始，可以容纳其他块级元素(<p></p>以及标题标签不能存放块级元素)和内联元素，宽度默认是容器的100%，高度、行高、外边距以及内边距都可以设置，后期网页布局时会经常使用块级元素(<div></div>)实现网页的布局。
行级元素:和相邻的元素在一行显示，无法设置高度、宽度，水平方向的内边距和外边距可以设置，垂直的无法设置。默认的宽度就是内容本身的宽度，行内元素只能容纳文本或者其他行内元素(<a></a>标签除外)
有些html元素(例如<input>,<img>,<td></td>)既有行内元素的特点，又可以设置宽度和高度，它们被称为行内块元素，高度，行高、外边距以及内边距都可以控制。
它们的应用案例(html_element_type.html)如下所示
<!DOCTYPE html>
<html lang="en">
<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">
<title>html元素分类</title>
<style>
body{
background-color: red;
}
div{
font-size: 18px;
line-height: 26px;
text-align: left;
text-indent: 2em;
padding: 2px;
margin: 2px;
background-color: aqua;
}
p{
font-size: 18px;
line-height: 26px;
text-align: left;
text-indent: 2em;
padding: 2px;
margin: 2px;
background-color: aqua;
}
span{
background-color:darkorange;
/*行内元素无法设置宽度和高度 这里的设置无效*/
width: 200px;
height: 300px;
}
input{
width: 400px;
height: 20px;
}
img{
border: 1px;
width: 400px;
height: 200px;
}
</style>
</head>
<body >
<!--块级元素-->
<div>我是块级元素</div>
<p>我是块级元素</p>
<div id="parent">
<div id="child">我是子元素</div>
</div>
<!--行级元素-->
<span>我是行级元素</span><span>我是行级元素</span><span>我是行级元素</span><span>我是行级元素</span><span>我是行级元素</span>
<br />
<input type="text"><input type="text"><input type="text">
<br/>
<img src="../../images/Canyenne.jpg" alt="我是一张图片" ><img src="../../images/Canyenne.jpg" alt="我是一张图片" ><img src="../../images/Canyenne.jpg" alt="我是一张图片" >
<table border="1" align="center" valign="bottom" width="300px" height="200px" cellspacing="0" cellpadding="25">
<tr>
<td>姓名</td>
<td>性别</td>
<td>身高</td>
<td>体重</td>
</tr>
</table>
</body>
</html>
原文地址：https://www.cnblogs.com/ittimeline/p/9228283.html