首页 > 代码库 > html(6)css2

html(6)css2

 1.会使用CSS设置字体样式

font-family:字体类型
font-size:字体大小
font-weight:字体粗细(bold)
font-style:字体倾斜(italic)
font:倾斜 粗细 大小 类型

若需要同时设置英文字体和中文字体时,必须把英文字体设置在中文字体前,否则英文字体设置将不起作用

2.会使用CSS设置文本样式

1) 文本颜色:color

2)水平对齐方式:text-align:  left \center \right \ justify两端对齐

(图片的对齐)使用ID选择器或类选择器

3)垂直对齐方式:vertical-align:   top\middle\bottom;

(图片的对齐)p img { vertical-align:  top\middle\bottom }

4)段落标记中,用于缩进:text-indent:  数字em;

 1em,代表一个汉字的宽度

5)文本的行高:line-height:数字px;

6)文本装饰(上划线、删除线、下划线):

  text-decoration:  overline 上划线 underline下划线 line-through

  none默认值,定义的标准文本

  blink设置文本闪烁,只在Firefox浏览器中有用,在IE中无效。

3.会使用CSS设置图片对齐方式

垂直对齐方式:vertical-align:top\middle\bottom;

      会使用CSS设置超链接样式

<a href=http://www.mamicode.com/”链接的页面或地址”>超链接的文字

标签选择器

伪类样式:

设置伪类样式的顺序:link> visited> hover active

伪类名称

含义

示例

a:link

未单击访问时超链接样式

a:link{color:#9EF5F9}

a:visited

单击访问后超链接样式

a:visited{ color:#333}

a:hover

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

a:hover{ color:#FF7300}

a:active

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

a:active{ color:#999}

 

 

 

     

 

 

 

4.会使用CSS设置鼠标外观——cursor

说明

图例

default

默认光标

pointer

超链接的指针

     技术分享

wait

指示程序正在忙

     技术分享

help

指示可用的帮助

     技术分享

text

指示文本

     技术分享

crosshair

鼠标呈十字状

     技术分享

5.Div标签

1、 作用:  目前流行的网页布局的方式:div+css

2、          <div>放文字、图片、超链接等等</div>

3、          让div显示出来,设置哪些css样式属性?

a.  宽——width             高——height

b.     设置边框border:边框粗细 边框样式 边框颜色

c.     实线细边框——solid              虚线边框——dashed

6.会使用CSS设置背景样式

背景颜色:background -color

背景图片:background -image

背景重复方式:background -repeat

背景图片定位:background –position

7.会使用CSS设置列表样式

修改列表的符号:list-style-type

自定义列表的图片:list-style-image

列表项标记的位置:list-style-position:inside(文本内且环绕文本根据标记对齐),

outside(默认值,位于文本左侧,放在文本以外,且环绕文本不根据标记对齐)

 

html(6)css2