15158846557 在线咨询 在线咨询
15158846557 在线咨询
所在位置: 首页 > 营销资讯 > 网站运营 > CSS常见样式

CSS常见样式

时间:2023-09-26 10:30:01 | 来源:网站运营

时间:2023-09-26 10:30:01 来源:网站运营

CSS常见样式:

一、列表样式

1、list-style

/*去掉默认的符号。这个常用*/ul, ol { list-style: none;}/*列表方形符号*/ul { list-style: square;}/*符号在盒模型内*/ul { list-style: inside; /*outside*/}/*可以用图形符号*/ul { list-style: url(https://i.loli.net/2019/11/08/4vriKTQR6sXnFBW.png)}

二、背景样式(background)

1、background-color

.header{ background-color: rgba(0, 0, 0, 0.3);}

2、background-image

.content { background-image: url(../images/bg.png);}.header { background-image: linear-gradient(#ddd, #fff); /* 渐变背景*/}

3、background-repeat

4、background-position

5、background-size

6、CSS3 background-clip

7、其他写法

.box{ background: #ccc url(images/bg.png) center no-repeat;}.box{ background: #ccc url(images/bg.png) center no-repeat, #ccc url(images/bg2.png) 20px 20px no-repeat;}

三、边框样式(border)

border: 1px solid red;

  1. solid 实线
  2. dotted 点线
  3. dashed 虚线
.list { border: 1px solid #ddd;}.list > .item { border-bottom: 1px solid #ddd; /* 下边框 */}

1、border-radius

.box{ border-radius: 4px; border-radius: 4px 8px 16px 32px; /*左上 右上右下左下*/}宽高相等,border-radius为宽高的一半以上

.box{ width: 100px; height: 100px; border-radius: 50%; border-radius: 50px;}.box { width: 0; height: 0; border: 50px solid transparent; border-radius: 50%; border-top-color: red; }.box { width: 0; height: 0; border: 50px solid transparent; border-radius: 50%; border-top-color: red; border-right-color: red; }.box { width: 0; height: 0; border: 50px solid transparent; border-top-color: red;}.box { width: 100px; height: 200px; background: red; border-radius: 50%;}.box { width: 0; height: 0; border: 50px solid transparent; border-radius: 50%; border-top-color: red;}.box { width: 0; height: 0; border: 50px solid transparent; border-radius: 50%; border-top-color: red; border-right-color: red;}

三、表格样式

用于设置表格边框是分开还是合并。

  1. collapse 合并
  2. separate 分开
table { border-collapse: collapse;}

四、行高(line-height)

  1. line-height: 1.5; 当前元素font-size的1.5倍。该倍数会继承给孩子。推荐的用法。
  2. line-height: 20px; 占据高度固定值
  3. line-height: 150%; 当前元素font-size的1.5倍。会计算具体值,把具体值继承给孩子。
body { font: 14px/1.4 Arial;}注意:文字占据的高度不是由font-size决定的,而是由line-height决定的。

五、对齐(vertical-align)

  1. 父元素的基线由父元素最后一个行盒的基线决定,如果父亲为空那基线就是下margin
  2. baseline 使元素的基线与父元素的基线对齐
  3. middle 使元素的中部与父元素的基线加上父元素x高度的一半对齐。
  4. top 使元素及其后代元素的顶部与整行的顶部对齐。
  5. bottom 使元素及其后代元素的底部与整行的底部对齐。


关键词:样式

74
73
25
news

版权所有© 亿企邦 1997-2025 保留一切法律许可权利。

为了最佳展示效果,本站不支持IE9及以下版本的浏览器,建议您使用谷歌Chrome浏览器。 点击下载Chrome浏览器
关闭