2.3 CSS 属性样式

1.字体属性

• font-size：字体大小

• • Chrome浏览器支持的最小文字为12px，默认的文字大小为16px，并且0px会自动消失。
  • 不同浏览器默认的字体大小可能不一致，所以最好给一个明确的值，不要用默认大小。
  • 通常以给body设置font-size属性，这样body中的其他元素就都可以继承了。
  • 由于字体设计原因，文字最终呈现的大小，并不一定与font-size的值一致，可能大，也可能小。例如: font-size设为40px，最终呈现的文字，可能比40px大，也可能比 40px 小。
  • 通常情况下，文字相对字体设计框，并不是垂直居中的，通常都靠下一些。

• font-family：字体族

div{
    font-family:"STcaiyun","Microsoft YaHei",sans-serif;
}

• • 如果字体名包含空格，必须使用引号包裹起来。windows系统中，默认的字体就是微软雅黑。
  • 可以设置多个字体，按照从左到右的顺序逐个查找，找到就用，没有找到就使用后面的，且通常在最后写上serif(衬线字体)或sans-serif(非衬线字体)

• font-style：字体风格

• • normal:正常（默认值)
  • italic:斜体(使用字体自带的斜体效果)(推荐)
  • oblique:斜体（强制倾斜产生的斜体效果)

• font-weight：字体粗细

• • 关键字

• • • lighter :细
    • normal :正常
    • bold:粗
    • bolder:很粗(多数字体不支持)

• • 数值

• • • 100~300：等同于lighter , 400~500等同于normal , 600及以上等同于bold。

• font

• • 字体大小、字体族必须都写上。
  • 字体族必须是最后一位、字体大小必须是倒数第二位。
  • 各个属性间用空格隔开。

• Web字体

• • @font-face

• • 在线字体定制网站：www.iconfont.cn/webfont
  • 简写方式

@font-face {
  font-family:"情书字体";
  src: url('./方正手迹.ttf');
}

• • 高兼容性写法

@font-face {
  font-family: "atguigu";
  font-display: swap;
  src: url(' webfont.eot');/*IE9 */
  src: url(' webfont.eot?#iefix') format ('embedded-opentype'),/* IE6-IE8 */
       url('webfont.woff2') format("woff2 '),
       url(' webfont.woff') format("woff'),				/* chrome、 firefox */
       url('webfont.ttf') format ("truetype'),		/* chrome、firefox、opera、Safari，Android*/
		   url('webfont.svg#webfont') format('svg'); 	/* i0S 4.1-*/

}

• 定制字体

• • 中文的字体文件很大，使用完整的字体文件不现实，通常针对某几个文字进行单独定制。
  • 可使用阿里web字体定制工具: iconfont-webfont平台

• 字体图标

• • 相比图片更加清晰。
  • 灵活性高，更方便改变大小、颜色、风格等。兼容性好，IE也能支持。
  • 字体图标的具体使用方式，每个平台不尽相同，最好参考平台使用指南，视频中我们是以使用最多的阿里图标库作为演示。
  • 阿里图标官网地址: iconfont-阿里巴巴矢量图标库

2.文本属性

• color：文本颜色

• • 颜色名
  • rgb | rgba

• • • red、green、blue,a表示透明度
    • 若三种颜色值相同，呈现的是灰色，值越大，灰色越浅。
    • rgb(0,0,0)是黑色， rgb(255,255,255)是白色。
    • 对于rbga来说，前三位的rgb形式要保持一致，要么都是0~255的数字，要么都是百分比。

• • HEX | HEXA

• • • HEX 的原理同与rgb 一样，依然是通过:红、绿、蓝色进行组合格式为:#rrggbb
    • 每一位数字的取值范围是:0 ~ f

• • HSL | HSLA

• • • hsl(色相角度,饱和度,亮度)

• • • • 色相:取值范围是0~360度
      • 饱和度:取值范围是0%~100%。(向色相中对应颜色中添加灰色，0%全灰，100%没有灰)
      • 亮度:取值范围是0%~100%。( 0%是黑色，100%是白色)

• word-spacing：文本间距

• • 字母间距: letter-spacing
  • 单词间距: word-spacing (通过空格识别词)

• text-decoration：文本修饰

• • 位置

• • • none :无装饰线（常用)
    • underline :下划线（常用)
    • overline :上划线
    • line-through :删除线

• • 线体

• • • dotted:虚线
    • wavy：波浪线

• • 颜色

• text-shadow：文本阴影

• • h-shadow：必需写，水平阴影的位置。允许负值。
  • v-shadow：必需写，垂直阴影的位置。允许负值。
  • blur：可选，模糊的距离。
  • color：可选，阴影的颜色

• white-space：文本换行

• • normal：文本超出边界自动换行，文本中的换行被浏览器识别为一个空格。(默认值)
  • pre：原样输出，与pre标签的效果相同。
  • pre-wrap：在pre效果的基础上，超出元素边界自动换行。
  • pre-line：在pre效果的基础上，超出元素边界自动换行，且只识别文本中的换行，空格会忽略。
  • nowrap：强制不换行

• text-overflow：设置文本溢出的显示模式要使得 text-overflow 属性生效，块容器必须显式定义 overflow为非 visible 值,white-space 为nowrap值。

• • clip：当内联内容溢出时，将溢出部分裁切掉。(默认值)
  • ellipsis：当内联内容溢出块容器时，将溢出部分替换为...。

• text-decoration：文本修饰，复合属性

• • text-decoration-line：设置文本装饰线的位置

• • • none :指定文字无装饰(默认值)
    • underline :指定文字的装饰是下划线-
    • overline:指定文字的装饰是上划线-
    • line-through:指定文字的装饰是贯穿线

• • text-decoration-style文本装饰线条的形状

• • • solid:实线(默认)
    • double:双线
    • dotted :点状线条-
    • dashed :虚线-
    • wavy:波浪线

• • text-decoration-color文本装饰线条的颜色

• 文本描边(仅webkit内核浏览器支持)

• • -webkit-text-stroke-width:设置文字描边的宽度，写长度值。
  • -webkit-text-stroke-color︰设置文字描边的颜色，写颜色值。
  • -webkit-text-stroke :复合属性，设置文字描边宽度和颜色。

• text-indent：首行缩进

• • 属性值: css中的长度单位，例如: px

• text-align：文本对齐(水平)

• • left :左对齐（默认值)
  • right :右对齐
  • center :居中对齐

• 文本对齐(垂直)

• • 顶部:无需任何属性，在垂直方向上，默认就是顶部对齐。
  • 居中:对于单行文字，让height = line-height即可。多行文字用定位
  • 底部:对于单行文字，目前一个临时的方式:让line-height = ( height x 2 ) - font-size - ×。备注:×是根据字体族，动态决定的一个值。

• vertical-align：垂直对齐

• • 用于指定同一行元素之间，或表格单元格内文字的垂直对齐方式。vertical-align不能控制块元素。
  • 属性值:

• • • baseline(默认值)︰使元素的基线与父元素的基线对齐。
    • top:使元素的顶部与其所在行的顶部对齐。
    • middle :使元素的中部与父元素的基线加上父元素字母×的一半对齐。
    • bottom:使元素的底部与其所在行的底部对齐。

• line-height：行高

• • 可选值:

• • • normal :默认值。
    • 像素
    • 数字:参考自身font-size的倍数(推荐)。
    • 百分比:参考自身font-size的百分比。

• • 应用场景:

• • • 对于多行文字:控制行与行之间的距离。
    • 对于单行文字:让height等于line-height，可以实现文字垂直居中(不是绝对的垂直居中)

• • 注意事项：

• • • line-height过小文字产生重叠，且最小值是0，不能为负数。
    • line-height是可以继承的，且为了能更好的呈现文字，最好写数值。
    • line-height和height

• • • • 设置了height，那么高度就是height的值。
      • 不设置height的时候，会根据(line-height*行数)计算高度。

3.列表相关的属性

• list-style-type：设置列表符号

• • none :不显示前面的标识(很常用!)
  • square :实心方块
  • disc:圆形
  • decimal:数字
  • lower-roman :小写罗马字
  • upper- roman :大写罗马字
  • lower-alpha : 小写字母
  • upper-alpha :大写字母

• list-style-position：设置列表符号位置

• • inside :在li的里面
  • outside :在li的外边

• list-style-image：自定义列表符号

• • ur1(图片地址)

• list-style：复合属性

4.边框相关属性

• border-width：边框宽度
• border-color：边框颜色
• border-style：边框风格

• • none默认值
  • solid实线
  • dashed虚线
  • dotted点线
  • double双实线

• border-width：边框复合属性

table {
    border: 1px green solid;
}

• border-radius：边框圆角，一个值表示正圆半径，二个值代表椭圆x半径、y半径

• • border-top-left-radius：左上圆角
  • border-top-right-radius：右上圆角
  • border-bottom-left-radius：左下圆角
  • border-bottom-right-radius：右下圆角

• outline：边框外轮廓

• • outline-width :外轮廓的宽度。
  • outline-color :外轮廓的颜色。
  • outline-style :外轮廓的风格。

• • • none:无轮廓
    • dotted :点状轮廓
    • dashed :虚线轮廓
    • solid:实线轮廓
    • double :双线轮廓

• • outline-offset设置外轮廓与边框的距离，正负值都可以设置。

• • • 注意: outline-offset不是outline的子属性，是一个独立的属

5.表格独有属性

• table-layout：设置列宽

• • auto:自动，列宽根据内容计算（默认值)。
  • fixed :固定列宽，平均分。

• border-spacing：单元格间距

• • 生效的前提：单元格边框不能合并

• border-collapse：合并单元格边框

• • collapse :合并
  • separate :不合并

• empty-cells：隐藏没有内容的单元格

• • show :显示，默认
  • hide:隐藏
  • 生效前提:单元格不能合并。

• caption-side：设置表格标题位置

• • top : 上面(默认值)
  • bottom :在表格下面

6.背景相关属性

• background-color：设置背景颜色

• • 默认背景颜色是transparent(透明色)

• background-image：设置背景图片

• • url(图片的地址)

• background-repeal：设置不饿经重复方式

• • repeat :重复，铺满整个元素，默认值。
  • repeat-x︰只在水平方向重复。
  • repeat-y :只在垂直方向重复。
  • no-repeat :不重复。

• background-position：设置背景图位置

• • 通过关键字设置位置：(默认center)

• • • 水平: left . center . right
    • 垂直: top . center . bottom

• • 通过长度指定位置

• background：复合属性

• background-origin：设置背景图的原点

• • padding-box：从 padding 区域开始显示背景图像。――默认值
  • border-box：从border 区域开始显示背景图像。
  • content-box：从content 区域开始显示背景图像。

• background-clip：设置背景图的向外裁剪的区域

• • border-box：从border区域开始向外裁剪背景(默认值)
  • padding-box ：从padding 区域开始向外裁剪背景。
  • content-box：从content 区域开始向外裁剪背景。
  • text：背景图只呈现在文字上。backgroun-clip需要加上-webkit-前缀。

• background-size：设置背景图的尺寸

• • 长度值指定背景图片大小，不允许负值
  • 百分比指定背景图片大小，不允许负值
  • auto：背景图片的真实大小(默认值)
  • contain：将背景图片等比缩放，使背景图片的宽或高，与容器的宽或高相等，再将完整背景图片包含在容器内，但要注意:可能会造成容器里部分区域没有背景图片。
  • cover：将背景图片等比缩放，直到完全覆盖容器，图片会尽可能全的显示在元素上，但要注意:背景图片有可能显示不完整。—―相对比较好的选择

• 多背景图

/*添加多个背景图*/
background: ur1(../images/bg-lt.png) no-repeat left top,
ur1(../ images/bg-rt.png) no-repeat right top,
url(../images/bg-lb.png) no-repeat left bottom,
ur1(../images/bg-rb.png) no-repeat right bottom;

• 线性渐变

• • 多个颜色之间的渐变(默认从上到下渐变)

background-image: linear-gradient(red,yellow,green);

• • 使用关键词设置线性渐变的方向

background-image: linear-gradient(to top,red,yellow,green);

background-image: linear-gradient(to right top,red,yellow,green);

• • 使用角度修改渐变的方向

background-image: linear-gradient(30deg,red,yellow,green);

• • 调整开始渐变的位置

  background-image: linear-gradient(red 50px,yellow 100px,green 150px);

• 径向渐变

• • 多个颜色之间的渐变，默认从圆心四散(不一定是正圆，看容器本身的宽高比)

background-image: radial-gradient(red,yellow,green);

• • 使用关键词调整渐变圆的圆心位置

background-image: radial-gradient(at top,red,yellow,green);

background-image: radial-gradient(at right top,red,yellow,green);

• • 使用像素值调整渐变圆的圆心位置

background-image: radial-gradient(at 50px 100px,red,yellow,green);

• • 调整渐变形状为正圆

background-image: radial-gradient(circle,red,yellow,green);

• • 调整圆的半径

background-image: radial-gradient(100px,red,yellow,green);
background-image: radial-gradient(50px,100px,red,yellow,green);

• • 调整开始渐变的位置

background-image: radial-gradient(red 50px,yellow 100px,green 150px);

• 重复渐变

• • 重复渐变发生在线性渐变(repeating-linear-gradient)和径向渐变(repeating-radial-gradient)的基础之上，在没有发生渐变的区域内重新渐变。

7.鼠标相关属性

• cursor：设置鼠标光标的样式

• • pointer :小手
  • move :移动图标
  • text :文字选择器
  • crosshair : 十字架
  • wait:等待
  • help:帮助
  • url(),pointer：自定义鼠标