第2章网页样式.docx
- 文档编号:6498026
- 上传时间:2023-01-07
- 格式:DOCX
- 页数:13
- 大小:175.52KB
第2章网页样式.docx
《第2章网页样式.docx》由会员分享,可在线阅读,更多相关《第2章网页样式.docx(13页珍藏版)》请在冰豆网上搜索。
第2章网页样式
第二章网页样式
csS既述
CSS(Cascading
StyleSheet)全称为级联羊式表,主要用来
进行网页风格设计的。
例如:
超链接在未单击时是蓝色的,当鼠标指
针移上去后变成红色,
并且有下划线,这就是一种风格。
那么我们可
以通过设立样式表,统一控制HTM中各标签的显示属性。
内容与表现分离:
有了CSS网页的内容与表现就可以分开了。
表现的统一:
可以使网页的表现非常统一,并且容易修改。
丰富的样式:
使得页面布局更加灵活。
减少网页的代码量,增加网页的浏览速度,节省网络带宽。
运用独立于页面的CSS还有利于网页被搜索引擎收录。
如何使用CSS羊式
选择器{
属性:
属性值;
在语法中:
选择器:
表示被修饰的对象,如页面中被修饰的段落标签
,
列表标签
属性:
希望改变的样式,如颜色color,字体大小font-size
等。
属性和属性值用冒号(:
)隔开
2.2CSS选择器
根据选择器所修饰的内容类别,选择器又分为标签选择器,类
选择器,ID选择器,并集选择器和后代选择器等。
其中,前3类是
CSS勺基本选择器,后2类是由多个选择器或标签符合而成的选择器,
简称符合选择器。
标签选择器当需要对页面内HTMI标签的内容进行修饰时,则采用标签选
择器。
标签选择器的语法:
标签名{
属性:
属性值;
例如:
设置页面中51>标签中的文本颜色为灰色,字体大小为28px.
代码如下:
h1{
color:
#cccccc;
font-size:
28px;
在css中颜色的定义有四种方法:
color:
red;
color:
#cccccc;
color:
rgb(56,89,200);//取值范围0-255
color:
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样式。
18px;”>行内样式使用方法 嵌入式 嵌入式俗称内部样式,即使用vstyle>标签,将对页面中各 种元素的设置集中写在 之间 对于单独的页面,使用嵌入式比较方便。 但是,对于一个 由许多页面组成的网站,如淘宝网,网易等大型网站而言,使 用嵌入式就不能充分发挥它的优势了。 那么我们为了高效的利用CSS通常采用的办法是编写一 个独立的CSS文件,利用以下两种方式--导入式和链接式,引 入至yHTML中。 导入式与链接式 导入式和链接式俗称外部样式,目的就是将一个独立的 CSS文件引入到HTM中。 链接式: 弓I入外部CSS文件的语句 导入式: 弓I入外部CSS文件的语句 @import“style.css” 2.4样式的优先级 基本选择器之间: ID选择器》类选择器》标签选择器 样式表之间: 行内样式》内嵌样式》外部样式。 CSS羊式之间: 在同一个选择器中,两条相同的声明,后一条 声明会覆盖前一条声明,即显示后一条声明的结果。 2.5CSS属性性 网页元素可以修饰的样式属性很多,常用的样式有文本与字体, 背景,列表,浮动等属性。 下面分别介绍。 文本与字体属性 字体大小为24PX vie 字样为隶书 字体为斜体 字体显示为粗体 em: 相对长度单位。 是指父元素的字体大小pt: 表示绝对长度单位。 印刷业上常使用的单位,磅的意思。 般也用于页面打印排版。 px: 表示像素。 (最常用) Font-family表示设置字体的类型(操作系统中安装的字体),比如 宋体,楷书,楷体等。 例如: body *',"宋体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: red;} 第一种直接使用颜色名。 例如redblue等 第二种使用十六进制的RGB(Red,Green和Blue的意思)颜色值。 对于RGB每个颜色最小值是0最大值是255.由于是十六进制表示的,所以范围就是00到ff Line-heigh俵示行高。 也就是字体最低端至字体内部顶端之间的 距离。 p{line-height: 25px;}p{line-height: 200%;}p{line-height: 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示例: list-style: 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: 元素向右浮动。 none: 默认值,元素不浮动。 inherit: 规定应该从父元素继承float属性的值,IE浏览器不支持 该属性,不推荐使用, CSS勺定位属性主要包括绝对定位和相对定位,设置绝对定位 的元素与文档无关,不占据页面空间,因此它可以覆盖页面上的其他元素。 设置绝对定位的代码如下所示。 position: absolute; 另外,可以使用z-index属性来控制绝对定位元素的堆叠次序, z-index: 2; 设置相对定位的元素与绝对定位的元素不同,相对定位的元素无 论是否进行移动,元素都会占据页面空间,设置相对定位的代码如下。 position: 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之后定义,才能生效。 具体顺序 A: linka: visiteda: hovera: active.
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页 样式