CSS3网页元素

目录

一、常用的字体属性、含义及用法

二、常用的文本属性、含义及用法

三、超链接伪类

四、列表样式list-style

五、背景属性

---

<span>标签是用来组合HTML中的行内元素的。

一、常用的字体属性、含义及用法

属性名	含义
font-family	字体类型
font-size	字体大小
font-style	字体风格
font-weight	字体粗细
font-variant	字体小型大写字母

font-family属性的值：

值	说明
serif	衬线字体
sans-serif	非衬线字体
monospace	等宽字体
cursive	草书字体
fantasy	虚幻字体

font-style属性的值：

值	说明
normal	默认值  文字正常显示
italic	文字会以 斜体 显示
oblique	文字也会以 倾斜效果 显示

font-weight属性的值：

值	说明
normal	默认字体
bold	粗体字体
bolder	更粗的字体
light	更细的字体

font-variant属性的值：

值	说明
normal	正常显示  默认值
small-caps	文字以小型的大写字母显示

二、常用的文本属性、含义及用法

属性名	含义
color	设置文本的颜色
text-align	设置文本水平对齐方式
text-indent	设置首行文本的缩进（em为单位）
line-height	设置文本的行高
text-decoration	设置文本的装饰
text-transform	设置文本的大小写
vertical-align	设置元素垂直对齐方式
text-shadow	设置文本的阴影效果   (水平阴影)x轴位移  (垂直阴影)y轴位移 模糊半径 阴影颜色(rgba)
letter-spacing	设置字符间距

text-align属性常用的值

值	功能
left	把文本排列在左边
right	把文本排列在右边
center	把文本排列在中间
justify	实现两端对齐文本效果

text-decoration属性常用的值

值	功能
none	默认值
underline	设置文本下划线
overline	设置文本上划线
line-through	设置文本删除线

垂直对齐方式：vertical-align

值	说明
baseline	默认值， 基线对齐
top	顶部对齐
bottom	底部对齐
middle	居中对齐

 应用：1、设置图片和文字的对齐效果

            2、解决图片的三像素问题

             解决方式一：vertical-align属性值不为默认值即可

             解决方式二：给图片转为块元素

             解决方案三：给父元素设置font-size为0

行高line-hight

        行高=上间距+字符框+下间距

        行间距=行高-字体大小

三、超链接伪类

伪类名	含义
a:link	单击未访问前的超链接样式
a:visited	单击访问过后的超链接样式
a:hover	鼠标悬浮移入的超链接样式
a:active	鼠标单击未释放的超链接样式

注意：

       1、link  visited  只对a标签产生效果（超链接）

                   hover  active 对所有标签都可以产生效果

        2、如果要同时设置这四个伪类，那么伪类是有顺序要求的 

四、列表样式list-style

值	作用
none	无标记
disc	空心圆
circle	实心圆
square	实心正方形
decimal	数字

<div>网页内容</div>

五、背景属性

背景：background: 背景颜色 背景图片 背景位置 背景重复方式

1.background-color背景颜色  

2.background-image背景图片

3.background-position背景位置

4.background-repeat背景重复方式

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

     no-repeat:不平铺，既背景图像只显示一次

     repeat-x:只沿水平方向平铺

     repeat-y:只沿垂直方向平铺

5.background-size  背景尺寸

         background-size:  auto;

         或background-size: 0 auto;

 6.percentage百分比