CSS样式表学习手册Word文件下载.docx
《CSS样式表学习手册Word文件下载.docx》由会员分享,可在线阅读,更多相关《CSS样式表学习手册Word文件下载.docx(14页珍藏版)》请在冰点文库上搜索。
![CSS样式表学习手册Word文件下载.docx](https://file1.bingdoc.com/fileroot1/2023-4/30/4d458632-f4ce-4781-8669-025ac6ba9d15/4d458632-f4ce-4781-8669-025ac6ba9d151.gif)
head>
styletype="
text/css"
标签名1{
属性名2:
……
}
标签名2{
标签名N{
/style>
/head>
3.将对标签样式的重定义制作成独立的CSS样式表文件(*.css)
定义一个独立的样式表文件,设定标签属性,应用于所有使用该文件的HTML文件
定义一个文件类型为css类型的文件
CSS样式表与HTML结合的三/四种方法:
1.直接对HTML文件内所使用的标签进行样式修改的无需再做其他操作,样式将直接应用到被修改的标签中
2.在HTML文件内部的文件头<
HEAD>
内定义的样式讲在使用到该标签时自动应用其定义效果,无需再做其他操作
3.使用独立制作的CSS样式表文件(*.css),讲该样式定义引入HTML文件的方式有如下两种:
●在<
标签内使用<
LINK>
标签导入外部定义的CSS样式表文件
linkrel=stylesheethref="
mystyle.css"
type="
●使用CSS规则"
@import"
标记来导入样式表单;
style>
@import*.css;
样式表的冲突问题
由于CSS样式表的定义规则不止一种,因此当某个标记CSS样式表的定义出现冲突时,多种相同属性的定义将出现冲突问题;
此外当多种定义规则出现时,引用效果也讲出现冲突,下面列举出各种冲突的处理规则
※定义冲突:
1.HTML文件内部定义之间出现冲突
body{
color:
red;
blue;
使用时定义位置靠后的将取代前面定义的属性,成为最终定义的属性
2.CSS外部定义同一个.css文件内定义之间出现冲突
(同上)
※引用冲突:
1.HTML文件内部定义与CSS外部定义.css文件之间出现冲突
style.css"
#ff00ff;
引用时HTML文件内部定义的样式将取代CSS外部定义文件内的样式
2.CSS外部定义的多个.css文件之间出现冲突
style1.css
style2.css
引用时:
●若都使用<
link>
标签导入,则后导入的将取代先导入的,成为最终样式
fail.css"
success.css"
●若都使用@import语法导入,则后导入的将取代先导入的,成为最终样式
@importfail.css;
@importsuccess.css;
●若使用@import语法和<
标签分别导入,则语法顺序定义位置在后面的将取代语法顺序定义位置在前面的,成为最终样式
或:
3.多个标记定义同一内容而引发的引用冲突
●外层标签与内层标签定义冲突时,内层标签样式将覆盖外层标签样式效果
p{
color:
}
b{
b>
p>
红色<
/p>
/b>
蓝色<
Istyle="
green;
I>
绿色<
●具有样式的标签嵌套不规则冲突时,距离被修饰内容进的样式定义其作用
总:
具有相同样式修饰,不同样式值的标签距离被修饰内容近标签的样式格式起作用
4.当CSS对某个标签进行定义时,基于HTML默认标签使用的值都是默认设定,此时优先使用CSS定义规则,否则CSS定义就毫无意义了。
选择符
选择符即进行CSS样式表设定时的基础符号,用于定义被CSS样式表修饰的标记符号,共有四种类型,如下:
1.类型选择符
以标签作为选择符
p{color:
类型选择符<
2.包含选择符
以被某个对象E包含的F作为选择符
pb{color:
包含选择符<
i>
非包含选择符<
/i>
br>
3.ID选择符
以对象的唯一标识符的ID作为选择符
#idselect{color=red;
bid="
idselect"
ID选择符<
非ID选择符<
4.类选择符
以对象的class属性作为选择符
.class1{color=red;
.class2{color=blue;
bclass="
class1"
class1类选择符<
class2"
class2类选择符<
非类选择符<
5.选择符分组
将同样的定义应用于多个选择符,可以将选择符以逗号分隔的方式划分为组
p,b,i{color:
选择符分组效果<
样式表属性列表
CSS样式表通过设定不同标记的不同属性值达到修改外观效果的目的,因此属性值即显的尤为重要,具体设定参看文件css.chm中的属性一节。
伪类
CSS样式表中常用的伪类有4种,如下
1.:
link
设置<
a>
对象在未被访问前的样式表属性。
默认值由浏览器决定。
对于无href属性的<
对象,此伪类不发生作用。
例如:
a:
link{font-size:
14pt;
text-decoration:
underline;
color:
blue;
2.:
hover
设置对象在其鼠标悬停时的样式表属性。
在CSS1中此伪类仅可用于<
对象。
对于无href属性(特性)的<
在CSS2中此伪类可以应用于任何对象。
hover{font-size:
hoverspan{color:
3.:
active
设置对象在被用户激活(在鼠标点击与释放之间发生的事件)时的样式表属性。
并且:
active状态可以和:
link以及:
visited状态同时发生。
active{font-size:
}
4.:
visited
对象在其链接地址已被访问过时的样式表属性。
定义网页过期时间或用户清空历史记录将影响此伪类的作用。
对于无href属性(特性)的a对象,此伪类不发生作用。
visited{font-size:
伪对象
:
first-letter
语法格式:
Selector:
first-letter{sRules}
设置对象内的第一个字符的样式表属性。
此伪对象仅作用于块对象。
内联对象要使用该伪对象,必须先设定对象的height或width属性,或者设定position属性为absolute,或者设定display属性为block。
在此伪类中配合使用font-size属性和float属性可以制作首字下沉效果。
pa:
first-letter{color:
green}
div:
font-size:
16px;
float:
left;
first-line
first-line{sRules}
设置对象内的第一行的样式表属性。
如果未强制指定对象的width属性,首行的内容长度可能不是固定的。
first-line{color:
规则
@import
@import
url(url)
sMedia;
参数:
url:
使用绝对或相对地址指定导入的外部样式表文件。
sMedia:
指定设备类型。
指定导入的外部样式表及目标设备类型。
该规则必须在样式表头部最先声明。
并且其后的分号是必需的,如果省略了此分号,外部样式表将无法正确导入,并会生成错误信息。
导入的外部样式表中的定义将被HTML文本中的同名定义覆盖。
例如
@importurl("
foo.css"
)screen,print;
@import"
print.css"
@page
@page
label
pseudo-class
{sRules}
label:
页标
pseudo-class:
伪类。
sRules:
样式表定义
设置页面容器的版式,方向,边空等。
页面容器包括页面内容区域和内容区域外围的边空补白区域。
@pagethin:
first{size:
3in8in}
@media
@media
sMedia
指定设备名称。
指定样式表规则用于指定的设备类型
//设置显示器用字体尺寸
@mediascreen{
BODY{font-size:
12pt;
//设置打印机用字体尺寸
@mediaprint{
8pt;
}
声明(!
important)
提升指定样式规则的应用优先权
blue!
important}
如下:
p{color:
提升优先权后为蓝色,否则为红色<
长度单位
简介
相对长度单位
em
相对于当前对象内文本的字体尺寸
ex
相对于字符“x”的高度。
通常为字体高度的一半
px
像素(Pixel)
绝对长度单位
pt
点(Point)
pc
派卡(Pica)。
相当于我国新四号铅字的尺寸
in
英寸(Inch)
cm
厘米(Centimeter)
mm
毫米(Millimeter)
单位换算:
1in=2.54cm=25.4mm=72pt=6pc
设备类型
设备类型名
all
所有设备类型
print
打印机
screen
计算机显示器