CSS

什么是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 ：默认允许两边都有浮动