首页 > 代码库 > 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