CSS美化页面

给小编点点关注,点点赞

字体样式:

line-height:设置文本行高

transprent:设置背景颜色透明值

font-family:设置字体类型

font-size:设置字体大小

font-style:设置字体风格

font-weight:设置字体的粗细

font-family的属性:英文,“中文类型”;

字体风格属性有:normal(默认值)、italic、oblique

font-weight属性:normal、bold(粗的)、bolder(更粗)、lighter(更细)

font属性:字体属性的顺序:风格——粗细——大小——类型

可以将四个元素简写到一个标签内:font:italic bold12px “宋体”;(中间用空格隔开,必须要按顺序来写,风格 粗细 大小 类型)

文本样式:

color:设置文本颜色

text-align:设置水平对齐方式(left文本放到左边,right文本放到右边,center文本放到中间,justify实现两端对齐文本效果)

text-indent:设置首行文本的缩进

line-height:设置文本的行高

text-decoration:设置文本的装饰(none默认、underline设置文本的下划线、overline设置文本的上划线、line-through设置文本的删除线)

vertical-align属性:middle居中、top上面、bottom下面(可以设置文本域图片的对齐位置)

text-shadow:文本阴影

text-shadow:color(阴影颜色) x-offset(x轴)y-offset(y轴)blur-radius(阴影半经)

语法:text-shadow: red 2px 2px 2px

超链接样式:

a:link: 未访问样式

a:visited: 访问过后样式

a:hover: 鼠标悬浮上的样式

a:active: 鼠标点击未释放的样式

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

列表样式;

list-style:none(没有标记符号)

list-style:disc(默认)

list-style:circle(空心圆)

list-style:square(实心正方形)

list-style:decimal(数字)

网页背景;

background-color:背景颜色

background-image:背景图像

background-position:背景定位

background-repeat:背景重复方式

background-size:背景尺寸

background-repea属性;

repeat:沿水平和垂直方向铺平

no-repeat:不铺平,只显示一次

repeat-x:沿水平铺平

repeat-y:沿垂直铺平

background-size属性;

auto:默认值

percentage:比例

cover:放大

contain:缩小

颜色渐变:

linear-gradient(position,color1,color2)

【position】渐变的方向

【colo1】第一种颜色

【color2】第二种颜色

总结:

CSS美化页面

 

上一篇:input输入框用法


下一篇:微信小程序textarea输入框 及方法实现