网站首页 > 知识剖析 正文
常见样式属性及值
字体:
font
-family
-size
-style: normal(正常)|italic(倾斜)|oblique
-weight: normal|bold(粗体)
如果组合起来编写: font: style weight size family
字体大小的单位可以是 px, em, rem, pt, cm, mm, in, pc
文本:
color
text-align(水平对齐方式): left|center|right|justify(两端对齐)
vertical-align(锤直对齐方式): top|middle|bottom
text-indent: 首行缩进
line-height: 行高
text-decoration(文本装饰): none(无)|underline(下划线)|overline(上划线)|line-through(删除线)
text-shadow(文本阴影): 阴影颜色 x轴偏移量 y轴偏移量 模糊半径
注意:
vertical-align只对img,input,select,textarea,td有效!
如果是在一个div|p中,单行文本锤直居中显示,使用line-height!
颜色的表示方式:
#十六进制代码
rgb(r,g,b) 其中,r,g,b分量不超过255
rgba(r,g,b,a) 其中a是透明度(alpha)
超链接伪类:
:link 未访问过的链接
:visited 访问过的链接
:hover 鼠标悬浮在链接上
:active 正在点击超链接(鼠标左键还没放开)
注意: 如果这4种状态都要处理, 严格按照该顺序编写选择器!
一般情况下, 只需这样即可:
a { }
a:hover { }
列表样式
list-style
list-style-type(列表标记类型): none|disc|circle|square|decimal
list-style-image(自定义图片作为列表标记): url(图片地址)
list-style-position(列表标记的位置): outside(标记在li外)|inside(标记在li之内)
背景样式
background-color: 背景颜色
background-image: url(图片地址)
background-repeat: repeat(横竖都重复)|no-repeat|repeat-x|}repeat-y
background-position(背景图位置): x坐标 y坐标
background-size(背景图的尺寸): w(宽度) h(高度);
注意: x和y坐标可以用数值(像素)|百分比|left|right|top|bottom|center
可以使用渐变样式来替代背景图:
线性渐变:
background-image: linear-gradient(方向, 颜色1, 颜色2, ...);
方向: to left, to right, to top, to bottom, 角度(45deg)
径向渐变:
background-image: radial-gradient(颜色1,颜色2, ...)
合起来写:
background: 背景色 背景图 平铺方式 背景图的位置;
猜你喜欢
- 2024-11-18 WPS办公软件使用指南:从基础到高级功能全解析
- 2024-11-18 CSS解析器——css模块使用详解,用更优雅的方式转换css内容
- 2024-11-18 如何在Vue中使用Ueditor富文本编辑器,详情介绍如下
- 2024-11-18 增强自动插入,开源编辑器Notepad++ 6.7.0下载
- 2024-11-18 如何遍历DOM?
- 2024-11-18 解决GitHub Issue能力登顶,字节豆包MarsCode团队分享工程实践
- 2024-11-18 提高开发效率的 9 个工具
- 2024-11-18 如何在 Mac 上轻松制作好看的文本长图?
- 2024-11-18 Css字体间距的设置方法
- 2024-11-18 如何在Word文档中实现精准换行技巧
- 04-29php开发者composer使用看这一篇就够了
- 04-29引用和变量声明在不同语言中的实作
- 04-29PHP 没你想的那么差
- 04-29Ubuntu linux 上的 Nginx 和 Php 安装
- 04-29CentOS下通过yum搭建lnmp(单版本PHP)
- 04-29为什么 PHP8 是个高性能版本
- 04-29PHP8函数包含文件-PHP8知识详解
- 04-29使用无参数函数进行命令执行
- 最近发表
- 标签列表
-
- xml (46)
- css animation (57)
- array_slice (60)
- htmlspecialchars (54)
- position: absolute (54)
- datediff函数 (47)
- array_pop (49)
- jsmap (52)
- toggleclass (43)
- console.time (63)
- .sql (41)
- ahref (40)
- js json.parse (59)
- html复选框 (60)
- css 透明 (44)
- css 颜色 (47)
- php replace (41)
- css nth-child (48)
- min-height (40)
- xml schema (44)
- css 最后一个元素 (46)
- location.origin (44)
- table border (49)
- html tr (40)
- video controls (49)