1.CSS 概述
•CSS 指层叠样式表 (Cascading Style Sheets)
•样式定义如何显示 HTML 元素
•样式通常存储在样式表中
•把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
•外部样式表可以极大提高工作效率
•外部样式表通常存储在 CSS 文件中
•多个样式定义可层叠为一
2.基本属性
CSS语言
CSS语言包括选择器、属性和属性值两个部分。
1、选择器，选择器的作用是找到与其匹配的html元素，然后将其定义的属性和属性值用于修饰该元素。分为类型选择器（div）、Class选择器（.myclass）、ID选择器（#myid）、style属性（直接放置于html元素内）
2、属性和属性值
属性和属性值位于CSS语言的一组{}中，用:分隔属性和这个属性的值，用;分割一组属性和属性值。CSS语言定义了大量属性及属性值用于修饰元素，使我们的元素看起来更加美观，常用的CSS属性及属性值的英文单词、对应功能、对应解释、对应简单例子如下：
float 浮动
float:left;/靠左浮动/
float:right; /靠右浮动/
width 宽度
width:100px; /对象宽度100像素/
height 高度
height:100px; /对象高度100像素/
margin 外补距
margin:10px 20px 30px 40px; /对象上距离10px；右为20px；下为30px；左为40px/
padding 内补距
padding:10px 20px 30px 40px; /对象内距离边上为10px；右为20px；下为30px；左为40px/
border 边框
border:1px solid #000000; /对象边框为1px宽黑实线/
font-family 字体
font-family:“黑体”; /对象文字字体为黑体/
font-size 文字大小
font-size:12px; /对象文字大小为12px/
font-weight 文字加粗
font-weight:bold; /对象文字被加粗/
line-height 行高
line-height:20px; /对象内上下2排文字行高为20px（包括文字自身占用高度）/
text-decoration 文字装饰（下划线、删除线）
text-decoration:underline; /对象文字加下划线/
background 背景属性
background:#fffff url(“bg.png”) repeat-x 0 0 /对象背景色为白色、背景图片为bg.png 按X轴分析重复显示并距离顶部和左为0像素/
text-align 内容左中右对齐属性
text-align:center; /对象内内容左右居中显示/
position 定位属性
position:absolute; /元素使用绝对定位/
注意：元素选择器是具备优先级，相同属性配置按照”类型选择器< Class选择< ID选择器<style属性”这个顺序进行覆盖
3.实例
p {color:red;text-align:center;}
p{
color:red;
text-align:center;
}
4.注释
CSS注释以 “/" 开始, 以 "/” 结束
/*这是个注释*//**/
5.id 和 class 选择器
1.class 选择器
class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：
.center {text-align:center;}/*居中*/
可以所有的 p 元素使用 class=“center” 让该元素的文本居中:
p.center {text-align:center;}
2.id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。
以下的样式规则应用于元素属性 id=“A”:
#A
{
text-align:center;
color:red;
}
ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。
6.CSS语法结构
CSS 语法由三部分构成:选择符(selector)、属性(property)和值(value)
selector {property:value;}
属性是你想要设置的样式属性，每个属性都有一个值，属性和值用冒号 “:” 分开
每个选择符可以有多个属性值，之间用分号 “;” 隔开
例如：
<style type="text/css">
body {background-color:#ccc;}</style>
7.如何引入CSS？
将CSS应用到网页中有：3种方式 （行内样式表、内部样式表、外部样式表）
a.行内样式表（位于html元素内部）
行内样式是指将CSS样式编码直接写在HTML标签中的style属性里，
*注意：行内样式不需要写选择器。
例如：
<body style="background-color:#ccc;">
b.内部样式表（位于标签内部）
内部样式作为页面中的一个单独部分，由
例如：
<head>
<style type="text/css">
body{
background-color:#ccc;
}
</style></head>
c.外部样式表
外部样式表是将CSS样式代码单独放在一个外部文件".css"中，再由网页文件".html"进行调用。
*尽量使用外部样式表这种方式，目的是让我们的html结构与表现形式分开
/* "style.css"代码 */
body{
background-color:#cccccc;
}<!-- "index.html"代码 --><head>
<link rel="stylesheet" type="text/css" href="style.css" /></head>
8.样式优先级
a.写法优先权（就近原则）
行内样式表 > 内部样式表 > 外部样式表
b.选择符优先权
选择符的比较（从低到高）:
通配符"*"
类型选择符"标签名为选择符名称的"
子选择符">"
包含选择符
class选择符
属性选择符
id选择符
行内样式
!important[慎用]
9.样式继承
HTML中的标签会继承部分父标签的样式。
比如 body { color:red;} ，那么body中的所有标签及标签下的所有子标签的文本都将变成红色。
*!important的用法
在两个相同类型的css样式定义中，优先执行后面一个
例如：
p{font-size:15px; font-size:20px;}
这种情况下，执行"font-size:20px;" 。
但是可以通过!important语法,提升某一句样式表的重要性,使及优先执先 !important标注的语句
例如：
p{font-size:15px!important; font-size:20px;}
这时，执行"font-size:15px"
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
