CSS的一些常用样式,如背景、文字、文本、表格、列表等,以及一些常用的场景,如居中对齐、溢出、隐藏元素等。01、常用样式 1.1、background背景 设置元素背景的样式 background,更
顺晟科技
2021-08-27 11:52:44
160
一、背景颜色图片平铺
background-color 背景颜色 background-image 背景图片地址 background-repeat 是否平铺 默认是平铺 background-position 背景位置 (模式是左上角 0 0) 方位没有顺序 1.(length 长度 )写单位 或者百分比 个值是x坐标 第二个一定是y 2.(position: top|center | bottom | left | right 方位坐标) 如果方位名词只写一个 另外一个默认为center 3.混搭也ok background-attachment 设置背景图是否固定 默认是scroll, fixed是固定 合写: background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置 background: #000 url(image/timg.jpg) no-repeat center -25px fixed;
二、背景缩放
景缩放 background-size 100px; 等比例缩放 尽量只改一个值 否则图片会是真扭曲也可以写百分比 常用的两个参数: cover :会自动调整缩放比例,保证图片始终填充满背景区域,如有溢出自动隐藏 contain:图片等比例缩放,如果图片的宽度或者高度有一个和盒子一样大了就不在缩放,不会有缺失的部分,保证了图片的完整性。 多背景图片设置 width: 800px; height: 500px; background: url(image/harry.jpg) no-repeat left top, url(image/denglun.jpg) no-repeat right bottom purple; 以逗号分隔可以设置多背景,课用于自适应布局,注意事项: 1. 一个元素可以设置多重背景图片 2. 每组属性间使用逗号分隔 3. 如果设置了多重背景之间存在交集,前面的图片会覆盖在后面图片之上 4. 为了避免背景色将图片覆盖,背景色通常定义在最后一组上
三、小复习 shadow文字阴影和文本修饰
凹凸文字效果,shadow实现 div:first-child { text-shadow: 1px 1px 1px #000,-1px -1px 1px #fff; } div:last-child { text-shadow: -1px -1px 1px #000,1px 1px 1px #fff; } 文本修饰 text-decoration: none 默认 定义标准的文本 取消文本装饰 underline 定义文本下的一条线 overline 定义文本上的一条线 line-through 定义穿过文本下的一条线 设置文字水平居中小tip 设置文字的行高等于盒子的高度 line-height: 50px;
09
2022-11
30
2022-09
15
2022-09
15
2022-09
15
2022-09
15
2022-09