在前端开发过程，我们通过CSS来同时控制多重网页的样式和布局。本篇博文通过一些实例来学习一下CSS，并作出总结。
1. 元素按显示方式分为哪几种, 并举例, 正确描述它们
元素按内容是否可以替换可以分为置换元素和非置换元素；按元素是否独占一行分为块级元素和行内元素。
置换元素：<img>, <input>。<img src="...">: 以src属性指向引用的外部图片资源，<input type="...">: type不同,替换成不同的类型。
非置换元素：大多数采用双标签。例如：<h1>、<p>、<span>、<div>、<table>、<ul+li>、<a>
块级元素：遵循最大化原则，在没有内容撑开的情况下, 需要设置宽高,否则无法感知存在。例如：<div>、<ul+li>、<table>、<p>
行内元素：遵循最小化原则，总是在一行文本元素的内部生成, 它的宽高由所在行决定,不可以设置。例如：<span>、<input>、<strong>、<a>
2. CSS是什么? 它的主要作用是什么?
CSS是层叠样式表，主要作用是用来设置HTML元素在文档中的布局与显示方式
3. 什么是CSS选择器,它的样式声明是哪二部分组成?
CSS选择器就是CSS用于对HTML页面中的元素实现一对一，一对多或者多对一的控制的选择器。
CSS选择器的样式声明由属性和属性值组成。
4. 举例演示CSS简单选择器(全部)
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简单选择器</title>
<style>
/*元素选择器*/
h2 {
color: aqua;
}
p {
color: blue;
}
/*属性选择器
属性由属性名和值二部分组成,对应的语法也有二种*/
p[class] {
color: coral;
}
p[class="yellow"] {
color: yellow;
}
p[id="green"] {
color: green;
}
/*类/class选择器*/
.yellow {
background-color: grey;
}
/*ID选择器*/
#green {
background-color: black;
}
/*群组选择器
多个选择器之间用逗号分隔, 用于将样式应用到一组元素上*/
h2, .yellow {
background-color: pink;
}
/*通配符选择器: *表示全部元素, 通常用在上下文选择器*/
body * {
font-family: 宋体;
font-size: 2rem;
}
</style>
</head>
<body>
<h2>中美经贸团队双方牵头人将于本周五再次通话</h2>
<p>智利停办APEC峰会:地铁涨价引发的蝴蝶效应?</p>
<p class="yellow">中美贸易协定去哪签？</p>
<p class="yellow" id="green">5G商用正式启动</p>
<p>中国学者遭申根26国禁入境 曾拒与美情报部门合作</p>
</body>
</html>点击 "运行实例" 按钮查看在线实例
5. 举例演示CSS上下文选择器(全部)
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>上下文选择器</title>
<style>
/*后代选择器*/
section p {
color: pink;
}
/*父子选择器*/
section > p {
color: red;
}
/*同级相邻选择器*/
#phone + * {
color: green;
}
/*同级所有选择器*/
#phone ~ * {
background-color: darkcyan;
}
</style>
</head>
<body>
<section>
<div>
<p id="phone">小米手机</p>
<p>华为手机</p>
<p>魅族手机</p>
</div>
<p>苹果手机</p>
<p>三星手机</p>
</section>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
6. 举例演示常用CSS结构伪类选择器(不少于四种)
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>结构伪类选择器</title>
<style>
/*非限定类型*/
/*选择页面中所有ul下面的第二个子元素*/
ul > :nth-child(2) {
color: green;
}
/*选择第一个ul下面的第二个子元素*/
ul:first-child > :nth-child(2) {
background-color: yellow;
}
/*选择第一个ul下面的第一个子元素*/
ul:first-child > :first-child {
background-color: pink;
}
/*选择第一个ul下面的第二个子元素中，类型为<h3>的元素*/
ul:first-child > :nth-child(2) > h3:nth-child(1) {
color: brown;
}
/*选择第一个ul下面的最后一个子元素中，所有类型为<p>的元素*/
ul:first-child > :last-child > p:nth-child(n+1) {
background-color: papayawhip;
}
/*选择第一个ul下面的最后一个子元素中，所有类型为<li>的后代元素*/
ul:first-child > :last-child li:nth-child(n+1) {
background-color: darkcyan;
}
/*限定类型*/
/*选择第一个ul下面的最后一个子元素中，所有类型为<p>的元素*/
ul:first-of-type > :last-of-type > p:nth-of-type(n+1) {
color: darkorange;
}
ul:first-of-type > :last-of-type li:nth-of-type(n+1) {
color: yellow;
}
</style>
</head>
<body>
<ul>
<li>
<h3>前端开发</h3>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</li>
<li>
<h3>笔记本电脑</h3>
<ul>
<li>轻薄本</li>
<li>商务本</li>
<li>游戏本</li>
</ul>
</li>
<li>
<h3>学习阶段</h3>
<p>一个人的学习生涯分为三个阶段</p>
<ul>
<li>小学</li>
<li>中学</li>
<li>大学</li>
</ul>
<p>通过这三个阶段，可以使一个人走向成功</p>
</li>
</ul>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
7. 举例演示常用CSS表单伪类选择器(不少于三种)
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单伪类选择器</title>
<style>
input:enabled {
background-color: darkorange;
}
input:disabled {
background-color: red;
font-size: 36px;
}
input:required {
background-color: yellow;
}
</style>
</head>
<body>
<h3>用户登录</h3>
<form action="" method="post">
<p>
<label for="username">账号：</label>
<input type="text" name="username" id="username" required placeholder="请输入账号">
</p>
<p>
<label for="password">密码：</label>
<input type="password" name="password" id="password" required placeholder="不少于8位">
</p>
<p>
<input type="checkbox" name="pwd" id="pwd" checked><label for="pwd">记住密码</label>
<input type="checkbox" name="join" id="join" ><label for="join">自动登录</label>
</p>
<p>
<input type="submit" disabled value="登录">
</p>
</form>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
8. 总结
通过CSS只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者多个网页的外观和格式，可以轻松地控制页面的布局。
