什么是CSS
- CSS指重叠样式表(Cascading Style Sheets)
- 样式定义如何显示HTML元素
- 样式通常存储在样式表中
- 把样式添加在HTML中，是为了解决内容与表现分离的问题
- 外部样式表可以极大提高工作效率
- 外部样式表通常存储在CSS文件中
- 多个样式定义可层叠为一
CSS创建
HTML去完成文档，浏览器会根据CSS去美化它，CSS中常见的4种引入方式如下
行内式
<p style="color: brown">hello world</p>
这种情况下，会史的HTML的代码显得繁琐不好看，我们一般不推荐使用
嵌入式
<style>
p{
background-color: brown;
}
</style>
这种方法是通过写在body内的标签去标示，然后统一写在head标签内，一般情况下我们测试代码的时候用的比较多，生产中大多选择链接式
链接式
将CSS代码统一写在CSS文件中，然后通过link去引用
body{
margin: 0px;
}
.action_menu{
background-color: dodgerblue;
}
.action{
color: gold;
font-family: 'Lucida Bright';
}
#引用
<link href="布局.css" rel="stylesheet" type="text/css">
导入式
一般不用
<style type="text/css">
@import"文件路径";
</style>
CSS选择器
id和class选择器
- id选择器可以表示特定id的HTML元素指定特定的格式，CSS中id选择器以'#'来定义
- class选择器用于描述一组元素的样式，可以在多个元素中使用，以'.'来定义
id实例
<style>
#p1{
color: red;
}
</style>
class实例
.action_menu{
background-color: dodgerblue;
}
标签选择器和 * 选择器
标签选择器通过HTML中的标签来匹配
* 选择器能匹配任何元素
一般这两种不常用
属性选择器
具有特定的HTML元素
#属性选择器：把标题为title的元素变色
[title]
{
color:blue;
}
#属性和值选择器：标题title='runoob'元素的边框样式:
[title=runoob]
{
border:5px solid green;
}
#多值：其中一个值为hello
[title~=hello] { color:blue; }
#匹配以hello开头的每隔元素
[title ^=hello] {color:red;}
#$匹配以hello结尾的元素
[title $=hello] {color:red;}
#* 匹配包含hello的元素
[title *=hello] {color:red;}
p:before 在每个 <p> 元素的内容之前插入内容 p:before{content:"hello";color:red}
p:after 在每个 <p> 元素的内容之前插入内容
p:after{ content:"hello"；color:red}
组合选择器
CSS中包含如下四种组合方式：
- 后代选择器：以空格分割
- 子代(元素)选择器：以 > 分割
- 相邻选择器：以 + 分割
- 多元素选择器：以 , 分割
E,F 多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号分隔 div,p { color:#f00; }
E F 后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔 li a { font-weight:bold;
E > F 子元素选择器，匹配所有E元素的子元素F div > p { color:#f00; }
E + F 毗邻元素选择器，匹配所有紧随E元素之后的同级元素F div + p { color:#f00; }
伪类
语法
selector.class:pseudo-class {property:value;}
在支持CSS的浏览器中，链接的不同状态可以有不同的状态显示
a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */
注：
- 在CSS中a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
- 在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
- 伪类的名称不区分大小写。
CSS常用个属性
CSS背景
CSS背景属性属于定义HTML元素的背景，常用背景效果
- background-color 背景颜色
- background-image 背景图片
- background-repeat 设置背景图像是否及如何重复。
- background-attachment 背景图像是否固定或者随着页面的其余部分滚动。
- background-position 设置背景图像的起始位置。
body
{
background-image:url('img_tree.png'); #找到图片
background-repeat:no-repeat 0 0; #图片不重复
background-position:right top; #图片放的位置，右侧顶部
}
以上实例中我们可以看到页面的背景颜色通过了很多的属性来控制。为了简化这些属性的代码，我们可以将这些属性合并在同一个属性中。
背景颜色的简写属性为 "background"
body {background:#ffffff url('img_tree.png') no-repeat right top;}
CSS文本
文本对齐
文本排列属性是用来设置文本的水平对齐方式。文本可居中或对齐到左或右,两端对齐。
当text-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）。
h1 {text-align:center;}
p {text-align:right;}
p {text-align:justify;}
常用文本属性如下
color 设置文本颜色
direction 设置文本方向。
letter-spacing 设置字符间距
line-height 设置行高
text-align 对齐元素中的文本
text-decoration 向文本添加修饰
text-indent 缩进元素中文本的首行
text-shadow 设置文本阴影
text-transform 控制元素中的字母
unicode-bidi 设置或返回文本是否被重写
vertical-align 设置元素的垂直对齐
white-space 设置元素中空白的处理方式
word-spacing 设置字间距
CSS字体
字体样式一般分为加粗、大小、样式类型等
在CSS中，有两种类型的字体类型
- 通用字体系列 ： 拥有相似外观的字体系统组合（如 "Serif" 或 "Monospace"）
- 特定字体系列 ： 一个特定的字体系列（如 "Times" 或 "Courier"）
字体样式有三种情况
- 正常：正常显示
- 斜体：以斜体字显示
- 倾斜的文字：文字向一侧倾斜和斜体类似，但不支持
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
下面是常用字体属性
font 在一个声明中设置所有的字体属性
font-family 指定文本的字体系列
font-size 指定文本的字体大小
font-style 指定文本的字体样式
font-variant 以小型大写字体或者正常字体显示文本。
font-weight 指定字体的粗细。
CSS列表
不同的列表有不同的标记类型，如下
ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}
ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}
CSS所有列表属性
list-style 简写属性。用于把所有用于列表的属性设置于一个声明中 list-style-image 将图象设置为列表项标志。 list-style-position 设置列表中列表项标志的位置。 list-style-type 设置列表项标志的类型。
CSS边框属性
- margin: 用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。
- padding: 用于控制内容与边框之间的距离；
- Border(边框) 围绕在内边距和内容外的边框。
- Content(内容) 盒子的内容，显示文本和图像。
在CSS中border-style属性用来定义边框的样式
none: 默认无边框 dotted: dotted:定义一个点线框 dashed: 定义一个虚线框 solid: 定义实线边界 double: 定义两个边界。 两个边界的宽度和border-width的值相同 groove: 定义3D沟槽边界。效果取决于边界的颜色值 ridge: 定义3D脊边界。效果取决于边界的颜色值 inset:定义一个3D的嵌入边框。效果取决于边界的颜色值 outset: 定义一个3D突出边框。 效果取决于边界的颜色值
注意 border-style四个属性值
border-style:dotted solid double dashed;
上边框是 dotted
右边框是 solid
底边框是 double
左边框是 dashed
border-style:dotted solid double;
上边框是 dotted
左、右边框是 solid
底边框是 double
border-style:dotted solid;
上、底边框是 dotted
右、左边框是 solid
border-style:dotted;
四面边框是 dotted
下面是所有的边框的属性列表
border 简写属性，用于把针对四个边的属性设置在一个声明。
border-style 用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
border-width 简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
border-color 简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。
border-bottom 简写属性，用于把下边框的所有属性设置到一个声明中。
border-bottom-color 设置元素的下边框的颜色。
border-bottom-style 设置元素的下边框的样式。
border-bottom-width 设置元素的下边框的宽度。
border-left 简写属性，用于把左边框的所有属性设置到一个声明中。
border-left-color 设置元素的左边框的颜色。
border-left-style 设置元素的左边框的样式。
border-left-width 设置元素的左边框的宽度。
border-right 简写属性，用于把右边框的所有属性设置到一个声明中。
border-right-color 设置元素的右边框的颜色。
border-right-style 设置元素的右边框的样式。
border-right-width 设置元素的右边框的宽度。
border-top 简写属性，用于把上边框的所有属性设置到一个声明中。
border-top-color 设置元素的上边框的颜色。
border-top-style 设置元素的上边框的样式。
border-top-width 设置元素的上边框的宽度。
CSS之display
display属性是设置一个元素如何显示，与之相似得属性visibility是设置元素的可见性
如若设置一个元素隐藏，可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"
另外display最重要的是可以改变块级元素和内联元素的属性，使之某个元素既具有块级元素的属性，又有内联元素的属性
下面的示例把列表项显示为内联元素：
li {display:inline;}
下面的示例把span元素作为块元素：
span {display:block;}
CSS Position(定位)
static定位
HTML元素的默认值，即没有定位，元素出现在正常的流中。
静态定位的元素不会受到top, bottom, left, right影响。
Fixed定位
元素的位置相对于浏览器窗口是固定位置。
即使窗口是滚动的它也不会移动，
p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}
Relative 定位
h2.pos_left
{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}
Absolute定位
绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>:
h2
{
position:absolute;
left:100px;
top:150px;
}
CSS Float(浮动)
元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。浮动元素之后的元素将围绕它。浮动元素之前的元素将不会受到影响。如果图像是右浮动，下面的文本流将环绕在它左边。
常见有两种一是float设置怎样浮动，二是clear清空浮动
FLOAT：指定一个元素是否可以浮动
- left
- right
- none
CLEAR：清空浮动现象
- left ：不允许左边有浮动
- right ：不允许右边有浮动
- both ：不允许两边都有浮动
- none ：默认允许两边都有浮动