2021-08-21

第六天学习内容

CSS核心属性

一、文本字体所属性

1.文本大小：{font-size:12px/14px/16px;}

   属性值：法定属性值和常规属性值；

     常规属性值设置的时候都会添加单位(web中常用像素px)；

     最小为12px；默认为16px，建议设置字体的大小为偶数。

   -em      相对于父级进行计算、首行缩进

   -pt       磅，常用于硬件设备

   -rem    相对于html根元素进行计算【重点】

   -%        宽高自适应

   -deg     2d   3d角度值

2.文本字体类型：font-family

   属性值：

   -默认字体类型为微软雅黑

   -中文：建议添加引号 

   -加粗属性font-weight

   法顶属性值 100~900 100~500正常字体 600~900加粗字体

   -bold 加粗bolder更粗

   -重要 normal 正常的 用来清除{加粗标签}的默认样式 （使用标签的效果但不需要默认样式）  

   -倾斜属性

   （/）font-style

   -italic倾斜

   -oblique更倾斜的

   -normal正常字体

3.文本行高的设置

   属性：line-height

     行高=高度   文本在垂直方向居中

     行高>高度  文本往下移动

     行高<高度  文字往上移动

   注意：

     量取多行文本行高(ui设计图会标明)

文本水平居中：text-align：center

   文本对齐方式

4.文本属性的简写

   属性：font（后面接冒号）

   属性值：font-weight  font-style font-size/line-height  font-family（中间用空格分开）

5.文本颜色

   属性：color   不能写成font-color

   属性值：

     法定属性值：英文单字 red、pink等

     十六进制代码：需要#

        -常见的十六进制#ffffff #000000 #cccccc

        -六位字符一样的时候可以省略为3位

     【重点】

     -rgb(red,green,blue)范围0-2551

     -rgba(，，，alpha) 透明度0-1

6.透明度

7.文本修饰

   属性：text-decoration

   属性值：

     -underline 下划线

     -overline上横线

     -line-through删除线

   重点 -none清除下划线

8.首行缩进属性：text-indent

   属性值：数值+单位   可以接负数

   字间距属性：letter-spacing

   词间距属性：word-spacing

列表属性

1.定义列表的符号样式

   属性：list-style-type

   属性值：disc(实心圆)-默认值   circle(空心圆)  square(实心方块)  none(清除列表的默认样式)

2.使用图片作为列表符号

   属性：list-style-image

   属性值：url(

)

3.定义列表符号位置

   属性：list-style-position

   属性值：outside

4.清除列表的默认样式

   ul，ol，li{none}

背景属性

1.背景颜色

   属性：background-color    可以简写成background即可

   属性值：

     -英文单词

     -十六进制

     -rgb/rgba

2.背景图片

   属性：background-image

   属性值：url(相对路径)

     -当容器大于背景图片的时候，图片会进行平铺

     -当容器小于背景图片的时候，图片只显示一部分

background-image和image的区别：

   前者是css属于，需要容器大小去支持，img是html结构

3.背景平铺

   属性：background-repeat

   属性值：

     -no-repeat不平铺只显示一张背景图

     -repeat平铺

     -repeat x/y 沿着x/y轴平铺

4.背景图片定位

   属性：background-position

   属性值：

     -x轴的方向left right center

     -y轴的方向 top bottom center

5.背景图的固定

   属性：background-attachment

   属性值：

     -scroll 滚动

     -fixed  固定