CSS简介
CSS概念
CSS（Cascading Style Sheets）层叠样式表，又叫级联样式表，简 称样式表
CSS文件后缀名为 .css
CSS用于HTML文档中元素样式的定义
为什么需要CSS
使用css的目的就是让网页具有美观一致的页面
CSS和HTML之间的关系
1 HTML用于构建网页的结构
2 CSS用于构建HTML元素的样式
3 HTML是页面的内容组成，CSS是页面的表现
语法
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明
选择器通常是您需要改变样式的 HTML 元素 每条声明由一个属性和一个值组成
属性（property）是您希望设置的样式属性（style attribute）。每 个属性有一个值。属性和值被冒号分开
<style> h1{ color: blue; font-size: 12px; } </style>
CSS的引入方式
内联样式（行内样式）
要使用内联样式，你需要在相关的标签内使用样式（style）属性。 Style 属性可以包含任何 CSS 属性
温馨提示
缺乏整体性和规划性，不利于维护，维护成本高
<p style="background: orange; font-size: 24px;">CSS<p>
内部样式
当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使<style>用标签在文档头部定义内部样式表
温馨提示
单个页面内的CSS代码具有统一性和规划性，便于维护，但是在 多个页面之间容易混乱
<head> <style> h1 { background: red; } </style> </head>
外部样式（推荐）
当样式需要应用于很多页面时，外部样式表将是理想的选择。在使 用外部样式表的情况下，你可以通过改变一个文件来改变整个站点 的外观。每个页面使用<link>标签链接到样式表。<link>标签在 （文档的）头部
<link rel="stylesheet" type="text/css" href="xxx.css">
CSS样式表特征
继承性
指被包含在内部的标签可以拥有外部标签的样式，比如：text-、 font-、line-height，但有些属性不能继承，比如：border、 padding、margin
层叠性
简单的说，层叠就是对一个元素多次设置同一个样式，这将使用最 后一次设置的属性值。例如对一个站点中的多个页面使用了同一套 CSS样式表，而某些页面中的某些元素想使用其他样式，就可以针 对这些样式单独定义一个样式表应用到页面中。这些后来定义的样 式将对前面的样式设置进行重写，在浏览器中看到的将是最后面设 置的样式效果
优先级
样式定义冲突时，按照不同样式规则的优先级来应用样式 行内样式>内部样式（外部样式）
内部样式和外部样式优先级一样，写在后面的生效
CSS注释
注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它 CSS注释以 /* 开始, 以 */ 结束,
/* 这是注释 */
基础选择器
全局选择器
可以与任何元素匹配，优先级最低，不推荐使用
*{ margin: 0; padding: 0; }
元素选择器
HTML文档中的元素， p、b、div、a、img、body 等。
标签选择器，选择的是页面上所有这种类型的标签，所以经常描述 “共性”，无法描述某一个元素的“个性”
p{ font-size:14px; }
再比如说，我想让“学完前端，继续学Java”这句话中的“前端”两个变 为红色字体，那么我可以用<span>标签把“前端”这两个字围起来，然 后给<span>标签加一个标签选择器
<p>学完了<span>前端</span>，继续学Java</p> span{ color: red; }
温馨提示
1 所有的标签，都可以是选择器。比如ul、li、label、dt、dl、input、div等
2 无论这个标签藏的多深，一定能够被选择上
3 选择的所有，而不是一个
类选择器
规定用圆点 . 来定义，针对你想要的所有标签使用
<h2 class="oneclass">你好</h2> /*定义类选择器*/ .oneclass{ width:800px; }
class属性的特点
1 类选择器可以被多种标签使用
2 类名不能以数字开头
3 同一个标签可以使用多个类选择器。用空格隔开
ID选择器
针对某一个特定的标签来使用，只能使用一次。 css 中的 ID选择器 以 # 来定义
<h2 id="mytitle">你好</h2> #mytitle{ border:3px dashed green; }
特别强调
1 ID是唯一的
2 ID不能以数字开头
合并选择器
语法： 选择器1,选择器2,...{ }
作用：提取共同的样式，减少重复代码
.header, .footer{ height:300px; }
选择器的优先级
CSS中,权重用数字衡量
元素选择器的权重为: 1
class选择器的权重为: 10
id选择器的权重为: 100
内联样式的权重为: 1000
优先级从高到低: 行内样式 > ID选择器 > 类选择器 > 元素选择器
CSS常用属性
字体属性
CSS字体属性定义字体，加粗，大小，文字样式
color ：规定文本的颜色
div{ color:red;} div{ color:#ff0000;} div{ color:rgb(255,0,0);} div{ color:rgba(255,0,0,.5);}
font-size： 设置文本的大小
能否管理文字的大小，在网页设计中是非常重要的。但是，你不能 通过调整字体大小使段落看上去像标题，或者使标题看上去像段 落。
h1 {font-size:40px;} h2 {font-size:30px;} p {font-size:14px;}
温馨提示 ：chrome浏览器接受最小字体是12px
font-weight ：设置文本的粗细
H1 {font-weight:normal;} div{font-weight:bold;} p{font-weight:900;}
font-style ：指定文本的字体样式
温馨提示
每个值用逗号分开
如果字体名称包含空格，它必须加上引号
font-family:"Microsoft YaHei","Simsun","SimHei";
背景属性
CSS背景属性主要有以下几个
文本属性
text-align
指定元素文本的水平对齐方式
text-decoration
text-decoration 属性规定添加到文本的修饰，下划线、上划线、删 除线等
text-transform
text-transform 属性控制文本的大小写
text-indent
text-indent 属性规定文本块中首行文本的缩进
p{ text-indent:50px; }
列表属性
list-style-type
list-style-type 属性设置列表项标记的类型
list-style-image
list-style-image 属性使用图像来替换列表项的标记
ul { list-style-image: url('sqpurple.gif'); }
list-style-position
list-style-position属性指示如何相对于对象的内容绘制列表项标记
list-style
list-style 简写属性在一个声明中设置所有的列表属性 可以设置的属性（按顺序）： list-style-type, list-style-position, list-style-image
ul { list-style: none;}
表格属性
表格边框
指定CSS表格边框，使用border属性
table, td { border: 1px solid black; }
折叠边框
border-collapse 属性设置表格的边框是否被折叠成一个单一的边框 或隔开
table { border-collapse:collapse; } table,td { border: 1px solid black; }
表格宽度和高度
width和height属性定义表格的宽度和高度
table { width:100%; } td { height:50px; }
表格文字对齐
表格中的文本对齐和垂直对齐属性
text-align属性设置水平对齐方式，向左，右，或中心
td { text-align:right; }
垂直对齐属性设置垂直对齐
td { height:50px; vertical-align:bottom; }
表格填充
如果在表的内容中控制空格之间的边框，应使用td和th元素的填充 属性
td { padding:15px; }
表格颜色
下面的例子指定边框的颜色，和th元素的文本和背景颜色
table, td, th { border:1px solid green; } td { background-color:green; color:white; }
其他属性
letter-spacing
letter-spacing 属性增加或减少字符间的空白（字符间距）
h1 {letter-spacing:2px} h2 {letter-spacing:-3px}
line-height
设置行高
p{ height: 30px; line-height: 30px; }
overflow
div{ width:150px; height:150px; overflow:scroll; }
white-space
white-space属性指定元素内的空白怎样处理
p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
verticle-align
vertical-align 属性设置一个元素的垂直对齐方式 该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐
img{ vertical-align:middle; }
opacity
设置整个元素的透明度，取值0-1,0表示完全透明，1表示不透明
