前端——CSS1
一，概述
CSS（Cascading Style Sheets）（级联样式表）
css是一种样式表语言，为html标签修饰定义外观，分工不同
涉及：对网页的文字、背景、宽、高、布局进行修饰
分为内嵌样式表（平常练习时使用）和外部样式表（制定网页时使用，将css与html网页分离）
CSS与HTML的关系:
HTML是网页内容
CSS定义页面的样式
二，基本语法——行内样式表
1.样式表：
（1）行内样式表
行内样式表：是通过标签的 style 属性来设置元素的样式，其基本语法格式如下：
< 标签名 style=" 属性 1: 属性值 1; 属性 2: 属性值 2; 属性 3: 属性值 3;"> 内容 </ 标签名 >
（2）内嵌样式表
内嵌式样式表是将 CSS 代码集中写在 HTML 文档的 head 头部标签中，并且用 style 标签定义
<html>
<head>
<title> 样式规则 </title>
将内嵌样式表放在此处
<style></style>
</head>
<body>
</body>
</html>
（3）外部样式表
外部样式表是将所有的样式放在一个或多个以 .CSS 为扩展名的外部样式表文件中，通
过 link 标签将外部样式表文件链接到 HTML 文档中
使用link（链接）标签 :
<head>
<link href="引入样式的文件" rel="stylesheet " type=" text /css">
<style type=" text /css">
</style>
2.选择器:
（1）标签选择器：
通过标签选择器可以选择页面中的所有指定标签
语法：标签名 {}
（2）类选择器：
通过标签的 class 属性值选中一组标签
语法： .class 属性值 {}
（3）id 选择器：
通过标签的 id 属性值选中唯一的一个标签
语法： #id 属性值 {}
（4）通配选择器 :
可以用来选中页面中的所有的标签
语法： *{}
3.文本修饰:
color ：字体颜色
font-size ：字体大小
font-family ：字体
text-align ：文本对齐
text-decoration:line-through ：定义穿过文本下的一条线
text-decoration:underline ：定义文本下的一条线
text-decoration:none ：定义标准的文本
font-style: italic; 斜体文本
font-weight: 字体粗细
line-height: 设置行高
4.背景修饰:
background-color:背景颜色
background-image 背景图片
background-repeat 背景重复
background-size 背景尺寸
background- position 背景位置
5.CSS的列表属性
CSS 列表属性可以放置、改变列表项标志，或者将图像作为列表项标志 。
list-style-image ：将图象设置为列表项标志。
list-style-position ： 设置列表中列表项标志的位置。
list-style-type ： 设置列表项标志的类型。
list-style： 简写属性。
6.CSS伪类
CSS伪类专门用来表示标签的一种的特殊的状态，当我们需要为处在这些特殊状
态的标签设置样式时，就可以使用伪类 。
（1）伪类的语法 ：
:hover伪类表示鼠标移入的状态
:active表示的是被点击的状态
:focus向拥有键盘输入焦点的标签添加样式。
（2）透明度
定义透明效果的属性是 opacity 。
opacity 属性设置标签的不透明级别 值为 1 。
规定不透明度：从 0.0 （完全透明）到 1.0 （完全不透明）。
7.块级,行级,行级块标签
（1）块级标签
无论内容多少 都会独自占据一行的，可以进行修饰。
例如<p>、<h1>、<ul>、<ol>、<hr/>等。
（2）行级标签
只占自身大小的标签，不会占一行，但是不能进行修饰。
例如<font>、<b>、<i>、<a>等。
（3）行块级标签
不会独自占一行，但是可以进行修饰。
例如 <input/> <img>等
8.Display
通过 display 样式可以修改标签的类型。
block ：设置标签为块标签
inline ：设置标签为行级标签
inline-block ：设置标签为行级块标签
9.div和span
（1）div 标签
div 是块级标签，可以放置任何标签。
div 没有任何附加功能，给了什么属性就能变成什么样。
div 主要的作用是被用来布局网页。
（2）span 标签
span 是行级标签
span 没有任何附加功能，给了什么属性就能变成什么样。
span 标签被用来选中文档中的文字。