目录
- 文字与排版样式
- `
font文字样式 - 排版样式(text)
- 文字半透明
- 文字阴影
- `
- 背景和颜色
- 基本
- 背景简写
- 背景透明
- 背景缩放
- 列表样式
- 表格样式
- 表格边框样式
- 折叠边框
- 设置宽度和高度
- 表格对齐方式
- 定义表格标题位置
- 设置表格布局
文字与排版样式
`font文字样式
| 属性 | 描述 | 属性值 |
|---|---|---|
font-family |
字体族科 | 任意的字体族科名称，如果有多个中间用逗号隔开，以防止该浏览器无法解析 |
font-size |
字体大小 | 可以使用绝对大小、相对大小、长度和百分比 |
font-style |
字体样式 | normal(普通)，italic(斜体)或oblique(倾斜) |
font-weight |
字体加粗 | normal、bold或lighter |
font-variant |
字体变形 | normal(普通)或small-caps(小型大写字母) |
注意：使用font同时设置多个文字属性时，属性之间用空格隔开。
排版样式(text)
| 属性 | 描述 | 属性值 |
|---|---|---|
letter-spacing |
字母间隔 | 必须符合长度格式，运行使用负值 |
word-spacing |
文字间隔 | 必须符合长度格式，运行使用负值 |
text-decoration |
文字修饰 | underline(下划线),overline(上划线),line-through(删除线),blink(闪耀)或默认无 |
text-transform |
改变大小写 | uppercase(大写),lowercase(小写),capitalize(首字母大写)或者none(默认值) |
text-align |
横向排列 | left,right,center或justify |
text-indent |
文字缩进 | 一个长度或者百分比 |
line-height |
行高 | 数字或者百分比，允许负值 |
vertical-align |
垂直方式 | baseline,top,middle或bottom |
文字半透明
color: rgba(r,g,b,a); a 是alpha 透明的意思 取值范围 0~1之间
文字阴影
text-shadow:水平位置 垂直位置 模糊距离 阴影颜色;
h-shadow：必需，水平阴影的位置，运行负值v-shadow：必需，垂直阴影的位置，运行负值blur：可选，模糊的距离color：可选，阴影的颜色
背景和颜色
基本
| 属性 | 描述 | 属性值 |
|---|---|---|
background-color |
背景颜色 | 与color设置相同，也可以使用transparent(透明)值 |
background-image |
背景图片 | 图片URL |
barkground-repet |
背景重复 | repeat(默认),repeat-x,repeat-y,no-repeat |
barkground-attachment |
背景附件 | scroll(滚动),fixed(固定) |
barkground-position |
背景位置 | 横向的关键字(left、center或right),纵向的关键字(top、center或bottom)百分比和长度也可以用做安排背景图像的位置 |
背景位置使用：
先指定background-image属性。默认值为：(0% 0%)。
如果只指定了一个值，该值将用于横坐标。纵坐标将默认为50%。第二个值将用于纵坐标。
背景简写
background: transparent url(image.jpg) repeat-y scroll 50% 0;背景透明
background: rgba(0,0,0,0.3); /*最后一个参数是alpha 透明度 取值范围 0~1之间*/
border: 1px solid rgba(0,0,0,0.3);背景缩放
background-image: url('images/gyt.jpg');
background-size: 300px 100px;
/* background-size: contain;会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏 */
/* background-size: cover; 会自动调整缩放比例，保证图片始终完整显示在背景区域*/列表样式
| 属性 | 描述 | 属性值 |
|---|---|---|
list-style-type |
列表样式 | disc,circle,square,decimal,lower-roman,upper-roman,lower-alpha,upper-alpha或none |
list-style-image |
图像列表 | url或none |
list-style-position |
列表符号的缩进 | inside或outside |
表格样式
表格边框样式
我们可以使用如{border:1px solid red;}为table、th或td设置边框。
折叠边框
{border-collapse:collapse(合并边框)|separate(默认，边框独立)|inherit(继承父级样式)}
设置宽度和高度
通过width和height这两个属性定义，可以是百分比也可以是绝地值
表格对齐方式
我们使用text-align和vertical-align来设置表格中文本的对齐方式
定义表格标题位置
caption-size:top|bottom|left|right|inherit|
设置表格布局
使用label-layout属性来设置是否保证单元格宽度不被改变，其属性值如下：
auto：当内容超过宽度是能自动换行则自动换行，不能自动换行则增加宽度（默认值）fixed：无论内容是否超过宽度，都保持原来的宽度inherit：继承父级样式
原文地址：https://www.cnblogs.com/MingleYuan/p/10777621.html
时间： 2024-11-06 14:00:04