CSS-常见样式

学习目标

• 掌握常见样式的写法

一、列表样式

• 修改列表样式

/*去掉默认的符号。这个常用*/
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)
}

二、背景样式

2.1、background

默认情况下，背景区域覆盖内容+内边距+边框

2.2、background-color

• 用于设置背景色
• background-color: rgba(0, 0, 0, 0.3);

2.3、background-image

• 设置一张或者多张背景图片

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

2.4、background-repeat

控制背景图片的重复方式

• background-repeat: no-repeat; 不重复
• background-repeat: repeat; 水平和垂直都重复
• background-repeat: repeat-x; 水平重复
• background-repeat: repeat-y; 垂直重复

2.5、background-position

• 设置背景图的位置
• background-position: center; / top、left、right、bottom、bottom 50px right 100px/**
• CSS Sprites（精灵图、雪碧图）是指将多张图片（一般是小图标）合成一张大图，不同元素共
  用这张大图作为背景图，并给这些的元素设置相应的 background-position 值，在达到预期显示效
  果的同时，减少 HTTP 请求数的一种前端优化手法。这是早期实现图标的方式，现在已被icon font
  和 svg font取代
• 精灵图在线生成网站 https://csssprites.com

2.6、background-属性合并简写

• 属性合并简写
• 多重背景

.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;
}

2.7、background-size

• 用于设定背景图片的大小。IE9 以下不支持
• background-size: cover; 缩放背景图片以完全覆盖背景区，可能背景图片部分看不见。
• background-size: contain; 缩放背景图片以完全装入背景区，可能背景区部分空白。
• background-size: 100px 80px; 设置背景到固定尺寸，图片可能会失真

2.8、 CSS3 background-clip

• 属性用于设置元素背景区域覆盖的范围。
• border-box 覆盖至边框的最外围
• padding-box 覆盖至内边距的最外围
• content-box 仅覆盖元素内容区域
• 参考： https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip

小练习
• 使用background实现如下效果
ü http://js.jirengu.com/rifur

• 推荐资源

• 图床 https://sm.ms
• 图片Sprites https://csssprites.com
• 图片压缩 https://tinypng.com/

三、边框样式

3.1、border

• 用法

• border: 1px solid red;
  • solid 实线
  • dotted 点线
  • dashed 虚线

.list {
    border: 1px solid #ddd;
}
.list > .item {
    border-bottom: 1px solid #ddd; /* 下边框 */
}

3.2、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;
}

• border应用

• 实现三角形

.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;
 }

• border应用

• 实现三角形

.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;
 }

四、表格样式

4.1、table

• border-collapse

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

table {
  border-collapse: collapse;
}

行高
line-height
• 设置行盒的高度

• 也就是一行文字占据的垂直空间

• line-height: 1.5; 当前元素font-size的1.5倍。该倍数会继承给孩子。
推荐的用法。
• line-height: 20px; 占据高度固定值
• line-height: 150%; 当前元素font-size的1.5倍。会计算具体值，把具体值继承给孩子。

body {
  font: 14px/1.4 Arial;
}

注意：文字占据的高度不是由font-size决定的，而是由line-height决定的

五、对齐（了解）

vertical-align
• 用处

• 设置inline、inline-block、table-cell元素垂直对齐方式
• 父元素的基线由父元素最后一个行盒的基线决定，如果父亲为空那基线
  就是下margin
  • baseline 使元素的基线与父元素的基线对齐
  • middle 使元素的中部与父元素的基线加上父元素x高度的一半对
  齐。
  • top 使元素及其后代元素的顶部与整行的顶部对齐。
  • bottom 使元素及其后代元素的底部与整行的底部对齐