1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > CSS字体样式 背景样式 列表样式

CSS字体样式 背景样式 列表样式

时间:2020-11-02 06:31:03

相关推荐

CSS字体样式 背景样式 列表样式

字体样式

1.color:字体颜色

2.font-size:字体大小

尽量用偶数

3.font-family:字体型号

可以设置多个字体,用,隔开,优先使用第一个字体,如果没有使用下一个。

中文字体加引号,英文字体如果有空格、$、#则也要加引号

线上字体

@font-face {font-family:"";src:''};

4.font-style:字体样式(斜体等)

normal正常

italic斜体

5.font-weight:设置实体粗细

属性值:normal ,bold加粗,bolder比父元素更粗,lighter比父元素更细,数值(100-900)

字体的综合设置 选择器{font: font-style font-weight font-size font-family;}h1{font:italic bold 40px "微软雅黑";}font-size font-family不能省略

6.text-decoration:

属性值

underline下划线 / overline上划线 / none默认 定义标准的文本/ blink字体闪烁

7.text-align:水平居中

8.text-indent:首行缩进 1em-一个字的宽度

9.text-shadow:text-shadow:水平位置 垂直位置 模糊距离 阴影颜色 前两个参数必须写

text-shadow:1px 2px 3px rgba(0,0,0,0.4)

10.line-height:行高 行高 一般比字体大7.8个像素

(标签的行高等于标签的height可以设置文字垂直居中)

11.text-transform:变换字体

uppercase 转化为大写

lowercase 转换为小写

capitalize 首字母大写

12.letter-spacing:字体间距

word-spacing :2px 单词间距 对中文无效

13.cursor:改变鼠标样式

pointer 光标呈现为指示链接的指针(一只手)

help

move

wait

n-resize

背景的样式

1.background-color:背景颜色

2.background-image:背景图片url()

3.background-repeat:背景是否平铺 repeat-x水平平铺 repeat-y纵向平铺 repeat no-repeat不平铺

4.background-size:w h; 设置背景图片大小 可以改变一个值会等比例进行缩放 可以设置百分比 100% 100% 占满

设置为contain时会自动调整缩放比例,保证图片始终填充满背景区域,溢出的部分会被隐藏

cover会自动调整缩放比例,保证图片始终完整显示在背景区域

5.background-position:背景定位

background-position背景位置 top center bottom left right 默认为left top 方位名词没有顺序

background-position:10px 10px;(x,y)

background-position:10px center;混搭

6.background-attachment:设置背景图片不会随内容滚动而滚动

scroll;默认为滚动 fixed固定背景 不随着内容滚动而滚动

7.background-clip 设定背景的覆盖范围

border-box : 背景位于边框以内

padding-box : 背景位于内边距以内

content-box : 背景位于内容区

8.background-origin 设定背景图片的起始覆盖点

border-box : 背景图片从边框的外边缘开始绘制

padding-box : 背景图片从内边距的外边缘开始绘制

content-box : 背景图片绘制在内容区

**clip和origin配合使用**

简写:background: #000(背景颜色) url()(背景图片) no-repeat(背景平铺) fixed(背景固定) 背景位置;

列表的样式

1.list-style-type:设置列表标志类型

cricle 空心圆

square 正方形

decimal 数字

lower-roman 小写罗马字体

upper-roman 大写罗马字体

2.list-style-position:outsize/insize设置列表标志出现的位置

outside

标志在列表外

inside

在列表内

3.list-style-image:自定义设置列表项标志图片

url(’’)

列表项设置为图片

4.list-style:类型,图片,位置

速记写法

list-style:

type image position

如果type 和image都存在 image会生效

outline

环绕线

在border外面

outline-width: 3px;

outline-style: solid;

outline-color: red;

outline-offset: 3px;

常用于清除input边框

outline:none;

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。