一、CSS基础
1.什么是CSS?
CSS[Cascading Style Sheets],层叠样式表
CSS版本号:2.0
2.CSS有什么用?
快速维护页面元素(如文本、图像、链接等)的外观(如字体、字号、颜色等)。
3.HTML属性与CSS样式的使用原则(P59)
W3C建议尽量使用CSS样式取代HTML标记属性。
例如:
图像的src属性就无法用CSS取代,所以图像的
的src属性就必须使用HTML属性实现,但是图像
的width和height属性,也可以通过CSS样式实现,
所以,图像的width和height属性就可以CSS样式
实现。
4.CSS应用方式
4.1链接到外部的CSS文件
CSS文件的扩展名为.css
<link type="text/css" rel="stylesheet" media="all|screen|print" href="CSS文件URL"/>
all,所有媒体介质
screen,针对屏幕(浏览器)
print,针对打印机
操作步骤:
A.创建CSS文件
B.链接到CSS文件
4.2 书写于文档头部
<style type="text/css">
...
...
</style>
4.3 书写于标记内部
<标记名称 style="CSS样式"/>
<标记名称 style="CSS样式">...</标记名称>
5.CSS语法结构
选择器{
属性:值;
属性:值;
...
}
二、选择器(哪些对象将使用CSS样式)
1.通配选择器 -- * (能够自动应用于所有元素)
2.元素选择器 -- 标记名称(自动应用于指定的元素)
3.类选择器 -- .类名称
说明:
A.在使用CSS类时,需要添加class="类名称"属性
B.CSS类在声明需要加"点",但在使用时无需"点"。
C.多个CSS类之间以空格分隔。
D.变形的用法
元素名称.类名称,指只能用于指定元素。
如:
td.a3{
},其代表的意思就是:a3类只能应用给单元格
对象。
.类名称.类名称,指只能同时应用这两个类。
如:
.a3.a4{
},其表示的意思是:只能同时使用a3和a4这两 个类。
4.ID选择器 -- #id
A.只能手动的应用给文档的唯一对象。
B.使用时添加id="ID"属性。
C.对象的id除CSS可以使用外,还可以被
JavaScript或jQuery使用到。
JavaScript:
document.getElementById(string id)
jQuery
$('#id')
5.群组选择器(实际上具有相同属性的选择器的简捷方式)
选择器,选择器,...
6.派生选择器(后代选择器)
选择器 选择器 ...
说明:前面的选择器至少是后面选择器的父节点。
7.伪类选择器
:link,正常显示的状态
:hover,鼠标放上的状态
:active,鼠标按下的状态
:visited,访问过的状态
三、CSS单位
1.长度
px,像素
%,百分比
em,字号的倍数
2.颜色
A,英文名称,如red,green,blue等
B,完整十六位进制数字,如#ff0000(红色),#00ff00(绿色),#ffffff(白色),#000000(黑色)
C,简写十六位进制数字,如#f00
D,RGB模式,如rgb(0,0,255)
E.百分比RGB模式,如rgb(0%,100%,0%)
3.CSS选择器优先级
inline,IDs,classes,tags
例1:
内联样式其优先级的代码是:1,0,0,0
例2:
#a2{
}
ID选择器的优先级是:0,1,0,0
例3:
.a2{
}
类选择器的优先级是:0,0,1,0
例4:
p{
}
元素选择器的优先级是:0,0,0,1
例5
#a1 #a2 .a3 .a4 p{
}
1.什么是CSS?
CSS[Cascading Style Sheets],层叠样式表
CSS版本号:2.0
2.CSS有什么用?
快速维护页面元素(如文本、图像、链接等)的外观(如字体、字号、颜色等)。
3.HTML属性与CSS样式的使用原则(P59)
W3C建议尽量使用CSS样式取代HTML标记属性。
例如:
图像的src属性就无法用CSS取代,所以图像的
的src属性就必须使用HTML属性实现,但是图像
的width和height属性,也可以通过CSS样式实现,
所以,图像的width和height属性就可以CSS样式
实现。
4.CSS应用方式
4.1链接到外部的CSS文件
CSS文件的扩展名为.css
<link type="text/css" rel="stylesheet" media="all|screen|print" href="CSS文件URL"/>
all,所有媒体介质
screen,针对屏幕(浏览器)
print,针对打印机
操作步骤:
A.创建CSS文件
B.链接到CSS文件
4.2 书写于文档头部
<style type="text/css">
...
...
</style>
4.3 书写于标记内部
<标记名称 style="CSS样式"/>
<标记名称 style="CSS样式">...</标记名称>
5.CSS语法结构
选择器{
属性:值;
属性:值;
...
}
二、选择器(哪些对象将使用CSS样式)
1.通配选择器 -- * (能够自动应用于所有元素)
2.元素选择器 -- 标记名称(自动应用于指定的元素)
3.类选择器 -- .类名称
说明:
A.在使用CSS类时,需要添加class="类名称"属性
B.CSS类在声明需要加"点",但在使用时无需"点"。
C.多个CSS类之间以空格分隔。
D.变形的用法
元素名称.类名称,指只能用于指定元素。
如:
td.a3{
},其代表的意思就是:a3类只能应用给单元格
对象。
.类名称.类名称,指只能同时应用这两个类。
如:
.a3.a4{
},其表示的意思是:只能同时使用a3和a4这两 个类。
4.ID选择器 -- #id
A.只能手动的应用给文档的唯一对象。
B.使用时添加id="ID"属性。
C.对象的id除CSS可以使用外,还可以被
JavaScript或jQuery使用到。
JavaScript:
document.getElementById(string id)
jQuery
$('#id')
5.群组选择器(实际上具有相同属性的选择器的简捷方式)
选择器,选择器,...
6.派生选择器(后代选择器)
选择器 选择器 ...
说明:前面的选择器至少是后面选择器的父节点。
7.伪类选择器
:link,正常显示的状态
:hover,鼠标放上的状态
:active,鼠标按下的状态
:visited,访问过的状态
三、CSS单位
1.长度
px,像素
%,百分比
em,字号的倍数
2.颜色
A,英文名称,如red,green,blue等
B,完整十六位进制数字,如#ff0000(红色),#00ff00(绿色),#ffffff(白色),#000000(黑色)
C,简写十六位进制数字,如#f00
D,RGB模式,如rgb(0,0,255)
E.百分比RGB模式,如rgb(0%,100%,0%)
3.CSS选择器优先级
inline,IDs,classes,tags
例1:
内联样式其优先级的代码是:1,0,0,0
例2:
#a2{
}
ID选择器的优先级是:0,1,0,0
例3:
.a2{
}
类选择器的优先级是:0,0,1,0
例4:
p{
}
元素选择器的优先级是:0,0,0,1
例5
#a1 #a2 .a3 .a4 p{
}
优先级是:0,2,2,1