第2章网页样式Word格式.docx
- 文档编号:19511796
- 上传时间:2023-01-07
- 格式:DOCX
- 页数:13
- 大小:175.52KB
第2章网页样式Word格式.docx
《第2章网页样式Word格式.docx》由会员分享,可在线阅读,更多相关《第2章网页样式Word格式.docx(13页珍藏版)》请在冰豆网上搜索。
2.2CSS选择器
根据选择器所修饰的内容类别,选择器又分为标签选择器,类
选择器,ID选择器,并集选择器和后代选择器等。
其中,前3类是
CSS勺基本选择器,后2类是由多个选择器或标签符合而成的选择器,
简称符合选择器。
标签选择器当需要对页面内HTMI标签的内容进行修饰时,则采用标签选
择器。
标签选择器的语法:
标签名{
设置页面中51>
标签中的文本颜色为灰色,字体大小为28px.
代码如下:
h1{
color:
#cccccc;
font-size:
28px;
在css中颜色的定义有四种方法:
red;
rgb(56,89,200);
//取值范围0-255
rgb(80%,10%,10%);
//取值范围0%-100%
类选择器
使用标签选择器修饰的范围比较广,是针对某一类的标签进行修饰,如果希望设置个别标签的样式,那么就要使用类选择器。
类选择器的语法:
.类名{
属性:
类名可以任意选择,应用样式时使用标签的class属性引用类样式。
即
标签名class=”类名”>
标签内容<
/标签名>
注意:
定义时类名前有个点号(.),应用样式时则不需要点号。
ID选择器
ID属性是HTML元素的唯一标识,因此要求页面内不能有
重复的ID标记属性,ID选择器一般用于修饰对应ID属性的HTML元素内容。
ID选择器的语法:
#ID名称{
属性值;
在语法中:
定义ID选择器时有个”#”号,但设置HTM标签的ID属性时
不需要。
应用ID选择器时,首先使用ID属性标记被修饰的页面元素
ID选择器和类选择器的区别
ID选择器用于修饰某个指定的页面元素,这些样式是对应ID
标记的HTML元素所独占的;
而类选择器是定义某类样式让多个
HTMI元素共享使用。
并集选择器
并集选择器用来同时选中各个基本选择器所选择的范围(任何形式的选择器都可以),并集选择器是多个选择器通过逗号连接而成的。
并集选择器的语法:
标签名,.类名,#ID名称{
多个选择器之间用英文半角输入法下的“,”连接
在并集选择器中,使用逗号连接的选择器,可以是基本选择器,
也可以是复合选择器。
后代选择器
后代选择器是复合选择器中的一种,主要通过嵌套的方式对特殊位置的HTMI标签进行声明。
后代选择器的写法是把外层的标签写在前面,内层的标签写在后面,之间用空格分开。
当标签发生嵌套时,内层的标签就成为外层标签的后代。
后代选择器的语法:
Pspan{
属性值;
vp>标签内嵌套<span>标签
vspan>标签是vp>标签的后代,两者之间用空格隔开。
2.3在HTML中弓I入CSS的方式
通常在HTML中,引入CSS的方法共有4种,他们分别是行内样
式,嵌入式(内部样式),导入式和链接式。
行内样式
指的是在HTMI标签中的style属性中设置CSS样式。
h1style=”font-size:
18px;
”>
行内样式使用方法<
/hl>
嵌入式
嵌入式俗称内部样式,即使用vstyle>标签,将对页面中各
种元素的设置集中写在<
styletype=”text/css”>
之间
对于单独的页面,使用嵌入式比较方便。
但是,对于一个
由许多页面组成的网站,如淘宝网,网易等大型网站而言,使
用嵌入式就不能充分发挥它的优势了。
那么我们为了高效的利用CSS通常采用的办法是编写一
个独立的CSS文件,利用以下两种方式--导入式和链接式,引
入至yHTML中。
导入式与链接式
导入式和链接式俗称外部样式,目的就是将一个独立的
CSS文件引入到HTM中。
链接式:
弓I入外部CSS文件的语句
linkhref=”style.css”rel=”stylesheet”type=”text/css”/>
导入式:
@import“style.css”
2.4样式的优先级
基本选择器之间:
ID选择器》类选择器》标签选择器
样式表之间:
行内样式》内嵌样式》外部样式。
CSS羊式之间:
在同一个选择器中,两条相同的声明,后一条
声明会覆盖前一条声明,即显示后一条声明的结果。
2.5CSS属性性
网页元素可以修饰的样式属性很多,常用的样式有文本与字体,
背景,列表,浮动等属性。
下面分别介绍。
文本与字体属性
字体大小为24PX
vie
字样为隶书
字体为斜体
字体显示为粗体
em:
相对长度单位。
是指父元素的字体大小pt:
表示绝对长度单位。
印刷业上常使用的单位,磅的意思。
般也用于页面打印排版。
px:
表示像素。
(最常用)
Font-family表示设置字体的类型(操作系统中安装的字体),比如
宋体,楷书,楷体等。
例如:
body<
font'
family:
*'
"
宋体Arial,'
'
TimasNewItom且n"
冷
浏览器会先找黑体,如果找不到找宋体,如果都找不到使用默
认字体。
如果字体名称中间有空格,或者字体的名字是中文,那么我们需要用“”双引号,或单引号'
舌起来。
Font-style表示字体的风格(斜体还是其他风格),一般我们设置font-style为normal表示正常,Italic表示斜体,
hl{font-style:
normal;
}h2(font-style:
italic;
}h3tfont-style:
obiique;
)
J
斜体I也字径样或n倾斜字体样忒
Font-weight表示字体的粗细。
(bold表示字体加粗,normal表示
正常)
#header{font-weight:
bold;
}p{font-weight:
GO0;
}
注意:
也可用数字100到900表示字体的粗细。
400相当于
normal,700相当于bold,一般情况下不使用数字。
Font是以上几个属性的合写。
表示把所有的字体属性设置在一个
声明中
Font表示一次设置一个或者多个属性
顺序为:
字体样式font-style,字体粗细font-weight,字体大小
font-size和字体名称font-family。
.cecl{font:
italicboldZQpscArial,Helvetica,sans-serif;
J-#nav(font:
bold1epx;
}
它表示我们定义的类选择器red,它的样式是:
斜体的,加粗的。
20像素的Arial字体。
它表示Id选择器nav的样式是:
加粗的16个像素的字体。
2.文本属性用于定义文本的外观,包括文本的颜色,行高,对齐
方式,字符间距等。
□color;
设置文本颜色
Oline-height:
设置行jS
Olext-align;
设置文本的对齐方式
◎text-decoration:
向文本添加修饰
hl:
蓝色字体
y晨
P:
红色丰体
Color设置文本颜色。
hl(color;
#0000ff;
}h2(color:
tf000000;
}plcolor:
第一种直接使用颜色名。
例如redblue等
第二种使用十六进制的RGB(Red,Green和Blue的意思)颜色值。
对于RGB每个颜色最小值是0最大值是255.由于是十六进制表示的,所以范围就是00到ff
Line-heigh俵示行高。
也就是字体最低端至字体内部顶端之间的
距离。
p{line-height:
25px;
}p{line-height:
200%;
2;
第一种方式是使用像素px(最常用)第二种方式是使用百分比第三种是使用数字,该数字与当前字体大小相乘来设置行高,它的单位是em.(表示两个字体的大小)
Text-align设置文本的对其方式,与Word文档中的对齐方式一样,
它常用的方式有三个,左对齐,居中对其,右对齐。
p{text-align:
center}#header{text-align:
right;
Left:
左对齐。
(默认值)
Right:
右对齐。
Center:
表示居中对其
Text-decoration表示给文字添加下划线,上划线,删除线等效果。
上划线
overline
None:
表示无,缺省值
背景属性
CSS可以通过颜色为页面元素设置背景,也可以使用图像创建
相当复杂的背景。
background-color:
设置元素的背景颜色
background-colore:
d;
background-image把图像设置为背景
background-imageu:
rl(images/bg.png)
background-repeat:
设置背景的平铺方式(默认背景图像在水平
和垂直方向上重复)
background-repeatn:
o-repeat;
repeat:
表示背景图像在水平和垂直方向上重复repeat-x表示背景图像在水平方向上重复repeat-y表示背景图像在垂直方向上重复no-repeat表示背景图像不重复。
background-position:
设置背景出现的初始位置
background-position2Opx-20px;
说明:
分别表示横向和纵向的位置坐标
background将背景的多个分量设置在一个声明中
background#cccurl(images/bg.jpg)repeat-x20px-20px;
列表属性
list-stylet-type:
设置列表项标志的类型
list-style-image:
将图像设置为列表项标志list-style-image:
url(images/list.jpg);
list-style-position:
设置列表项标志的位置1)outside:
以列表内容为准对齐,列表项标记位于文本的左侧,
在文本以外,并且环绕文本不根据标记对齐。
2)inside:
以列表项内容为准对齐,列表项在文本以内,并且
环绕文本根据标记对齐
list-style:
把所有用于列表的属性设置于一个声明中
顺序:
list-style-type,list-style-postion,list-style-image示例:
circleinsideurl(images/list.jpg);
盒子模型一个盒子模型的实际宽度二内容+border+padding+margin
111ai'
^Ill-top
border-top
border*bottotii
otto111
-■
外边距(margin):
位于边框外部,边框外面周围的间隙,所以也称为边界。
外边距根据上,下,左,右4个方向可
细分为上外边距,下外边距,左外边距,右外边距。
边框(border):
对应包装盒的纸壳,一般具有一定的厚度。
边框4个边外,边框又细分为边框颜色,边框宽度,边框样式(实线,虚线等)三方面的属性。
边框样式常用属性(style)
none:
表示无边框dotted:
表示点状边框(在大多数浏览器呈现为实现)dashed:
表示虚线边框solid:
表示实线边框double:
表示双线边框
内边距(Padding):
位于边框内部,是内容与边框的距离。
即对应包装盒的填充部分,所以也成为填充。
盒子模型尺寸:
width和height指的是内容区域的宽度和高
度。
浮动属性的语法:
float:
值;
值:
表示元素浮动的方向,有4个值:
left:
元素向左浮动。
right:
元素向右浮动。
默认值,元素不浮动。
inherit:
规定应该从父元素继承float属性的值,IE浏览器不支持
该属性,不推荐使用,
CSS勺定位属性主要包括绝对定位和相对定位,设置绝对定位
的元素与文档无关,不占据页面空间,因此它可以覆盖页面上的其他元素。
设置绝对定位的代码如下所示。
position:
absolute;
另外,可以使用z-index属性来控制绝对定位元素的堆叠次序,
z-index:
设置相对定位的元素与绝对定位的元素不同,相对定位的元素无
论是否进行移动,元素都会占据页面空间,设置相对定位的代码如下。
relative;
2.8其他属性
在前面我们已经学了CSS常用属性,文本与字体属性,列表属性,
浮动属性等,利用这些属性我们可以控制页面的元素,来制作出漂亮
的网页。
除了这些常用的属性,我们还可以使用CSS来控制超链接,
鼠标指针效果以及页面元素的显示和隐藏等。
2.8.1控制元素显示方式
控制元素显示方式语法:
display:
display属性用于指定HTML标签的显示方式。
属性可能值说明
display
block
显示页面兀素
none
隐藏页面兀素
2.8.2overflow属性的使用
在CSS中,处理盒子中的内容溢出,可以使用overflow属性,
它规定当内容溢出盒子时发生的事情,如内容不会被修剪,则呈现在
盒子之外;
内容会被修剪,则隐藏修剪内容等。
可能值
描述
vidible
默认值。
内容不会被修剪,呈现在盒子之外
hidden
内容会被修剪,并且其余内容是不可见的
scroll
内容会被修剪,但是浏览器会显示滚动条以便查看其余
内容
auto
如果内容被修剪,则浏览器会显示滚动条以便查看其余
的内容
2.8.3cousor属性
cousor属性用来设置光标的形状,其中,常用的属性值为
pointer显示为”手形”.
cousor属性的语法:
COUSOI值:
2.8.4超链接
超链接有4种状态,分别为未访问的连接,已访问的连接,鼠
注意事项:
声明顺序。
通常在CSS定义中
A:
hover必须在a:
link和a:
visited之后定义,才能生效。
而a:
active必须在a:
hover之后定义,才能生效。
具体顺序
linka:
visiteda:
hovera:
active.
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页 样式