CSS 层叠样式表

CSS

层叠样式表（英文:Cascading StyleSheet 简称CSS）

<!--引入样式表-->
<link rel="stylesheet" href="css/first.css">
<!--定义css样式,作用与当前html文档-->
<style>
    div{
        color:green;
    }
</style>

基本概念

CSS定义:

层叠样式表 样式通常存储在样式表中,外部样式表可以极大提高工作效率,通常存储在css文件中,多个样式定义可叠层为一个

CSS注释:

注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它。
CSS注释以 /* "开始, 以 */结束

/*这只是注释*/

CSS语法格式

CSS 规则由两个主要的部分构成：
选择器 && 一条或多条声明:
语法格式:

选择器{
			样式名字:值;
			......
		}

使用CSS方式

内联样式(Inline style) |行内样式表
内部样式表(Internal style sheet)
外部样式表(External style sheet)

1)行内样式表 style=“样式” 仅作用当前行

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

2)内部样式表 style标签对 定义在head中,作用当前html文档

<!--定义css样式,作用与当前html文档-->
<style>
    div{
        color:green;
    }
</style>

3)外部样式表 CSS

<!--引入样式表-->
<link rel="stylesheet" href="css/名字.css">

多重样式优先级:
(内联样式）Inline style
> （内部样式）Internal style sheet
>（外部样式）External style sheet > 浏览器默认样式
内联样式优先,内部和外部谁离元素近优先选择谁

选择器

搭配样式表使用

基本选择器:

id选择器#

根据标签的id属性值选中某个元素

<style>
    #bbc{
        color: red;
    }
</style>

<div id="bbc">我很好</div>

标签选择器

根据标签名选中一组元素

<style>
    p{
        background: greenyellow;
    }
</style>

<p>纳尼</p>

类选择器 .

根据标签的class属性值选择一组元素

<style>
    .bbb{
        color: aqua;
    }
</style>

<div class="bbb">请开始你的表演</div>

通用选择器 *

<style>
	*{
    		padding:0;
    		margin:0;
	}
</style>

清除浏览器的默认样式
固定优先级: id > class > 元素 > *

其他选择器

群组选择器: 选择多个元素 (用 , 分隔)

选择器1,选择器2...{样式}

后代选择器: (中间空格隔开)

A  a {样式}

直接子元素:

A > a{样式} 

相邻兄弟选择器

A+B{样式}

伪类选择器

CSS 伪类 (Pseudo-classes)

伪类的语法：

selector :pseudo-class {property: value}

CSS 类也可与伪类搭配使用。

selector.bbb :pseudo-class {property: value}

锚伪类
在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。

a:link {color: #FF0000}    /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF}   /* 鼠标移动到链接上 */   
a:active {color: #0000FF}  /* 选定的链接 */

hover{ }悬停样式

css属性组

动画

文本

color颜色

十六进制值 - 如: ＃FF0000
一个RGB值 - 如: RGB(255,0,0)
颜色的名称 - 如: red

<p style="color: #FF0000">哦哦</p>
<p style="color:rgb(255,0,0)">哦哦</p>
<p style="color:red">哦哦</p>

text-align水平方向对其方式 行内元素无效

属性值:
left
center
right

text-decoration

规定添加到文本的修饰，属性值：none、underline、overline、line-through

1. underline
   对文本添加下划线，与HTML的u元素相同。
2. overline
   对文本添加上划线。
3. line-through
   对文本添加中划线，与HTML中的s和 strike 元素相同。
4. none
   关闭原本应用到元素上的所有装饰。

text-indent

设置文本首行缩进

线框

框

display 属性规定元素应该生成的框的类型。这个属性用于定义建立布局时元素生成的显示框类型。
属性值:

行内和块的特点都有 能够设置宽高,默认宽度自己撑起

背景

background-color ---- 背景颜色
十六进制值 - 如: ＃FF0000(# 6个字符)
一个RGB值 - 如: RGB(255,0,0)
颜色的名称 - 如: red
rgb三原色 (0 ~ 255,0 ~ 255,0 ~ 255)
rgba(0 ~ 255,0 ~ 255,0 ~ 255) a是透明度 0~1
background-image:url("")背景图片
背景图片是否重复 background-repeat:
背景的复合属性 background 值顺序可以改变,选择性的给值

background: rgb(139,0,0);
background: rgba(139,0,0,0.5);
background-image: url("img/aaa.jpg");
background-repeat: no-repeat;
background-repeat: repeat-x;
background: url("img/aaa.jpg") no-repeat;

边框和轮廓

内容页的媒体属性

尺寸

盒子模型

盒子模型:内容 + padding + border + margin

用户所看到的元素大小: 内容 + padding + border

位置设置:
只给1个值 上下左右都是存在相同的距离
给2个值 上下为值1 左右为值2
给3个值 上右下 依次值1值2值3 左与右相同
给4个值 上右下左(顺时针)
可以只给一个方向上的边距,根据实际情况来选择

text-align ---- 水平居中 行和行内块
line-height ---- 行高
center ---- 垂直居中 px 100% 2(倍数)
vertical-align ---- 垂直方向对齐 行和行内块
padding ---- 内边距
    如果内容设置了背景样式,会延伸到边距上
margin ---- 外边距
border ---- 边框

盒子模型(新)
盒子模型(旧)

padding:内边距

    设置元素所有内边距的宽度，或者设置各边上内边距的宽度。如果在表的内容中控制文本到边框的内边距，使用td和th元素的填充属性： td { padding:15px; }
    单独设置各边的内边距：padding-top、padding-left、padding-bottom、padding-right
    默认按照上右下左的顺序设定

td .test1 {padding: 1.5cm}		
td .test2 {padding: 0.5cm 2.5cm}

<table border="1">
<tr>
	<td class="test1">
		这个表格单元的每个边拥有相等的内边距。
	</td>
</tr>
</table>
<br />
<table border="1">
<tr>
	<td class="test2">
	这个表格单元的上和下内边距是0.5cm，左和右内边距是 2.5cm。
	</td>
</tr>
</table>

注意：通过padding属性设置元素内边距时，会使元素变形。若不想影响格式效果，可以用margin属性设置元素外边距。

margin:外边距

设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度。

p.margin {margin: 2px 4px 3px 4px;}

单独设置各边的外边距：margin-top、margin-left、

margin-bottom、margin-right
p.margin{
margin-top:100px; 
margin-bottom:100px;
margin-right:50px; 
margin-left:50px; 
} 
*{margin: auto auto;} 
*{margin: 100px auto;}

说明：
auto：自动，可以理解为居中的意思。浏览器自动计算外边距。
margin: auto auto：第一个auto表示上下外边距自动计算，第二个auto表示左右外边距自动计算。但是上下外边距在自动计算时不会生效，而左右外边距会生效，表现为居中状态，效果如下：

若要设置为上下左右居中状态，则要计算好自行设置上下的外边距，效果如下：

border:边框

设置所有的边框属性。
1） 可同时设置边框的宽度、样式、颜色

table, th, td { border: 1px solid black; }
table { width:100%; height:50px; }

2） 使用border-width、border-style、border-color单独设置

table,td {
border-width: 1px;
border-style: dotted;
border-color: green;
}

border-style的属性

3） border-collapse

设置是否将表格边框折叠为单一边框，属性值：separate（默认，单元格边框独立）、collapse（单元格边框合并）。

table { border-collapse : collapse; }

4） border-spacing设置分隔单元格边框的距离。
注意：
设置间距,border-collapse: separate;的状态下才有效。

table {border-spacing:10px;}

字体

font-size 字体大小

font-size :30px

font-family: 字体类型

font-family: "宋体" 

font-family: 宋体 ----一般没有问题,不建议使用

font-family: "宋体" ,"华文行楷","黑体"; (依次查看,没有则跳到下一个)

font-weight 字体宽度

文字加粗 100~900
bold 加粗 bolder 加粗
normal 正常 lighter正常

font-style 字体样式

italic斜体
normal正常

内容生成

网格

超链接

线框

列表

list-style

list-style-type：列表项目标记样式

list-style-position：列表项目标记位置

list-style-inside
list-style-outside
list-style-none 去除 列表标记
list-style-image：把图像设置为列表中的项目标记

浮动

文档流 行内从左到右 块从上到下

float:left/right

让元素按照指定的方向移动
停止: 当遇到周围其他元素或浏览器边界的时候停止
脱离文档流(半脱离)
    内容会让出前面浮动的位置

清除浮动

并不是真的清除浮动效果

方法:

1.clear 元素周围不能有浮动元素

left 元素的左边不能有浮动元素
right 元素的右边不能有浮动元素
both 元素的两边不能有浮动元素

描述: 实际上不满足条件时移动的是自己
使用clear right时右边有浮动元素时并不会产生效果
下接文档推荐使用clear both

2.给浮动元素的父元素设置高度

3.overflow:hidden;超出部分隐藏

并非官方的方法,但是可以使用它来达到清除浮动的效果,可以让父元素在文档流中占位置

外边距

字幕

多列

内边距

页面媒体

定位

分页

Ruby

语音

表格

2D/3D 转换

过渡

用户界面

样式继承

如果某一个元素并没有设置父元素相关的样式， 那么就会使用继承机制将父元素的样式继承下来。

定位和浮动

    CSS 定位 (positioning) 属性允许你对元素进行定位 ，定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。

    CSS 有三种基本的定位机制：普通流、浮动和绝对定位

    除非专门指定，否则所有框都在普通流中定位，即普通流中的元素的位置由元素在HTML 中的位置决定

    浏览器在读取HTML源代码的时候是根据元素在代码出现的顺序读取，最终元素的呈现方式是依据元素的盒子模型来决定的。行内元素是从左到右，块状元素是从上到下。默认的书写方式即是普通流。

1.position （绝对定位）

通过使用 position 属性，我们可以选择 4 种不同类型的定位，这会影响元素框生成的方式

• static :元素框正常生成。作为文档流的一部分（默认值）
• relative :元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
• absolute :元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
• fixed :元素框的表现类似于将 position 设置为absolute，不过其包含块是视窗本身。

static : 没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）
relative : 生成相对定位的元素，相对于其正常位置进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定
absolute : 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed : 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

<style type="text/css">
div{ width: 100px; height: 50px; line-height: 50px; text-align: center; color: #fff; }
</style>
<div style="background: blue">A</div>
<div style="background: red; position: relative; top: 20px; left: 20px;">B</div>
<div style="background: green">C</div>

float（浮动）

float的属性值有none、left、right。

• 只有横向浮动，并没有纵向浮动。
• 当元素应用了float属性后，将会脱离普通流，其容器（父）元素将得不到脱离普通流的子元素高度。
• 会将元素的display属性变更为block。
• 浮动元素的后一个元素会围绕着浮动元素（典型运用是文字围绕图片）
• 浮动元素的前一个元素不会受到任何影响（如果你想让两个块状元素并排显示，必须让两个块状元素都应用float）。
  
  

position和float兼容

元素同时应用了position: relative、float、（top / left / bottom / right）属性后，则元素先浮动到相应的位置，然后再根据（top / left / bottom / right）所设置的距离来发生偏移。

<div style="position:relative; float:right; left:50px; top:10px;">div</div>

元素同时应用了position: absolute及float属性，则float失效。

<div style="position: absolute; right:10px; top: 10px; float: left;">
我是一个应用了position：absolute和float：left的DIV，不过我还是在浏览器的右边，没有浮动到左边。
</div>

第一个元素应用了position之后会覆盖着接下来的float元素（如果两个元素所处的位置相同）

<div style="position: absolute; left:10px; top: 10px;">
    我是一个应用了position：absolute的DIV。
</div>
<div style="float:left; background: red; width: 300px; height: 150px; ">
    我是float：left的DIV
</div>

同时应用position: absolute和float: left会导致清除浮动无效（position: relative则可以清除浮动）。
常用的清除浮动的方法有两种：
1） 通过在容器中添加一个标签，设置该标签的样式为 clear: both
2） 容器设置overflow: hidden

<div style="background: #fff; width: 100%; overflow: hidden;">
    <div style="float: left; position: absolute;">我是DIV</div>
    <div style="clear: both;"></div>
<div>

伪类和伪元素

    伪类和伪元素我们又称伪类选择器和伪元素选择器，利用这些选择器，可以为文档中不一定具体存在的结构指定样式，或者为某些元素（甚至是文档本身）的状态所之所的幻像类指定样式。换句话说，会根据另外某种条件而非文档结构向文档中的某些部分应用样式，而且无法通过研究文档的标记准确地推断出采用何种方式应用样式。
    但这并不是随机的，实际上，这是根据某种无法提前预测的暂时条件来应用样式。什么情况下将出现样式实际上是明确定义的。

    伪类可以用来指定一个或多个与其相关的选择符的状态，用于向某些选择器添加特殊效果，形式如下

选择符：伪类{属性：属性值} 

使用顺序一般按照 link、visited、hover、active顺序进行设定，是具体情况而定

1.E:link
2.E:visited
3.E:hover
4.E:active
5.E:not()
6.E:first-child
7.E:checked

伪元素是指在HTML的文档指定的信息之外，创建了文档的额外信息。形式如下

选择符：伪对象{属性：属性值} 

1.E:before/E::before
2.E:after/E::after