目录
三种方式优先级：行内样式最大，其余两种最后引入，优先级最高。
一.CSS是什么？
CSS(Cascading Style Sheets)，层叠样式表。css称为层叠样式单
它是一种专门描述结构文档的表现方式的文档，主要用于网页风格设计，包括字体大小、颜色、以及元素的精确定位等。
在传统的web网页设计里，使用CSS能让单调的HTML网页更富有表现力。
二.css引入方式
三种方式优先级：行内样式最大，其余两种最后引入，优先级最高。
1.行内样式
直接在开始标签上加style属性来控制样式
例如：<div style="color:red;">内容</div>2.内嵌式
所有的样式都写到一个<style></style>内部，该标签放<head></head>内部
例如：<style type="text/css">
选择器{ 样式属性名 ：属性值 ; }
</style>3.外链式
所有的样式都写到一个单独的css文件里（文件后缀是 .css）,通过在<head></head>内部用<link rel="stylesheet" href="css文件路径">来引入该css文件
总结：
CSS中提升优先级属性!important的用法总结
补充：!important为开发者提供了一个提升样式权重的方法。应当注意的是!important是对整条样式的声明，包括这个样式的属性和属性值。
一、语法
选择器{样式:值 !important;}
二、说明
提升指定样式规则的应用优先权，即!important为开发者提供了一个增加样式权重的方法，让浏览器首选执行这个语句。
例如下面这个样式：
div{
margin-left:20px !important;
margin-left:40px;
}
如果是在除了IE6的浏览器中，这些浏览器支持!important属性，也就是说他们会默认让margin-left:20px!important; 这条语句生效，下面的不带!important声明的样式将不会覆盖它，换句话说就是他的级别最高，下面的人都不能取代我！
在IE6及以下浏览器有个比较显式的支持问题存在，!important在同一条规则集里不生效。请看下述代码：
div {
margin-left:20px!important;
}
div {
margin-left:40px;
}
在上述代码中，IE6及以下浏览器中div的margin-left与其它浏览器一致，都为20px;
注意：
1、IE6及更早浏览器下，!important在同一条规则集内不生效。
2、如果!important被用于一个简写的样式属性，那么这条简写的样式属性所代表的子属性都会被作用上!important。
3、关键字!important必须放在一行样式的末尾并且要放在该行分号前，否则就没有效果。
详细讲解：
三.选择器
名称 示例 通配符选择器 （ 权重0.5） *{
样式属性名 : 属性值 ;
...
}标签选择器 （ 权重1）
标签名{
样式属性名 : 属性值 ;
...
}类选择器 （权重10） .类值{
样式属性名 : 属性值 ;
...
}扩展：多类名开发使用场景
（1）可以把一些标签元素相同的样式（共同部分）放到一个类里面。
（2）这些标签都可以调用这个公共的类，然后再调用自己独有的类。
（3）从而节省CSS代码，统一修改也非常方便。
简单理解：就是给某个标签添加了多个类，从而起到节省代码和提高
样式复用率并且方便修改的方法。
示例：类1
类2
调用： class="类1（空格隔开）类2"
id选择器 权重100 #id值{
样式属性名 : 属性值 ;
...
}注意：同一个id选择器只能用一次
包含选择器 权重相加 选择器E 选择器F{
样式属性名 : 属性值 ;
...
}分组选择器 选择器E，选择器F,...{ }
四.字体相关样式
1. font-size 字体大小 单位px,em
2. font-family 字体系列
设置多个字体样式时，多个字体样式间用逗号隔开
如果设置的字体名字里有空格的，用引号引起来
3. font-style 字体风格
值： 1）normal 正常 不倾斜
2）italic 斜体
3）oblique 倾斜、4. font-weight 字体粗细
值: 1) normal 正常 不加粗
2）bold 加粗
3）bolder 粗体
4）lighter 细体
5）100-900 9个层次 数值越大，字体越粗
5. line-height 行高
值： 1）数值+单位
2） 数值 （无单位） 倍数
缩写： font : font-style值 font-weight值 font-size值 / line-height值 font-family值 ;
五.display属性操作（元素转换）
display ： block ； 转换为块元素
display ： inline ； 转换为行内元素
display ： inline-block ； 转换为行内块元素
display ： none ； 元素隐藏display：inherit；继承父级元素的display属性值
href与src的区别
（1）请求资源类型不同：
href是超文本引用的简写，用来为当前元素和文档之间建立连接，常用的是link、a标签。
src会将指向的资源下载并引用到当前文档中，常用的标签有script，img，iframe标签。（2）作用的结果不同：
href是为当前文档和引用资源建立联系；
而src是替换当前的元素。（3）浏览器的解析方式不同
herf引用的资源，浏览器会将其识别为CSS文档，并行下载资源并且不会停止对当前文档的处理。
当浏览器解析到src时，会暂停其他资源的下载和处理，直接将该资源下载，编译，执行完毕，图片和框架也是如此，类似于将所指资源应用到当前内容。action可以传递表单数据，不是单纯的跳转
link与@import引入css文件用法区别
页面导入外部css文件的方法通常有两种，一种在网页中直接link标签加入，另一种在页面中@import引入css文件。两种引入形式如下：
link引入形式：
<link href="styles.css" type="text/css" />
@import引用形式：
<style type="text/css">@import url("styles.css");</style>
1 适用范围不同
@import可以在网页页面中使用，也可以在css文件中使用，用来将多个css文件引入到一个css文件中；而link只能将css文件引入到网页页面中。2 功能范围不同
link属于XHTML标签，而@import是CSS提供的一种方式，link标签除了可以加载CSS外，还可以定义rel连接属性，定义RSS等，@import就只能加载CSS。3 加载顺序不同
页面被加载的时候，link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁）。4 兼容性
由于@import是css2.1提出的，所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。5 控制样式时的差别
使用link方式可以让用户切换CSS样式.现代浏览器如Firefox,Opera,Safari都支持rel=”alternate stylesheet”属性(即可在浏览器上选择不同的风格),当然你还可以使用Javascript使得IE也支持用户更换样式。6 使用DOM控制样式时的差别
当使用JavaScript控制DOM去改变样式的时候，只能使用link标签，因为@import不是DOM可以控制的。
3480
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
