CSS美化网页元素

目录

1.字体样式

1.1样式概括

1.2字体风格

1.3字体的粗细

1.4字体属性

2.文本样式

2.1文本属性

2.2文本段落水平对齐

2.3文本修饰和垂直对齐

2.3.1文本修饰

2.3.2垂直对齐

2.4文本阴影

3.CSS使用超链接列表

4.背景样式

4.1背景属性

4.2背景定位

4.3背景属性

[4.4 背景尺寸](#4.4 背景尺寸)

5.CSS3渐变


1.字体样式

1.1样式概括

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

<span>作用:能让某几个文字或者某个词语凸显出来

html 复制代码
<p>享受<span class="show">"北大式"</span>教育服务</p>

1.2字体风格

font-style属性:normal、italic和oblique

normal为正常,italic和oblique都为斜体

italic:如果设计或品牌指南要求使用特定斜体字体,且该字体有专门的斜体版本,应使用 italic 确保正确视觉效果

oblique:若只是想让文本稍微倾斜,或所用字体没有专门斜体版本,可使用 oblique

1.3字体的粗细

1.4字体属性

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

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

2.文本样式

2.1文本属性

2.2文本段落水平对齐

水平对齐方式:text-align属性

首行缩进:text-indent(em或px)

行高:line-height:px

2.3文本修饰和垂直对齐

2.3.1文本修饰

text-decoration属性

2.3.2垂直对齐

vertical-align属性:middle(中) top(顶) bottom(底)

2.4文本阴影

3.CSS使用超链接列表

示例:

html 复制代码
a:hover {
	color:#B46210;
	text-decoration:underline;
}

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

列表样式:list-style-type

例:去除列表前面的小黑点

li {

list-style:none;

}

4.背景样式

4.1背景属性

背景颜色:background-color

背景图像:background-image

background-image属性:background-image:url(图片路径);

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

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

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

(3)repeat-x:只沿水平方向平铺

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

4.2背景定位

背景定位: background-position属性

4.3背景属性

背景属性:background属性

4.4 背景尺寸

背景尺寸:background-size

5.CSS3渐变

线性渐变:颜色沿着一条直线过渡:从左到右、从右到左、从上到下等

径向渐变(了解):圆形或椭圆形渐变,颜色不再沿着一条直线变化,而是从一个起点朝所有方向混合

语法:

相关推荐
羲云2 分钟前
Claude 越界事件之后:Agent 权限设计为什么不能只靠提示词
前端
行者全栈架构师16 分钟前
【鸿蒙心迹】鸿蒙网络请求架构实战——@ohos.net.http 到 Axios 封装、拦截器与统一错误处理(HarmonyOS 7.x)
前端·算法·架构
全栈Agent 小李23 分钟前
【无标题】
前端·后端·agent·ai编程·全栈·cursor·mcp
羲云23 分钟前
别让 AI 凭记忆做调研:给 WorkBuddy 接上可核验的实时搜索
前端
deli0071 小时前
连接池到底配多大?QPS 和 RT 算一遍,再跑 1 万次请求实测超时率
前端
风花一世月1 小时前
🏮 我把三坊七巷做成了能飞的 3D 地图(901 个真实建筑轮廓、20 处景点,在线直接玩)
前端
特立独行的猫A1 小时前
用仓颉语言写一个串口调试助手:cj-tauri 实战
前端
小凯在掘金1 小时前
Shadow DOM 和 Virtual DOM ?别再傻傻分不清
前端·html
郑州光合科技余经理1 小时前
本地生活平台搭建:跨业态用户标识怎么贯通
java·开发语言·前端·后端·uni-app·php·ai编程
数据掘金1 小时前
埋点事件命名升级时老数据怎么办
前端