码迷,mamicode.com
首页 > Web开发 > 详细

css文字与排版

时间:2019-04-27 09:58:06      阅读:213      评论:0      收藏:0      [点我收藏+]

标签:参数   允许   删除线   样式   parent   部分   位置   大小写   半透明   

文字与排版样式

`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;}tablethtd设置边框。

折叠边框

{border-collapse:collapse(合并边框)|separate(默认,边框独立)|inherit(继承父级样式)}

设置宽度和高度

通过widthheight这两个属性定义,可以是百分比也可以是绝地值

表格对齐方式

我们使用text-alignvertical-align来设置表格中文本的对齐方式

定义表格标题位置

caption-size:top|bottom|left|right|inherit|

设置表格布局

使用label-layout属性来设置是否保证单元格宽度不被改变,其属性值如下:

  • auto:当内容超过宽度是能自动换行则自动换行,不能自动换行则增加宽度(默认值)
  • fixed:无论内容是否超过宽度,都保持原来的宽度
  • inherit:继承父级样式

css文字与排版

标签:参数   允许   删除线   样式   parent   部分   位置   大小写   半透明   

原文地址:https://www.cnblogs.com/MingleYuan/p/10777621.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!