目标要求：
掌握三中样式的创建：行内样式、内部样式和外部样式
熟练使用CSS3的基本选择器
熟练使用字体和文本属性美化页面
目录
4.1初识CSS
cascading Style sheet 层叠样式表，又称为风格样式表
表现HTML或者xtml文件样式的计算机语言
案例一：三种样式引入方式的区别
<head>
<meta charset="UTF-8">
<title>三种样式引入方式的区别</title>
<!--以链接的方式引入外部样式文件-->
<link href="案例一：三种样式引入方式的区别.css" rel="stylesheet"
</head>
<body>
<!--
第一种：行内样式 优先级最高
直接在标签内，书写style属性的值
-->
<p style="color: antiquewhite">
在p标签的文本
</p>
<!--
第二种：内嵌式样式表
<style>标签，可以直接放置在HTML文档的任意位置
-->
<style type="text/css">
/*如果选择器的名称是HTML的标签，那么就会修改整个页面的所有同名标签的默认设置*/
p{
color: blue;
}
</style>
<p>
使用内嵌样式修饰的p标签
</p>
<!--外部样式 优先级最低 推荐使用-->
<h1>
使用内嵌样式修饰的p标签
</h1>
</body>
4.2样式
外部样式引入有两种方式，推荐使用链接式：
链接式：
<link href="案例一：三种样式引入方式的区别.css" rel="stylesheet" type="text/css">
导入式：
<style type="text/css">
/*使用导入的方式引入外部样式文件*/
@import "案例一：三种样式引入方式的区别.css";
</style>
4.3css三种基本选择器
元素选择器
直接选择HTML标签，比如p,h1
类选择器（重用）
.title{
font-size:18px;
font-weight: 700;
color: #222;
}
<h1 class="title">二十年后，人人都爱汤姆猫</h1>
id选择器（优先级别最高）
/*id选择器的优先级最高，
但是没有行内样式高：元素选择器的优先级最低 类class选择器的优先级居中*/
#myspan{
color: indigo;
}
<span class="myspan" id="myspan">日常<span/>
//整体代码部分
<style type="text/css">
/*根据当前业务需求，我们应该判断使用哪种选择器*/
.container{
width: 1077px;
/*实现当前容器居中效果*/
margin:0 auto;
border: 1px dotted indigo;
}
.title{
font-size:18px;
font-weight: 700;
color: #222;
}
.myspan
{
color: #9b9b9b;
}
/*id选择器的优先级最高，
但是没有行内样式高：元素选择器的优先级最低 类class选择器的优先级居中*/
#myspan{
color: indigo;
}
</style>
</head>
<body>
<article class="container">
<h1 class="title">二十年后，人人都爱汤姆猫</h1>
<p>
<span class="myspan" id="myspan">日常<span/>
<span class="myspan">4-2</span>
<span class="myspan">89023</span>
<span class="myspan">阅读345<span/>
<span class="myspan">点赞34</span>
</p>
</article>
4.4css字体属性
font-family:字体名称
.introduce{
/*font-style font-weight font-size font-family*/
font: italic bold 48px "隶书";
font-family: 仿宋;
font-size: 14px;
font-style: normal;
font-weight: bolder;
color: bisque;
/*设置文本修饰：下划线*/
text-decoration: underline;
}
注意：一般会直接在body标签中为整个页面设置统一的字体，字号等属性
font-size属性：
1.2em：当前浏览器默认字体的1.2倍，字体跟随浏览器变化
4.5css文本属性
color属性
/*屏幕取色，QQ截图取色，或者下载屏幕取色器*/
color:rgba(255,95,28,0.8) ;
文本对齐方式
line-height行高，撑大父容器，自动产生居中对齐效果（常用！）
vertical-algin属性（文本垂直对齐方式）
定义行级元素，对于向p,div这样的块级元素没有作用，
该属性用来设置图片和文本居中对齐
等价效果
<img src="" align="middle">
<img src="" style="vertical-align: middle">
4.6文本内空格处理方式
常用文本内空格处理方式：nowrap!
<style type="text/css">
div{
width: 200px;
border: #ff6a2d dotted 1px;
}
.white-space-normal{
white-space: normal;
}
.white-space-pre{
white-space: pre;
}
/*wrap*/
.white-space-nowrap{
white-space: nowrap;
}
.white-space-pre-line{
white-space: pre-line;
}
.white-space-pre-wrap{
white-space: pre-wrap;
}
</style>
</head>
<body>
<div class="white-space-normal">
<strong>white-space:normal-默认值，空白会被浏览器忽略</strong>
<p>
我们一路奋战，不是 为了改变这个世界，而是让这个世界不改变我们
</p>
</div>
<div class="white-space-pre">
<strong>white-space:pre-用等宽字体显示预先格式化的文本，不合并文字间距离（不合并空格），
当文字超出边界时不换行，文字前面的缩进也会被打印进去</strong>
<p>
我们一路奋战，不是 为了改变这个世界，而是让这个世界不改变我们
</p>
</div>
</div>
<div class="white-space-nowrap">
<strong>white-space:nowrap-强制在同一行显示所有文本，指导文本结束或者遭遇br对象</strong>
<p>
我们一路奋战，不是 为了改变这个世界，而是让这个世界不改变我们
</p>
</div>
<div class="white-space-pre-line">
<strong>white-space:line-保持文本的换行，不保留文字间的空白距离，当文字碰到边界后换行</strong>
<p>
我们一路奋战，不是 为了改变这个世界，而是让这个世界不改变我们
</p>
</div>
<div class="white-space-pre-wrap">
<strong>white-space:pre-wrap-用等宽字体显示预先格式化的文本，不合并文字间的空白距离，当文字碰到边界后换行</strong>
<p>
我们一路奋战，不是 为了改变这个世界，而是让这个世界不改变我们
</p>
</div>
4.7网页实例
<div>
<p class=container>
...
<p>
</div>
div .container{
}//div后面加了空格再写.container表示要设置div里面p的样式
/**** .container div //在container修饰的父容器下所有子div标签
<nav class="container">
<div></div>
<div></div>
</nav>
div.container{
}//设置使用container类修饰的div标签的样式，
对应的html样式：<div class="container">
div.container{
/*避免重名*//*text-align:center; */ /*一般用来兼容早期的IE浏览器居中*/
width: 1000px;
margin: 0 auto; *大部分浏览器都支持的可以让当前标签在父容器内居中*/
text-align: center;/*一般用来兼容早期的IE浏览器居中（需要放在body中）*/
min-height:400px;
border:crimson dotted 1px;
}
div.container table{
width: 100%;
}
div.container table.img1{
/*因为当前的css文件在style目录下，所以这里需要使用一个相对路径*/
background-image:url("../imgs/海岸.jpg");
margin: 0 auto;
width: 158px;
height: 158px;
}
div.container table tr span{
color: rgb(94,203,252)
}
.border{border: #ff6a2d dotted 1px}//css里面写
<td class="border">//html里面写
4.8总结
行内样式，内部样式，外部样式
元素选择器，类选择器，ID选择器
字体属性的使用
文本属性的使用
102
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
