1.div和span标签
<div>标签是块元素,独占一行,能够指定宽高的一个区域。可以用来布局网页。
<span>标签是指组合文档中的行内元素。可以为某一块范围加span标签!
2.字体样式:
- font-style:设置字体风格
- font-weight:设置字体粗细
- font-size:设置字体大小
- font-family:设置字体类型
p{
font-family:verdana ,"楷体";
}
注释:设置字体类型,优先写英文字体,中文写其后面。
p{
font-size:12px;
}
注释:设置字体大小为12px(像素)
p{
font-style:normal;
}
注释:normal是标准字体,italic是斜体,oblique是倾斜字体。一般常用是italic。
p{
font-weight:bold;
}
注释:bold是粗体,normal是标准(默认),bolder是更粗的字体,lighter是更细的字体。
bold是700,normal是400.
注意使用顺序:字体风格> 字体粗细 > 字体大小 > 字体类型
3、网页文本排版
- color:设置文本颜色
- text-align:设置水平线对齐
- text-indent:文本缩进 常用单位 px 或者 em
- line- height:文本行高
- text-decoration:文本装饰
4、水平对齐方式、垂直对齐
水平对齐 text-align:
- left 文本排列到左边,默认值
- right 文本排列到右边
- center 文本排列到中间,居中显示
- justify 两端对齐
- 垂直对齐 vertical - align
- middle 中间对齐
- top 上对齐
- bottom 下对齐
5、文本装饰
- text- decoration
- none 默认值,标准文本
- underline 设置文本下划线
- overline 设置文本上划线、
- line -through 删除线,在文本中间
6、文本阴影
text- shadow :color x位置 y位置 模糊半径
注释:color 是文本颜色 x是水平位置 y是垂直位置 模糊半径是范围
7、超文本链接
a:hover {
color:red;
}
超链接伪类:
a:link 单击访问前
a:visited 单击访问后
a:hover 鼠标悬浮其上的链接样式
a:active 鼠标单击为释放的样式
注意:写超链接伪类一定要按照上面的顺序写,不可颠倒!!!
8、列表样式
list-style-type/list-style:
none 无标记符号,
disc 实心圆,默认类型
circk 空心圆
square 实心正方形
decimal 数字
注意:一般用的较多是list-style,表示在一个声明设置所有的列表属性
9、背景属性
背景颜色:
- background - color
- transparent 可以设置透明色
背景图像:
- background - image :url("图片路径");
- repeat 水平和垂直连个方向平铺
- no-repeat 不平铺,只显示一次
- repeat - x 只沿着水平方向平铺
- repeat - y 只沿着垂直方向平铺
背景定位:
- left 左边 right 右边 center 中间 --------- > 沿着水平方向
- top 上面 center 中间 bottom 下面 --------- > 沿着垂直方向
注意:可以一起设置背景样式,如下:
background :red url(" 图片路径") 250px 10px no - repeat
注释:red是颜色,url是图片,250是水平方向, 10是垂直方向 no - repeat 是不平铺
背景尺寸:background - size:
- auto ----- 自动,默认的
- percentage ------ 百分值,相对元素宽度计算
- cover ----------- 放大填充
- contain ------- 缩放图片
10、线性渐变
background:linear - gradient(position ,color1,color2 ......);
注释:position 是位置,color是颜色,颜色可以很过种,没有要求!
注意:渐变需要浏览器兼容,要加上下面浏览器前缀!
background: -webkit-linear-gradient(left,yellow,red); Chrome和Safari浏览器
background: -moz-linear-gradient(right,yellow,red); Firefox浏览器
background: -o-linear-gradient(right,yellow,red); Opera浏览器
background: -ms-linear-gradient(right,yellow,red); IE浏览器
background: linear-gradient(to right,yellow,red);