写点什么

CSS 属性整理

用户头像
kidd
关注
发布于: 2020 年 08 月 20 日

字体

字体风格:font-style:normal| italic |oblique;

字体粗细:font-weight: normal | bold | bolder | lighter | number;

字号大小:font-size:px|百分比|em|rem;

字体样式:font-family:字体1,字体2,字体3;



复合属性:font:italic hold 12px "宋体",Arail;



文本

字体颜色:color:red|#456545;

文体修饰:text-decoration: none | underline | overline | line-through;

取消下划线:text-decoration: none

文体行距:line-heigh:normal | 18px;

文本缩进:text-indent:length;

文本水平对齐:text-align:left|center|right|justify;

文本垂直对齐:vertical-align: top | bottom | middle;

字词间隔:word-spacing: normal | length;

字符间隔:letter-spacing: normal | length;

自动换行:word-break: break-word;



背景

背景颜色:background-color:red|#fff552;

背景图片:background-image:none|url(nrl);

背景图定位:background-position:x y;

背景图重复:background-repeat: repeat | no-repeat | repeat-x | repeat-y;

背景图滚动:background-attachment : scroll | fixed;



复合属性:background:blue url(url) 0 0 no-repeat;



BGC

背景图片不重复不平铺,可以这样设定背景:

1、<body style="background-image: url("图片文件地址"); background-attachment: fixed;">

这样背景图片就会固定住,不会因页面滚动而重复。

2、使图在任何大小的屏幕都不会显示重复,可以这样设定背景(图像不平铺):

<body style="background-image: url("图片文件地址"); background-repeat:no-repeat;">



有三张单独的图片使用多背景技术实现

background-image: url(http://img.mukewang.com/54cf2365000140e600740095.jpg),

url(http://img.mukewang.com/54cf238a0001728d00740095.jpg),

url(http://img.mukewang.com/54cf23b60001fd9700740096.jpg);

background-position: left top, 100px 0, 200px 0;



background-origin

设置元素背景图片的原始起始位置

语法:

background-origin : border-box | padding-box | content-box;

参数分别表示背景图片是从边框,还是内边距(默认值),或者是内容区域开始显示。



background-clip

用来将背景图片做适当的裁剪以适应实际需要。

语法:

background-clip : border-box | padding-box | content-box | no-clip

参数分别表示从边框、内填充,或者内容区域向外裁剪背景。no-clip表示不裁切,和参数border-box显示同样的效果。

文字天

第四个属性:需要加前缀 background-clip:text;



background-size

设置背景图片的大小,以长度值百分比显示,还可以通过covercontain来对图片进行伸缩。

语法:

background-size: auto | <长度值> | <百分比> | cover | contain

取值说明:

1、auto:默认值,不改变背景图片的原始高度和宽度;

2、<长度值>:成对出现如200px 50px,将背景图片宽高依次设置为前面两个值,当设置一个值时,将其作为图片宽度值来等比缩放

3、<百分比>:0%~100%之间的任何值,将背景图片宽高依次设置为所在元素宽高乘以前面百分比得出的数值,当设置一个值时同上;

4、cover:顾名思义为覆盖,即将背景图片等比缩放以填满整个容器,即填充忙高度为止;



5、contain:容纳,即将背景图片等比缩放至某一边紧贴容器边缘为止



PS:假如有人看我把CSS3的笔记也公开出来毕竟我用不上了~



发布于: 2020 年 08 月 20 日阅读数: 110
用户头像

kidd

关注

还未添加个人签名 2020.07.28 加入

还未添加个人简介

评论

发布
暂无评论
CSS属性整理