厦门网站建设为您介绍：CSS基础知识
一、CSS基础
1.什么是CSS?
CSS[Cascading Style Sheet],层叠样式表
2.CSS能做什么?
快速维护页面元素(如文本、图像、表格等)的样式。
3.HTML属性与CSS样式的使用原则
W3C建议尽量使有CSS样式取代HTML标记的属性。
HTML与CSS的关系是结构与表现的关系。
4.CSS的使用方式
4.1 链接到外部的CSS文件
CSS文件的扩展名为.css
<link type="text/css" rel="stylesheet" <br/>
media="all|screen|print" href="CSS文档URL"/>
media,指CSS文件的应用媒体类型。
all,应用于所有的媒体介质。
screen,应用于浏览器。
print,应用于打印机。
4.2 书写于文档的头部
<style type="text/css"><br/>
...
</style><br/>
4.3 书写于标记内部
<标记名称 style="CSS样式;...">
<标记名称 style="CSS样式;...">...<!--标记名称-->
4.4 CSS应用方式的优先级
内联样式的优先级最高
头部样式与外部样式取决于书写的顺序
5.CSS的语法规则
选择器{
属性:值;
属性:值;
...
}
二、CSS选择器
1.什么是CSS选择器?
CSS选择器就是告诉网页,哪些对象将使用CSS样式。
2.CSS选择器
2.1 通配选择器 -- * (自动应用于所有的HTML元素)
2.2 类型选择器 -- 标记名称 (自动应用于某种类型的HTML元素)
2.3 类选择器 -- .类名称 (手动的HTML元素添加class="类名称"属性,多个类名之间以空格分隔)
2.4 ID选择器 -- #id (手动的应用给文档中唯一的对象,添加id="ID"属性)
ID可能被使用的地方:
A.CSS样式
B.JavaScript -- document.getElementById(id)
C.jQuery -- $('#id')
2.5 群组选择器 -- 选择器,选择器,... (具有相同属性的选择器的简捷方式)
2.6 后代选择器 -- 选择器 选择器 ... (选择器之间至少为父子关系)
2.7 子代选择器 -- 选择器>选择器>... (选择器之间只能为父子关系)
2.8 伪类/伪元素选择器 -- :link :hover :active :visited
:after :before
:focus
3.CSS选择器的优先级
inline,IDs,classes,tags
内联样式的优先级是:1,0,0,0
ID选择器的优先级是:0,1,0,0
类选择器的优先级是:0,0,1,0
类型选择器优先级是:0,0,0,1
例1:
#a1{ --> 0,1,0,0
}
例2:
#a1 li{ --> 0,1,0,1
}
例3:
body #a1 li{ --> 0,1,0,2
}
例4:
body #a1 .a2 .a3 li{ --> 0,1,2,2
}
4.CSS单位
4.1 长度单位
px,像素
%,百分比
em,字号的倍数
4.2 颜色单位
A.英文名称,如red,green等
B.完整十六位进制,如#ff0000,#00ff00,#0000ff,#ffffff(白色),#000000(黑色)
C.简写十六位进制,如#f00,#0f0等
D.完整RGB模式,如rgb(255,0,0)等
E.百分比RGB模式,如rgb(0%,100%,0%)
<!--标记名称--><!--标记名称--><!--标记名称-->
标签：厦门网站建设
