当前位置: 首页 > news >正文

css美化网页元素

一.字体样式
1.字体类型:--font-family属性
p{font-family:verdana "楷体"}
2.字体风格:--font-style属性
nomal--正常
italic和oblique--斜体
3.字体粗细:--font-weight属性
normal 默认值 标准字体
bold 粗体
bolder 更粗
lighter 更细
400=normal 700=bold
二.文本样式
1.color 颜色
2.text-align 对齐方式
3.text-indent 首行文本的缩进(px/em)
4.line-height 文本行高
5.text-decoration 文本装饰
三.水平对齐方式--text-align属性
left 左 默认值
right 右
center 中
justify 两端对齐
四.垂直对齐--vertical-align属性
middle
top
bottom
五.文本装饰--text-decoration属性
1.none 标准文本
2.underline 文本下划线
3.overline 文本下划线
4.line-though 文本删除线
5.blink 文本闪烁
六.超链接伪类
1.伪类样式-语法:
a:hover{
color:#155;
}
2.伪类名称 含义
a:link 为单击访问时超链接样式
a:visted 单击访问后超链接样式
a:hover 鼠标悬浮其上的超链接样式
a:active 鼠标单击未释放的超链接样式
顺序:a:link>a:visted>a:hover>a:active
七.<div>标签
#header{
color:#325
}
<div id="header">....</div>
八.网页背景
1.背景颜色:backgound-color
2.背景图像:backgound-image
3.背景重复方式:backgound-repeat
4.背景定位:backgound-position

值 含义
xpos ypos 单位:px. xpos表示水平位置 ypos表示垂直位置
x% y% 使用百分比表示位置
x.y方向关键词 水平方向关键词:left,center,right
垂直方向关键词:top,center,bottom
简写:backgound:颜色 图像 背景定位 重复显示
九.列表样式
1.list-style-type
值 说明
none 无标记符号
dise 实心圆 默认值
cirde 空心圆
square 实心正方形
decimal 数字
2.list-style-image
li{list-style-image:图片路径;
list-style-type:none;
}
3.list-style-position
inside
outside
li{list-style-position:inside;}
简写:type position image

转载于:https://www.cnblogs.com/pohuaiwang/p/6927481.html

相关文章:

  • Android 平台全球网络流量首次超越 iOS
  • 最适宜初学者学习的几种编程语言
  • Google:这个安卓新漏洞其实没什么大不了
  • python 回溯法 子集树模板 系列 —— 14、最长公共子序列(LCS)
  • 开源中国 2013 大记事
  • 理解Scala的Symbol类型
  • Centos7修改主机名
  • MySQL改变表的存储引擎
  • 30 个 PHP 的 Excel 处理类
  • Factory Method模式 (一)
  • Androidn Notification的使用,解决找不到setLatestEventInfo方法
  • Mesos 框架的测试平台 minimesos
  • easyui的datagird动态设置当前页数
  • Spring-MVC
  • Irrlicht 3D Engine 笔记系列 之 教程6- 2D Graphics
  • [PHP内核探索]PHP中的哈希表
  • DOM的那些事
  • JavaScript标准库系列——Math对象和Date对象(二)
  • Just for fun——迅速写完快速排序
  • Making An Indicator With Pure CSS
  • nodejs实现webservice问题总结
  • Python 使用 Tornado 框架实现 WebHook 自动部署 Git 项目
  • ubuntu 下nginx安装 并支持https协议
  • vue从入门到进阶:计算属性computed与侦听器watch(三)
  • 初识 webpack
  • 从setTimeout-setInterval看JS线程
  • 批量截取pdf文件
  • 巧用 TypeScript (一)
  • 软件开发学习的5大技巧,你知道吗?
  • 它承受着该等级不该有的简单, leetcode 564 寻找最近的回文数
  • 腾讯视频格式如何转换成mp4 将下载的qlv文件转换成mp4的方法
  • 为视图添加丝滑的水波纹
  • 新手搭建网站的主要流程
  • 栈实现走出迷宫(C++)
  • Java总结 - String - 这篇请使劲喷我
  • ​虚拟化系列介绍(十)
  • # C++之functional库用法整理
  • # Python csv、xlsx、json、二进制(MP3) 文件读写基本使用
  • $GOPATH/go.mod exists but should not goland
  • ()、[]、{}、(())、[[]]命令替换
  • (NSDate) 时间 (time )比较
  • (多级缓存)多级缓存
  • (附源码)spring boot车辆管理系统 毕业设计 031034
  • (九十四)函数和二维数组
  • (四)TensorRT | 基于 GPU 端的 Python 推理
  • (转)ORM
  • (转)原始图像数据和PDF中的图像数据
  • .bat批处理(八):各种形式的变量%0、%i、%%i、var、%var%、!var!的含义和区别
  • .bat批处理出现中文乱码的情况
  • .Mobi域名介绍
  • .NET Core 通过 Ef Core 操作 Mysql
  • .Net Framework 4.x 程序到底运行在哪个 CLR 版本之上
  • .NET/C# 在代码中测量代码执行耗时的建议(比较系统性能计数器和系统时间)...
  • .NET和.COM和.CN域名区别
  • @JSONField或@JsonProperty注解使用