css美化网页元素

1.span标签的作用

能让某个文字或词语凸显出来

2.字体样式

|-----------------|--------------------------------------------|-----------------------------|
| 属性 | 含义 | 示例 |
| font-family | 设置字体类型 | font-family:"隶书"; |
| font-size | 设置字体大小 | font-size:12px; |
| font-style | 设置字体风格 | font-style:italic; |
| font-weight | 设置字体的粗细 | font-weight:bold; |
| font | 在一个声明中设置所有字体属性 字体属性的顺序:字体风格→字体粗细→字体大小→字体类型 | font:italic bold 36px "宋体"; |

3.font-size单位

px(像素)、em、cm、mm、pt、pc

4.font-style属性

normal、italic、oblique

5.font-weight

|---------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------|
| | 说明 |
| normal | 默认值,定义标准的字体 |
| bold | 粗体字体 |
| bolder | 更粗的字体 |
| lighter | 更细的字体 |
| 100**、200300400500600700800900 | 定义由细到粗的字体 **400等同于normal**,700等同于****bold** |

6.font属性

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

p span{font:oblique bold 12px "楷体";}

7.文本属性

|-----------------|------------|----------------------------|
| 属性 | 含义 | 示例 |
| color | 设置文本颜色 | color:#00C; |
| text-align | 设置元素水平对齐方式 | text-align:right; |
| text-indent | 设置首行文本的缩进 | text-indent:20px; |
| line-height | 设置文本的行高 | line-height:25px; |
| text-decoration | 设置文本的装饰 | text-decoration:underline; |

8.color属性

RGB

十六进制方法表示颜色:前两位是红色分量,中间两位是绿色分量,最后两位是蓝色分量

rgb(r,g,b) : 正整数的取值为0~255

RGBA

在RGB基础上增加了控制alpha透明度的参数,其中这个透明通道值为0~1

9.text-align属性

|-------------|-------------------------|
| | 说明 |
| left | 把文本排列到左边。默认值:由浏览器决定 |
| right | 把文本排列到右边 |
| center | 把文本排列到中间 |
| justify | 实现两端对齐文本效果 |

10.text-decoration

|------------------|-----------------|
| | 说明 |
| none | 默认值,定义的标准文本 |
| underline | 设置文本的下划线 |
| overline | 设置文本的上划线 |
| line-through | 设置文本的删除线 |

11.文本阴影

text-shadow : color x-offset y-offset blur-radius;

12.超链接伪类

标签名:伪类名{声明;}

a:hover {

color:#B46210;

text-decoration:underline;

}

|---------------|-------------------|-----------------------------|
| 伪类名称 | 含义 | 示例 |
| 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

13.列表样式

list-style-type

------------image

------------position

list-style

14.背景样式

背景颜色:background-color属性

背景图像:background-image属性

背景重复方式:background-repeat属性

背景定位:background-position属性

背景样式简写:background属性

15.设置背景图像

背景重复方式:background-repeat属性

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

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

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

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

16.背景定位

|--------------------------|---------------------------------------------------------------------------------------------------------|
| | 含义 |
| Xpos Ypos | 单位:px Xpos****表示水平位置,Ypos表示垂直位置 |
| X% Y% | 使用百分比表示背景的位置 |
| X**、Y方向关键词** | 水平方向的关键词: left**、centerright 垂直方向的关键词: topcenter、**bottom |

17.线性渐变

linear-gradient ( position, color1, color2,...)

相关推荐
_丿丨丨_5 小时前
XSS(跨站脚本攻击)
前端·网络·xss
天天进步20155 小时前
前端安全指南:防御XSS与CSRF攻击
前端·安全·xss
呼啦啦呼啦啦啦啦啦啦6 小时前
利用pdfjs实现的pdf预览简单demo(包含翻页功能)
android·javascript·pdf
拾光拾趣录7 小时前
括号生成算法
前端·算法
拾光拾趣录8 小时前
requestIdleCallback:让你的网页如丝般顺滑
前端·性能优化
前端 贾公子8 小时前
vue-cli 模式下安装 uni-ui
前端·javascript·windows
拾光拾趣录8 小时前
链表合并:双指针与递归
前端·javascript·算法
@大迁世界8 小时前
前端:优秀架构的坟墓
前端·架构
拼图2098 小时前
element-plus——图标推荐
javascript·vue.js·elementui
期待のcode9 小时前
图片上传实现
java·前端·javascript·数据库·servlet·交互