第七篇（2） CSS（一）

CSS（Cascading Style Sheets）称为层叠样式表，用于对页面进行美化。在学习Html页面时，大家都会发现我们的页面丑的一批，从今天开发就让我们的页面好看起来，例如：

第七章 CSS（一）

2.1 应用方式
2.2 选择器
2.3 CSS样式

2.1 应用方式

css的样式有很多种，当如果想要把css样式应用到特定标签上有三种方式：

标签属性上编写，适用范围：指定一个标签。【不推荐，多标签无法复用样式】
1. <divstyle="color:green;">Alex</div>
head标签中定义，适用范围：当前页面的所有标签。【推荐，多个标签可复用样式】
1. <!DOCTYPE html>
2. <htmllang="en">
3. <head>
4. <metacharset="UTF-8">
5. <title>CSS学习</title>
6. <style>
7. /*给所有的div设置样式*/
8. div {
9. color: green;
10. }
11. </style>
12. </head>
13. <body>
14. <div>Alex</div>
15. <div>mjj</div>
16. </body>
17. </html>
在css文件中定义，适用范围：所有引入css文件的页面。【推荐，多页面、多个标签均可复用样式】
- 创建css文件，如：common.css
  1. div {
  2. color: green;
  3. }
- 创建html文件，如：index.html
  1. <!DOCTYPE html>
  2. <htmllang="en">
  3. <head>
  4. <metacharset="UTF-8">
  5. <title>CSS学习</title>
  6. <linkrel="stylesheet"href="common.css">
  7. </head>
  8. <body>
  9. <div>Alex</div>
  10. <div>老男孩</div>
  11. </body>
  12. </html>

以后在企业中写应用css样式时，写单页面时会把样式写在head头部；写多页面时，会把样式写入css文件，然后再在要应用的html页面引入css即可。

2.2 选择器

学习选择器的目的就是选中html页面中指定标签，便于以后给他应用样式.

2.2.1 标签选择器

在body中找到所有指定标签，例如：找到所有a标签，让他们绿了。

<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>CSS学习</title>
<style>
a {
color: green;
}
</style>
</head>
<body>
<div>周杰伦</div>
<ahref="https://www.oldboyedu.com">Alex</a>
<p>Alex</p>
<ul>
<li>
<ahref="#">朗朗</a>
</li>
</ul>
</body>
</html>

2.2.2 id 选择器

在body中找一个id匹配的标签。（HTML中ID属性应唯一，相当于人的身份证号码），例如：找到id等于i1的标签，让他绿了。

<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>CSS学习</title>
<style>
/*找到所有a标签，并应用内部数据*/
#i1 {
color: green;
}
</style>
</head>
<body>
<div>老男孩</div>
<div>
<spanid="i1">李杰</span>
</div>
<p>武沛齐</p>
</body>
</html>

2.2.3 class 选择器

在body中找到所有class属性值匹配的标签。例如：找到所有class等于head的标签，让他绿了。

<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>CSS学习</title>
<style>
.head {
color: green;
}
</style>
</head>
<body>
<divclass="head">老男孩</div>
<div>
<ahref="http://www.sb.com">李杰</a>
</div>
<pclass="head">武沛齐</p>
</body>
</html>

2.2.4 属性选择器

在body中找到所以class属性值匹配的标签。

<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>CSS学习</title>
<style>
/* 找到class=head并且name=oldboy的标签 */
.head[name="oldboy"]{
color: green;
}
</style>
</head>
<body>
<divclass="head"xx="oldboy">老男孩</div>
<div>
<ahref="http://www.sb.com">李杰</a>
</div>
<pclass="head"xx="wupeiqi">武沛齐</p>
</body>
</html>

注意：属性和值都比较灵活，可以随意定制。

2.2.5 后代选择器

在body标签中根据父子关系找到指定标签。

<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>CSS学习</title>
<style>
.head ul .hat {
color: green;
}
</style>
</head>
<body>
<ahref="#">老男孩</a>
<divclass="head">
<aclass="hat">北京</a>
<ul>
<li>沙河</li>
<li>
<aclass="hat">沙河高晓松Alex</a>
</li>
<li>
<a>沙河大烧饼Alex</a>
</li>
</ul>
</div>
<divclass="head">
<ahref="#">武沛齐</a>
</div>
</body>
</html>

2.2.6 选择器分组

对选择器进行分组，无需重复编写。

<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>CSS学习</title>
<style>
/* 不推荐写法 */
/*
h1 {
color: green;
}
.head h2{
color: green;
}
h3{
color: green;
}
h4{
color: green;
}
*/
h1,.head h2, h3, h4 {
color: green;
}
</style>
</head>
<body>
<h1>李杰</h1>
<h2>Alex</h2>
<h3>沙河高晓松</h3>
<h4>沙河小王子</h4>
</body>
</html>

2.3 CSS样式

此部分将介绍前端开发中常用的一些css样式，通过以下示例来一步步完成美乐乐商城的项目。

2.3.1 height 高度 & width 宽度

在html中如果想要给标签设置高度和宽度的话，需要使用height和width属性，并且在设置时有两种单位：

像素，根据像素设置。
百分比，根据百分比设置。
因网页高度无限制，所以默认高度无法设置百分比，如果非要设置，则需要父级标签设置固定高度，子标签便可使用百分比设置高度。

注意：行内标签无法设置高度和宽度，如果想要设置必须转换为块级标签才能应用。

<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>CSS学习</title>
<style>
.c1{
height:60px;
background-color:#2b669a;
}
.c2{
height:60px;
width:200px;
background-color:#2aabd2;
}
.c3{
height:60px;
width:40%;
background-color: gold;
}
.c4{
height:60px;
width:60%;
background-color: deeppink;
}
</style>
</head>
<body>
<divclass='c1'>标签1</div>
<divclass='c2'>标签2</div>
<divclass='c3'>标签3</div>
<divclass='c4'>标签4</div>
</body>
</html>

2.3.2 display 显示

display属性有3个常用的值，用于修改属性的展示状态：

display:block，变为块级标签。
display:inline;，变为行内标签。
display:inline-block，变为行块内标签（行内和块级特性结合）。
display:none，把标签隐藏。（设置display:none隐藏标签，移除之后显示标签）

<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>CSS学习</title>
</head>
<body>
<h1>div标签</h1>
<divstyle="background-color:#2aabd2;display: inline;height: 60px;">我是div</div>
<divstyle="background-color:#2aabd2;height: 60px;">我是div</div>
<h1>span标签</h1>
<spanstyle="background-color:gold;height:60px;">我是span</span>
<spanstyle="background-color:gold;display: block;height:60px;">我是span</span>

<h1>特殊的display:inline-block</h1>
<divstyle="display:inline-block;background-color: pink;height:80px;">我是</div>
<divstyle="display:inline-block;background-color: goldenrod;height:80px;">武沛齐</div>
</body>
</html>

2.3.3 float 浮动

float浮动用于实现N个标签并排存放（主要针对块级标签，行内标签默认就可以并排存放）。

页面布局时，一般都会使用div标签及float属性来实现，float设置时一般有两个值：

float:left，标签并排向左浮动。
float:right，标签并排向右浮动。

<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>CSS学习</title>
</head>
<body>
<h1>向左浮动</h1>
<div>
<divstyle="float:left;width:100px;background-color: green;">天堂</div>
<divstyle="float: left;width:100px;background-color: red;">地狱</div>
</div>
</body>
</html>

特别注意：布局中如何使用了float浮动，就会出现脱离文档流的现象，如下图父标签没有被撑起来：

为了防止脱离文档流现象，所以以后只要出现浮动就记得要清除浮动，即：

<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>CSS学习</title>
</head>
<body>
<h1>正确示例</h1>
<h2>向左浮动</h2>
<divstyle="background-color: pink;">
<divstyle="float:left;color: green;">天堂</div>
<divstyle="float: left;color: red;">地狱</div>

<divstyle="clear:both;"></div>
</div>
<h2>向右浮动</h2>
<div>
<divstyle="float:right;width:100px;background-color: green;">天堂</div>
<divstyle="float: right;width:100px;background-color: red;">地狱</div>
<divstyle="clear: both;"></div>
</div>
<h2>一个向左一个向右</h2>
<div>
<divstyle="float:left;width:100px;background-color: green;">天堂</div>
<divstyle="float: right;width:100px;background-color: red;">地狱</div>
<divstyle="clear: both;"></div>
</div>
</body>
</html>

2.3.4 font 字体 & 颜色

在前端开发过程中会经常调整字体格式、字体大小、字体颜色。

字体格式
字体大小
字体加粗
字体颜色

<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>CSS学习</title>
<style>
.c1{
font-family:"Times New Roman",Georgia,Serif;
}
.c2{
font-family:Arial,Verdana,Sans-serif;
}
</style>
</head>
<body>
<h1>字体格式</h1>
<divclass="c1">一白日依山尽，黄河入海流。</div>
<divclass="c2">欲穷千里目，更上一层楼。</div>
<h1>字体大小</h1>
<divstyle="font-size:13px;">从此寻花问柳，闭口不谈一生厮守。</div>
<divstyle="font-size:16px;">从此红灯绿酒，再也不想牵谁的手。</div>
<divstyle="font-size:18px;">从此人海漂流，闭口不谈爱到白头。</div>
<h1>字体加粗</h1>
<divstyle="font-weight:100;">我愿化身石桥只为看一眼你的内裤。</div>
<divstyle="font-weight:300">中年男人哪有容易的事？</div>
<divstyle="font-weight:400">中年男人容易胖、容易老、容易头发变稀少。</div>
<h1>字体颜色</h1>
<divstyle="color: red;">远上寒山石径斜，白云生处有人家。</div>
<divstyle="color:#f0ad4e">停车坐爱枫林晚，霜叶红于二月花。。</div>
</body>
</html>

2.3.4 文字对齐方式

页面上如果想要设置文字对齐方式，可以分为以下情况：

水平方向：左、中、右
垂直方向：上、中、下

<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>CSS学习</title>
<style>
.demo1{
width:400px;
}
.demo2{
width:400px;
height:100px;
}
</style>
</head>
<body>
<h1>水平方向</h1>
<divclass="demo1"style="background-color: pink;text-align: left;">Alex媳妇满身大汗</div>
<divclass="demo1"style="background-color: darkseagreen;text-align: center;">王老汉</div>
<divclass="demo1"style="background-color: goldenrod; text-align: right;">武老汉</div>
<h1>垂直方向</h1>
<divclass="demo2"style="background-color: pink;">Alex媳妇满身大汗</div>
<divclass="demo2"style="background-color: darkseagreen;line-height:100px;">王老汉（推荐）</div>
<divclass="demo2"style="background-color: goldenrod;position: relative;">
<spanstyle="position: absolute;bottom:0;">武老汉，这个知识点下一节细讲</span>
</div>
</body>
</html>

2.3.6 padding 内边距

padding内边距作用是为被应用的标签创建一部分内部间距。边距可以设置上、下、左、右方向。

/* 单独设置上下左右内边距 */
padding-left:8px;
padding-right:2px;
padding-top:4px;
padding-bottom:18px;
/* padding:上右下左; */
padding:10px02px;4px;
/* padding:上下右左; */
padding:7px5px;
/* padding:上下右左; */
padding:8px;

<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>CSS学习</title>
</head>
<body>
<h1>无内边距</h1>
<divstyle="height:200px;border:1px solid #dddddd">
<divstyle="background-color: darkseagreen;">听妈妈的话</div>
<div>
小朋友你是否有很多问号，为什么别人在那看漫画，我却在学画画对着钢琴说话。
</div>
</div>
<h1>内边距示例1</h1>
<divstyle="height:200px;border:1px solid #dddddd">
<divstyle="background-color: gold;padding:10px;">听爸爸的话</div>
<divstyle="padding:10px;">
小朋友你是否有很多问号，为什么别人在那看漫画，我却在学画画对着钢琴说话。
</div>
</div>
<h1>内边距示例2</h1>
<divstyle="height:200px;border:1px solid #dddddd;padding: 10px;">
<divstyle="background-color: gold;">听爸爸的话</div>
<div>
小朋友你是否有很多问号，为什么别人在那看漫画，我却在学画画对着钢琴说话。
</div>
</div>
</body>
</html>

2.3.7 margin 外边距

外边距用于相邻的标签之间增加距离用。边距可以设置上、下、左、右方向。

/* 单独设置上下左右内边距 */
margin-left:8px;
margin-right:2px;
margin-top:4px;
margin-bottom:18px;
/* margin:上右下左; */
margin:10px02px;4px;
/* margin:上下右左; */
margin:7px5px;
/* margin:上下右左; */
margin:8px;

<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>CSS学习</title>
</head>
<body>
<divstyle="height:200px;background-color: gold;"></div>
<divstyle="height:200px;background-color: pink;margin-top:20px;"></div>
</body>
</html>

特别注意：关于外边距还有两个特殊的知识点需要学习。

body标签默认有一个 8px的外边距，所以你会发现默认的页面都有一个“白边”。
自动居中布局，你应该见过很多网站的内容都在中间放置，两边是空白。
1. /* 只要指定宽度并设置margin为 0 auto 就可以实现div 自动居中布局*/
2. width:900px;
3. margin:0auto;

2.3.8 课堂练习：小米顶部导航

实现小米商城中顶部黑色导航条的功能（不需要写购物车图标）。

<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>小米商城</title>
<linkrel="shortcut icon"href="img/favicon.ico">
<style>
body {
margin:0;
font:14px/1.5HelveticaNeue,Helvetica,Arial,MicrosoftYahei,HiraginoSans GB,Heiti SC,WenQuanYiMicroHei, sans-serif;
}
.container {
width:1190px;
margin:0auto;
}
.left {
float: left;
}
.right {
float: right;
}
.header {
height:40px;
line-height:40px;
background-color:#333;
color:#b0b0b0;
font-size:12px;
}
.header .menus a,.header .account a,.header .car a {
text-decoration: none;
display:inline-block;
padding:05px;
}
.header .car a {
display:inline-block;
height:40px;
padding:015px;
margin-left:20px;
background-color:#424242;
}
</style>
</head>
<body>
<divclass="header">
<divclass="container">
<divclass="menus left">
<a>小米商城</a>
<a>MIUI</a>
<a>IoT</a>
<a>云服务</a>
</div>
<divclass="car right"><a>购物车（0）</a></div>
<divclass="account right">
<a>登录</a>
<a>注册</a>
<a>消息通知</a>
</div>
<divstyle="clear: both;"></div>
</div>
</div>
</body>
</html>