网页文本
-
< span >标签是用来组合HTML文档中的行内元素,他没有固定的格式。
-
字体样式
-
字体类型
-
font-family属性
p{font-family:Verdana,"楷体";} body{font-family: Times,"Times New Roman", "楷体";}
英文字体:verdana 选择字体是否含空格:“Times New Roman”
-
-
字体大小
font-size属性:单位px em… -
字体风格
font-style属性:normal italic oblique 标准字样,斜体字样,倾斜字样 -
字体粗细
font-weight属性
-
字体属性
- 字体属性的顺序:字体风格→字体粗细→字体大小→字体类型
p span{font:oblique bold 12px "楷体";}
-
文本属性
排版文本段落
文本修饰和垂直对齐
文本装饰:
text-decoration属性
垂直对齐方式:
vertical-align属性:middle、top、bottom
文本阴影
text-shadow:color x轴移动 (x-offset)y轴移动(y-offset) 模糊半径(blur-radius);
color:阴影颜色,定义绘制阴影时所使用的颜色,如果不设置这个值,则会使文本的颜色作为阴影的颜色。
x-offset:用来指定阴影部分水平位移量,其值可以是正或负,如果为正在右边,为负在左边。
y-offset:用来指定阴影部分垂直位移量,其值可以是正或负,如果为正在右边,为负在左边。
blur-radius:阴影模糊半径,代表阴影向外模糊的模糊范围。值越大阴影向外模糊的范围越大,阴影的边缘就越模糊。这个值只能是正值,如果为0,表示不具有模糊效果。
text-shadow : color x-offset y-offset blur-radius;
超链接伪类
设置伪类的顺序:a:link->a:visited->a:hover->a:active
列表样式
list-style-type
list-style-image
list-style-position
list-style
网页背景
div布局页面
背景颜色:(background-color)和背景图像(background-image)两种方式。 特殊值:transparent(透明的)
背景图像引入:background-image:url(“图片路径”)
背景重复方式:(background-repeat)
1.repeat:沿水平和垂直两个方向平铺。
2.no-repeat:不平铺,及图片只显示一次。
3.repeat-x:只沿水平方向平铺。
4.repeat-y:只沿垂直方向平铺。
背景定位:(background-position)
1.Xpos Ypos :像素值
2.X% Y% :百分比表示背景位置
3.X,Y方向:水平方向关键值(left,center,right)垂直方向关键值(top: center,bottom:)
背景尺寸:background-size:auto;(默认值,无变化。)
background-size :percentage(改成固定像素点)
background-size:cover;(整个图片放大填充)注意:(居中加background-position:center;)
background-size:contain(可以让背景图片保持本身的宽高比例,将背景图片缩放到宽度或高度正好适应定义的区域)
CSS3渐变
linear-gradient(position,color,color)
浏览器:
IE 加前缀:-ms-
火狐 :-moz-
谷歌 :-webkit-
渐变的方向:
- to bottom :颜色从顶部到底部
- to left:颜色从右到左
- to right:颜色从左到右
- to top left:右下方到左上方
- to top ringht:颜色从左下方到右上方
- to bottom left:颜色从右上方到左下方
- to bottom right:颜色从左上方到右下方
注意:径向渐变radial-gradient:径向渐变是圆形或椭圆形渐变,颜色不再沿着一条直线变化,而是从一个新的
起点朝所以方向混合。
linear-gradient ( position, color1, color2,…)
-webkit-linear-gradient ( position, color1, color2,…)