HTML CSS3美化网页元素

目录

一、字体样式

二、文本样式

三、伪类样式

四、列表样式

五、背景样式

1、背景颜色

2、背景图片

---

一、字体样式

font-family  字体样式
font-size    字体大小
        px像素
        em根据父容器字体大小改变(em*父级字体大小px)
        rem根据根元素字体大小改变(rem*根元素字体大小px)
font-style    字体风格(倾斜)
font-weight   字体粗细
​
简写：
font：风格 粗细 大小 类型

二、文本样式

color   文本颜色
        单词，十六进制，rgb，rgba(透明度从0-1)
text-align 内容水平移动(在块级元素中生效)
        left 左(默认) right 右 center居中
line-height 设置行高
text-decoration 文本装饰
        none 默认，不要钱
        underline 下划线
        overline 上划线
        line-throught 删除线  (也可以用del标签)
vertical-align 垂直对齐方式
        vertical-align属性:middle居中、top上、bottom下
text-shadow 文字阴影
        color颜色 x-offset坐标 y-offset坐标 blur-radius模糊程度;

三、伪类样式

超链接伪类

伪类名称	含义	示例
a:link	未单击访问时超链接样式	a:link{color:#9ef5f9;}
a:visited	单击访问后超链接样式	a:visited {color:#333;}
a:hover	鼠标悬浮其上的超链接样式	a:hover{color:#ff7300;}
a:active	鼠标单击未释放的超链接样式	a:active {color:#999;}

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

四、列表样式

去除列表前小黑点

1.list-style-type

2.list-style-image

值	说明	语法示例
none	无标记符号	list-style- type:none;
disc	实心圆，默认类型	list-style- type:disc;
circle	空心圆	list-style- type:circle;
square	实心正方形	list-style- type:square;
decimal	数字	list-style- type:decimal

五、背景样式

1、背景颜色

background-color

2、背景图片

background-image 背景图片 url路径

background-repeat 是否平铺

repeat：沿水平和垂直两个方向平铺

no-repeat：不平铺，即只显示一次

repeat-x：只沿着水平方向平铺

repeat-y：只沿着垂直方向平铺

background-position 图像位移

background-position: X Y
水平方向的关键词：
left、center、right
垂直方向的关键词：
top、center、bottom

background 简写：背景颜色 背景图像路径 背景位置 是否平铺

background-size 图像大小

auto    默认值，使用背景图片保存原样
percentage     当使用百分值时，不是相对于背景的尺寸大小来计算的，而是相对于元素宽度来计算的
cover    整个背景图片放大填充了整个元素
contain   让背景图片保持本身的宽高比例，将背景图片放到宽度或者高度正好适应所定义背景的区域
​
使用百分比%

background：linear-gradient 背景颜色渐变

background:linear-gradient(方向、颜色...)
background:-webkit-linear-gradient(left top ,#0070c0,#cc0000)

渐变兼容

IE浏览器是Trident内核，加前缀：-ms-

Chrome浏览器是Webkit内核，加前缀：-webkit-

Safari浏览器是Webkit内核，加前缀：-webkit-

Opera浏览器是Blink内核，加前缀：-o-

Firefox浏览器是Mozilla内核，加前缀：-moz-