码迷,mamicode.com
首页 > Web开发 > 详细

HTML第五章

时间:2017-10-07 20:44:33      阅读:299      评论:0      收藏:0      [点我收藏+]

标签:布局   lis   属性   标记   标准   air   ati   方式   设置字体   

第五章 css美化网页元素

1.使用CSS美化网页文本的意义:

         ①有效地传递页面信息。

         ②使用CSS美化过的页面文本,使页面漂亮,美观,吸引用户。

         ③可以很好地突出页面的主题内容,使用户第一眼可以看到页面主要内容。

         ④具有良好的用户体验。

2.<span>标签:

         <span>标签是被用来组合HTML文档中的内行元素的,它没有固定的格式表示,只有对它应用CSS样式时,它才会产生视觉上的变化。

3.字体样式:

属性名

含义

举例

备注

font-family

设置字体类型

font-family:"隶书";

当需要同时设置英文字体和中文字体时,一定要将英文字体设置在中文字体之前,中间用逗号隔开

font-size

设置字体大小

font-size:12px;

单位:px;

font-style

设置字体风格

font-style:italic;

Normal(默认值),italic ,oblique

Italic和oblique效果非常相似

font-weight

设置字体的粗细

font-weight:bold;

Normal (400)

默认值,定义标准的字体

Bold(700)

粗体字体

bolder

更粗的字体

lighter

更细的字体

100、200、300、400、500、600、700、800、900

定义由细到粗,400等同于normal,700等同于bold

font(简写)

在一个声明中设置所有字体属性

font:italic bold 36px "宋体";

顺序:风格,粗细,大小,类型

(分出大类)

4.使用CSS排版网页文本:

属性

含义

举例

备注

color

设置文本颜色

color:#00C;

text-align属性

left

(默认值)把文本排列到左边

text-align

设置元素水平对齐方式

text-align:right;

right

把文本排列到右边

center

把文本排列到中间

justify

实现两端对齐文本效果

text-indent

设置首行文本的缩进

text-indent:20em;

text-decoration常用值

line-height

设置文本的行高

line-height:25px;

none

(默认值)定义的标准文本

underline

设置文本的下划线

text-decoration

设置文本的装饰

text-decoration:underline;

overline

设置文本的上划线

Line-through

设置文本的删除线

blink

设置文本闪烁(只在Firefox有效)

5.垂直对齐方式:

在CSS中通过vertical-align设置垂直方向对齐方式。但是在目前的浏览器中,只能对表格单元格的对象使用对齐方式属性,而对于一般的标签,如<h1>~<h6>、<p>、<div>标签都不起作用,因此vertical-align在设置文本标签中垂直对齐时并不常用,它反而用来设置图片及文本的对齐方式。

 

6.超链接伪类:

伪类名称

含义

示例

a:link

未单击访问时超链接样式

a:link{color:#9ef5f9;}

a:visited

单击访问后超链接样式

a:visited {color:#333;

text-decoration:none;(无下划线)

}

a:hover

鼠标悬浮其上的超链接样式

a:hover{color:#ff7300;

a:active

鼠标单击未释放的超链接样式

a:active {color:#999;

text-decoration:underline;(有下划线)

}

顺序:

a:link –> a:visited -> a:hover -> a:active

(前后浮释)

 

7.Cursor属性常用值:

说明

图例

default

默认光标

 

pointer

超链接的指针

 

wait

指示程序正在忙

 

help

指示可用的帮助

 

text

指示文本

 

crosshair

鼠标呈现十字状

 

 

8.<div>标签:

       < div>标签可以把HTML文档分割成独立的,不同的部分,因此<div>标签用来进行网页布局。<div>标签与<p>标签一样,也是成对出现的。在使用<div>布局页面时,它可以嵌套<div>,同时也可以嵌套列表、段落等各种网页元素。

CSS中控制网页元素的两个属性

width

height

 

9.网页背景属性:

背景属性

background-color

背景颜色值:十六进制方法表示

background-image

repeat

沿水平和垂直两个方向平铺

no-repeat

不平铺,即背景图像只显示一次

Repeat-x

只沿水平方向平铺

Repeat-y

只沿垂直方向平铺

background-position

Xpos  Ypos

使用像素值表示,第一个值表示水平位置,第二个值表示垂直位置

30px 40px正向偏移,图像向下和向右移动

X%  Y%

使用百分比表示背景位置

30% 50%

垂直方向居中,

水平方向偏移30%

X、Y方向关键词

使用关键词表示背景的位置,水平方向的关键词有

left、 center 、right

垂直方向的关键词有

top、center 、bottom

使用水平和垂直方向的关键词进行自由组合,例:

Right  top(右上角出现)

Left bottom(左下角出现)

top (上方水平居中位置出现)

background(简写)

颜色图片位置定位是否平铺

例:backgrond:#c00 url (image/arrow.gif ) 205px 10px no-repeat

 

10列表样式:

List-style-type

说明

语法示例

图示例

none

无标记符号

list-style-type:none;

刷牙

洗脸

disc

实心圆,默认类型

list-style-type:disc;

刷牙

洗脸

circle

空心圆

list-style-type:circle;

刷牙

洗脸

square

实心正方形

list-style-type:square;

刷牙

洗脸

decimal

数字

list-style-type:decimal

1.刷牙

2.洗脸

List-style-image

List-style-position属性是使用图象来替换列表的标记,当设置了list-style-image后list-style-type属性都将不起作用,页面中仅显示图像标记

Li{

List-style-image:url(image/arrow.gif)

List-style-type:circle;

}

List-style-position

inside

标示项目标记放置在文本以内,且环绕文本根据标记对齐

outside

是默认值,它保持标记位于文本的左侧,列表项标记放置在文本以外,且环绕文本不根据标记对齐

list-style(简写)

list-style:circle outsise url(image/arrow.gif);

           

 

HTML第五章

标签:布局   lis   属性   标记   标准   air   ati   方式   设置字体   

原文地址:http://www.cnblogs.com/ppdpp/p/7635542.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!