前端_css

Cascading Style Sheets 层叠样式表

一、基本样式：

内联：<span style="color:red;font-size:10px;" >text</span>

嵌入：<style type="text/css">span{color:red;font-size:10px;}</style>

外部：<link href="style.css" rel="stylesheet" type="text/css">

适用情况

内联式:局部特殊化

嵌入式:统一标签样式格式

外联式:方便代码重用和管理

rel是relationship的英文缩写

stylesheet中style是样式的意思,sheet是表格之意,总起来是样式表的意思

rel="stylesheet" 描述了当前页面与href所指定文档的关系.即说明的是,href连接的文档是一个新式表

二、选择器：

1.标签选择器

2.类选择器:

.setGreen{color:green;}

<span class=“setGreen”>text</span>

3.id选择器：

#setGreen…

同一页面头体脚只出现一次，用id

class可以并列使用，id不行

4.子选择器：

> 选择指定标签元素的第一代子元素

.first>span{color:red;

}

5.包含(后代)选择器

空格

6.通用选择器：

* 匹配所有标签

7.伪选择器：

a:hover{color:red;}

8.分组选择器：

.first,#second span{color:green;}

三、特性

1.继承性：color可继承，border不可继承

2.特殊性：权值：

标签：1

类：10

id：100

3.层叠：权值一样时就近原则

4.重要性：!important

区分：

继承是指标签的样式可以由子代继承，但有些标签是不能继承的，eg：border。

特殊性指用用权重来确定最后起作用的样式，id=100，class=10，标签=1，继承=0.1；

层叠指当权重相同时，后面的样式覆盖前面的样式。

四、排版：

字体：body{font-family:"Microsoft Yahei";}

字号颜色：body{font-size:12px;color:#666}

粗体，斜体

文本修饰：underline,overline,line-through,blink

缩进：1em=16px(浏览器默认字体高度)

行间距，字间距

五、盒模型

元素分类：

块状元素都自带换行效果；

内联元素都是定义行内小区域且不换行，但如果没有内容就没有意义，不占空间；

内联块状元素除了不换行，即使没有内容也会占空间。

转换：

转为块状：a{display:block;}

转为内联：div{display:inline}

边框、宽高、填充、边界