css文字与排版

Posted 2021-10-29 mingleyuan

目录

• 文字与排版样式
  • `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：继承父级样式