制作列表,表格及表单-笔记

使用CSS设置各种样式

CSS 的意义

有效的传递页面信息

使页面漂亮,美观,更加吸引用户

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

具有良好的用户体验

< span>标签添加文字样式

font-family   设置字体样式       
font-size    设置字体大小
font-style      设置字体风格
font-weight    设置字体的粗细
font     在一个声明中设置所有的字体属性  
例  font :italic  bold   36px  "宋体";

font-family属性设置
font-family:"楷体";  可以设置中文或者英文的字体类型

font-size属性设置
可以设置属性值的单位:in,cm,mm,pt,pc,px
一般常用的是px
font-size:20px;

font-style 属性设置
normal标准字体,
italic斜体字体,
oblique倾斜字体

font -weight属性设置
normal 默认值,定义标准的字体
bold  粗体字体
bolder   更粗的字体
lighter   更细的字体
100~900 每次增加一百  由细到粗   400等同于normal   700等同于bold

排版网页属性

color     设置文本颜色
text-align  设置文本水平对齐方式
text-indent 设置首行文本的缩进
line-height  设置文本的行高
text-decoration   设置文本的装饰
vertical-align    这只文本垂直对齐方式
text-shadow  设置文本阴影

color属性设置
RGB格式:#FFFFFF
RGBA格式:rgba(0,0,255,0.5);0.5设置透明度

text-align属性设置
left 把文本排列到左边,默认值,由浏览器决定
right  把文本排列到右边
center  把文本排列到中间
justify  实现两端对齐文本效果

text-indent和line-height属性设置
单位为em和px
一般em用的比较多 比如 text-height:2em;

text-decoration属性设置
none默认值,定义的标准本文
underline  设置文本的下划线
overline   设置文本的上划线
line-through  设置文本的删除线

vertical-align属性设置
middle  文本居中对齐

text-shadow属性设置
text-shadow:color 颜色RGB  x-offset:(x轴偏移)     y-offset:(y轴偏移)
	blur-radius:模糊半径

设置伪类和列表样式

语法:伪类{  语法  }
设置的顺序a:link  ->   a:visited  ->  a:hover  ->  a: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;}

背景样式

< div>标签可以吧HTML文档分割成独立的 ,不同的部分

background-color 设置背景颜色

background-image   设置背景图像
repeat 沿水平和垂直两个方向平铺
no-repeat不平铺,背景图片只显示一次
repeat-x只沿水平方向平铺
repeat-y只沿垂直方向平铺

background-position 背景定位
(x,y)   (x20%,y30%)   (left  right  top    bottom)

background-size  背景尺寸
auto 默认值
1px,2px