前言：
前面学习了html，今天学习一下css的基本使用，看下html与css之间是如何结合来编写前端网页的。
CSS 是什么？
CSS 是 Cascading Style Sheets（级联样式表）的缩写。 CSS 是一种样式表语言，用于为 HTML 文档定义布局。例如，CSS 涉及字体、颜色、边距、高度、宽度、 背景图像、高级定位等方面。
CSS 跟 HTML 的区别在哪里？
HTML 用于结构化内容；CSS 用于格式化结构化的内容。
采用 CSS 有哪些好处？
CSS 是 Web 设计界的一次革命。CSS 的具体优点包括：
- 通过单个样式表控制多个文档的布局；
- 更精确的布局控制；
- 为不同的媒体类型（屏幕、打印等）采取不同的布局；
- 无数高级、先进的技巧。
基本的 CSS 语法
先举个简单的例子，比如我们要为一个网页设置一个背景色
采用html方式我们会给body添加下面属性
<body bgcolor="aliceblue">
采用css方式
<style type="text/css">
body{
background-color: aliceblue;
}
</style>
上例也向你展示了基本的 CSS 模型
selector:{property:value}
- selector选择器代表花括号中的属性设置将应用于哪个html元素
property 属性 设置html标签的属性
- value 值 设置html标签属性的值
为一个 HTML 文档应用 CSS
为HTML文档应用CSS有以下三种方法可供选择。下面对这三种方法进行了概括。我们建议你对第三种方法 （即外部样式表）予以关注。
行内样式表（style 属性）
内部样式表（style 元素）
外部样式表（引用一个样式表文件）
下面以给段落设置字体颜色和字体大小为例说明三种使用方式
1.）行内样式表（style属性）
为 HTML 应用 CSS 的一种方法是使用 HTML 属性 style
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css样式</title>
</head>
<body> <div>
<p style="color: green;font-size: 5rem ">
行内样式表
</p>
</div>
</body>
</html>
2.）内部样式表（style 元素）
为 HTML 应用 CSS 的另一种方法是采用 HTML 元素 style
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css样式</title>
<style type="text/css" >
p{
color: green;
font-size: 5rem;
}
</style>
</head>
<body> <div>
<p>
内部样式表
</p>
</div> </body>
</html>
3.）外部样式表（引用一个样式表文件）
这里推荐采用这种引用外部样式表的方法，外部样式表就是一个扩展名为 css 的文本文件。跟其他文件一样，你可以把样式表文件放在 Web 服务器 上或者本地硬盘上。
比如我这里在styles文件中新建一个global.css 目录如下：
然后在index.html的HTML 代码的头部（header）中添加引用<link rel="stylesheet" type="text/css" href="../styles/global.css" />
global.css代码如下：
p{
color: green;
font-size: 5rem;
}
index.html代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css样式</title> <link rel="stylesheet" type="text/css" href="../styles/global.css" /> </head>
<body> <div>
<p>
外部样式表
</p>
</div>
</body>
</html>
元素的分类与标识
1.）使用css样式类
用 class 对元素进行分类 ，根据上面的我们可以为标签<p>创建一个样式，但是我们一个html网页中也行会用到好多种样式<p>标签，这时怎么办呢？这时我们可以采用样式类，为每个标签创建多个样式类，比如我们一篇文章，开头，内容，结尾三个段落的字体颜色不一样，我们可以创建三个不同需要的样式类，如下：
p{，
font-size: 5rem;
}
p.header{
color: green;
}
p.content{
color: orangered;
}
p.footer{
color: blue;
}
从上可以看出一个标签元素后面加上一个点（.）跟上你的样式类名称即可，看下如何在html上使用的，采用class属性即可选择使用哪个样式类。
<div>
<p class="header">
这是文章开头
</p>
<p class="content">
这是文章内容
</p>
<p class="footer">
这是文章结尾
</p>
</div>
2.）使用样式id
除了可以对元素进行分类以外，你还可以标识单个元素。这是通过 HTML 属性 id 实现的。 HTML 属性 id 的特别之处在于，在同一 HTML 文档中不能有两个具有相同 id 值的元素。文档中的每个 id 值都必须是唯一的。
还接着上面的例子来说明，比如现在我们需要自定一个<p>标签的title。
p#title{
color:red;
}
在html中引用
<p id="title">
这是文章题目
</p>
样式id常用于布局的目的，定义页面的特殊部门，比如标题区域、页脚区域，页面区域。
常用css样式举例
1.）颜色与背景
CSS 属性 color 用于指定元素的前景色。
h1{
color: aliceblue;
}
CSS 属性 background-color 用于指定元素的背景色。
body {
background-color: aliceblue;
}
CSS 属性 background-image 用于设置背景图像。
body{
background-image: url("../../images/bg_post_activity_5.png");
}
上面使用背景图片发现图片纵向横向都平铺了，使用CSS 属性 background-repeat 就是用于 控制平铺的。
- background-repeat:repeat-x 图像横向平铺
- background-repeat:repeat-y 图像纵向平铺
- background-repeat:repeat 图像横向和纵向都平铺
- background-repeat:no-repeat 图像不平铺
body{
background-image: url("../../images/bg_post_activity_5.png");
background-repeat:no-repeat;
}
CSS 属性 background-attachment 用于指定背景图像是固定在屏幕上的、还是随着它所在的元素而滚动的。
一个固定的背景图像不会随着用户滚动页面而发生滚动（它是固定在屏幕上的），而一个非固定的背景 图像会随着页面的滚动而滚动。
- background-attachment:scroll 图像会跟随页面滚动——非固定的
- background-attachment:fixed 图像是固定在屏幕上的
body{
background-image: url("../../images/bg_post_activity_5.png");
background-repeat:no-repeat;
background-attachment: scroll;
}
CSS 属性 background-position设置图像放置在屏幕的位置
- background-position:2cm 2cm 图像被放置在页面内距左边 2 厘米、顶部 2 厘米的地方
- background-position:50% 25% 图像被放置在页面内水平居中、离顶部四分之一处
- background-position:top right 图像被放置在页面的右上角
body{
background-image: url("../../images/bg_post_activity_5.png");
background-repeat:no-repeat;
background-attachment: scroll;
background-position:center;
}
CSS 属性 background 是上述所有与背景有关的属性的缩写用法
body{
background: aliceblue url("../../images/bg_post_activity_5.png") no-repeat scroll center;
}
2.）字体
CSS 属性 font-family 的作用是设置一组按优先级排序的字体列表，如果该列表中的第一个字体未在访 问者计算机上安装，那么就尝试列表中的下一个字体，依此类推，直到列表中的某个字体是已安装的
有两种类型的名称可用于分类字体：字体族名称（family-name）和族类名称（generic family）。下 面来解释这两个术语
- 字体族名称（family-name） 字体族名称（就是我们通常所说的“字体”）的例子包括“Arial”、“Times New Roman”、“宋体”、“黑体”等等。
- 族类（generic family） 一个族类是一组具有统一外观的字体族。sans-serif 就是一例，它代表一组没有“脚”的字体。
p.header{
color: green;
font-family: 华文楷体, 华文宋体,新宋体;
}
CSS 属性 font-style 定义所选字体的显示样式
- normal（正常）
- italic（斜体）
- oblique（倾斜）
p.header{
color: green;
font-family: 华文楷体, 华文宋体,新宋体;
font-style: italic;
}
CSS 属性 font-variant 的值可以是：normal（正常）或 small-caps（小体大写字母）。
p.content{
color: orangered;
font-variant: small-caps;
}
CSS 属性 font-weight 指定字体显示的浓淡程度。其值可以是 normal（正常）或 bold（加粗）
p.content{
color: orangered;
font-variant: small-caps;
font-weight:bold;
}
CSS 属性 font-size 来设置字体大小，字体大小可通过多种不同单位（比如像素或百分比等）来设置。
p.content{
color: orangered;
font-variant: small-caps;
font-weight:bold;
font-size: 2em;
}
一般都会使用px,pt,%,em这四种，‘px’和‘pt’将字体设置为固定大小，而‘%’和‘em’允许页面浏 览者自行调整字体的显示尺寸
CSS 属性 font 是上述各有关字体的 CSS 属性的缩写用法。
p.footer{
color: blue;
font: bold italic 3em 华文宋体,新宋体;
}
3.）文本
CSS 属性 text-indent 用于为段落设置首行缩进，以令其具有美观的格式
p#title{
color:red;
text-indent: 20%;
}
CSS 属性 text-align 与 HTML 属性 align 的功能相同。该属性的值可以是：left（左对齐）、right（右 对齐）或者 center（居中）。除了上面三种选择以外，你还可以将该属性的值设为 justify（两端对齐）， 即伸缩行中的文字以左右靠齐
p.footer{
color: blue;
font: bold italic 3em 华文宋体,新宋体;
text-align: center;
}
CSS 属性 text-decoration 令我们可以为文本增添不同的“装饰”或“效果”。
p.footer{
color: blue;
font: bold italic 3em 华文宋体,新宋体;
text-align: center;
text-decoration: underline;
}
CSS属性letter-spacing用于设置文本的水平字间距
p.footer{
color: blue;
font: bold italic 3em 华文宋体,新宋体;
text-align: center;
text-decoration: underline;
letter-spacing: 0.50em;
}
CSS 属性 text-transform 用于控制文本的大小写。无论字母本来的大小写，你可以通过该属性令它首字 母大写（capitalize）、全部大写（uppercase）或者全部小写（lowercase）
p#label{
color: orangered;
text-transform: uppercase;
}
链接
上面学习了属性（比如修改颜色、字体、添加下划线等）也可以用在链接标签上。但不同的是， CSS 允许你根据链接是未访问的、已访问的、活动的、是否有鼠标悬停等分别定义不同的属性。这样， 我们便可为网站增添奇特而有用的效果。你需要通过伪类（pseudo-class）来控制这些效果。
先看下什么是伪类？
伪类（pseudo-class）令你可以在为 HTML 元素定义 CSS 属性的时候将条件和事件考虑在内。
伪类:link 用于浏览者从未访问过的链接。
a:link{
text-decoration: none;
color: blue;
}
伪类:visited 用于浏览者已访问过的链接
a:visited{
text-decoration: none;
color: green;
}
伪类:active 用于活动的链接（即获得当前焦点的链接
a:active{
text-decoration: none;
color: gold;
}
伪类:hover 用于有鼠标悬停的链接
a:hover{
text-decoration: none;
color: orangered;
}
组织元素（span 和 div）
span 和 div 元素用于组织和结构化文档，并经常联合 class 和 id 属性一起使用。
在这一课中，我们将进一步探究 span 和 div 的用法，因为这两个 HTML 元素对于 CSS 是很重要的。
- 用 span 组织元素
- 用 div 组织元素
用 span 组织元素
span 元素可以说是一种中性元素，因为它不对文档本身添加任何东西。但是与 CSS 结合使用的话，span 可以对文档中的部分文本增添视觉效果
用 div 组织元素
div 可以被用来组织一个或多个块元素。
盒状模型
CSS 中的盒状模型（box model）用于描述一个为 HTML 元素形成的矩形盒子。盒状模型还涉及为各个元 素调整外边距（margin）、边框（border）、内边距（padding）和内容的具体操作。下图显示了盒状 模型的结构： 
外边距和内边距
你学习了盒状模型。在这一课，我们将了解如何通过设置 margin（外边距）和 padding（内边 距）这两个 CSS 属性来改变元素的显示
为元素设置外边距
一个元素有上（top）、下（bottom）、左（left）、右（right）四个边。外边距（margin）表示从一 个元素的边到相邻元素(或者文档边界)之间的距离
p#label{
color: orangered;
text-transform: uppercase;
margin-top: 5em ;
margin-right: 3em ;
margin-bottom:5em ;
margin-left: 3em;
}
等同于
p#label{
color: orangered;
text-transform: uppercase;
margin: 5em 3em 5em 3em;
}
为元素设置内边距
p#title{
color:red;
padding: 5em 3em 5em 3em;
}
等同于
p#title{
color:red;
padding-top: 5em;
padding-right: 3em;
padding-bottom: 5em ;
padding-left: 3em;
}
边框
边框（border）可以有多种用途，比如作为装饰元素或者作为划分两物的分界线。在设置边框方面，CSS 为你提供了无尽选择。
- 边框宽度由 CSS 属性 border-width 定义，其值可以是“thin”（薄）、“medium”（普通）或“thick” （厚）等，也可以是像素值。
- CSS 属性 border-color 用于定义边框的颜色。
- 边框样式[border-style]
p.footer{
color: blue;
font: bold italic 3em 华文宋体,新宋体;
text-align: center;
text-decoration: none;
letter-spacing: 0.50em;
border:0.05em dotted gold;
}
高度和宽度
- 设定宽度[width]
- 设定高度[height]
p.content{
color: orangered;
font-variant: small-caps;
font-weight:bold;
font-size: 2em;
width: 50%;
height: auto;
}
浮动元素（float）
我们可以通过 CSS 属性 float 令元素向左或向右浮动。也就是说，令盒子及其中的内容浮动到文档（或 者是上层盒子）的右边或者左边。比如我们要实现一个图文混排的效果
定义一个css Id
#picture{
float: left;
width: 200px;
}
html代码
<div>
<div id="picture">
<img src="../../images/bg_post_activity_1.png" alt="这是一张图片" width="200px" >
</div>
<p>
实现图文混排，实现图文混排，实现图文混排，实现图文混排，实现图文混排，实现图文混排,........，实现图文混排，实现图文混排，实现图文混排， </p>
</div>
元素的定位
CSS 定位令你可以将一个元素精确地放在页面上你所指定的地方
- 绝对定位
- 相对定位
绝对定位
要对元素进行绝对定位，应将 position 属性的值设为 absolute。接着，你可以通过属性 left、right、 top 和 bottom 来设定将盒子放置在哪里。
#box1 {
position:absolute;
bottom: 50px;
right: 50px;
}
html代码
<div id="box1">
<p>
<a href="#" target="_blank">测试css样式的伪类</a>
</p>
</div>
总结：
今天大致学习了一下css的基本使用，以及一些常用的css样式。