css常用属性

目录

一，css属性与html标签属性的区别？

二，字体属性

1，颜色color

2，字体大小font-size

3，字体粗细font-weight

4，字体样式font-style

5，字体类型font-family

三，背景属性

1，背景颜色background-color

2，背景图片background-image

3，背景填充方式background-repeat

4，背景大小background-size

5，背景位置background-position

6，背景图片是否固定background-attachment

7，复合属性background

四，文本属性

1，对齐方式text-align

2，文本装饰text-decoration

3，文本大小写text-transform

4，文本缩进indent

五，列表属性

1，list-style-type

2，list-style-image

3，list-style-position

4，复合属性list-style

六，表格属性

1，表格边框border

2，表格边框border折叠属性border-collapse

3，表格的宽度和高度

4，单元格里面文本的对齐方式

5，单元格的填充

5，表格颜色

七，其他属性

1，字符间距属性letter-spacing

2，行高属性line-height

3，溢出属性overflow

4，white-spacing属性

5，verticle-align属性

6，opacity属性

---

一，css属性与html标签属性的区别？

        在html中的各个元素都存在自己的属性，比如class和id等共有属性。css属性是指元素样式的描述，比如color，font-size，margin等。html元素属性和css属性有相同的属性，例如width和height属性既属于元素标签属性也属于css属性，当两者同时存在时，元素标签属性(内敛样式)优先级最高，会生效。

二，字体属性

        字体，无非就是：字体类型，字号大小，文字颜色。他是对标签内容的字体进行修改，如：<p>我是p标签的内容</p>。注意与文本属性的区别。文本指的是一大堆文字，字体指的是单个字。

1，颜色color

        color的值有四种形式有四种：

        1，直接red，green英文名字；

        2，使用16进制颜色，以#开头，格式为xx|xx|xx，每隔两个为一组，一共6个0-f之间的数；

        3，使用rgb三原色，实际上rgb()是一个css函数，后边括号跟三个值，分别是red，green，blue的比重；

        4，使用rgba()函数，最后的那个a是alpha，表示透明度，0完全透明。

        5，使用vscode插件手动取色。

2，字体大小font-size

        font-size=12px，单位是px。有些浏览器内核最小只能显示12px，也就是你设置了10px，他也会显示12px的大小。

3，字体粗细font-weight

4，字体样式font-style

        用于定义下划线，斜体，阴影之类的。

5，字体类型font-family

        多个字体的目的是给浏览器提供选择，如果某电脑缺少微软雅黑字体，则会去使用仿宋，以此类推，如果都没有则浏览器会找字体替代。

三，背景属性

        背景，即background，简称bg。关于背景常见的属性就是：背景图片，没有图片的话就是背景颜色，背景大小等，另外还有假如背景图片比网页小该怎么办？背景图片太小该如何布局等问题。  

1，背景颜色background-color

        在vscode中输入：bgc即可自动补全background-color，然后取色选择。

2，背景图片background-image

        使用url()函数引入图片。

3，背景填充方式background-repeat

        当背景图片比容纳背景图片的容器小的时候就必须使用填充方式。

4，背景大小background-size

        最常用的属性值是：cover

5，背景位置background-position

        这个属性解决的是：背景图片的停靠点，默认是背景图片左上角与容器左上角重合。也可以理解为图片的裁剪，即背景图片的哪个像素点与容器左上角进行重合。最常使用的值：center。

6，背景图片是否固定background-attachment

        fixed:图片故在在网页上，移动不动，你把网页滑到图片这里 ，才能看见图片。scroll：图片像幽灵一样跟着走。

7，复合属性background

        复合属性指的是：对于一个元素属性，他有细分属性。也可以把这些细分的属性合在一起写，比如，把背景大小和背景图片放在一起写，就成了复合属性。这个background属性必须按顺序写，否则不生效，即：第一个属性必须是引入图片，没有图片就没有改位置，如何填充的必要了。

        各个属性值之间用空格隔开。基本不会使用这种方法。

四，文本属性

        文本属性就是wps里word排版一样，也就是：水平对齐方式，垂直对齐方式，下划线等。

1，对齐方式text-align

2，文本装饰text-decoration

3，文本大小写text-transform

        大小写只对英文起作用。 

4，文本缩进indent

五，列表属性

        列表的css属性与其标签属性几乎重合，都是用来修改每个<li>前的符号的，但是css属性允许符号是一张图片，使用list-style-type来确定。列表的css属性对自定义列表无效。。

1，list-style-type

2，list-style-image

3，list-style-position

4，复合属性list-style

        最常用的就是none值。

六，表格属性

        表格属性大概有：边框粗细，边框颜色，单元格颜色，单元格大小。

1，表格边框border

        border属性是一个复合属性，其中边框样式，border-style必须写，solid表示实体线。

2，表格边框border折叠属性border-collapse

        因为每个单元格之间是有间隙的，为了消除这些间隙，从而像Excel里面的表格一样，可以使用这个属性。

3，表格的宽度和高度

        是表格而不是单元格的属性。

4，单元格里面文本的对齐方式

5，单元格的填充

        用于设置单元格内容与单元格边框之间的距离。这个属性和表格的宽度和高度属性会发生冲突，一般使用padding时不使用width和height。

5，表格颜色

        是表格而不是单元格的属性。

七，其他属性

1，字符间距属性letter-spacing

2，行高属性line-height

        行高line-height的应用场景：在一个容器中，只有一行文字，使用行高属性进行文本居中。方法是：让行高与容器高度一致。

3，溢出属性overflow

        这个属性用于解决容器里面的内容比容器大的情况。

4，white-spacing属性

        这个属于用于解决：当容器内容超过容器或者盒子的宽度或者高度时，使用省略号进行替代无法显示的多余的内容。下面的三个属性同样写在一起。

5，verticle-align属性

        用于解决垂直方向上的元素的对齐问题，而不是元素内容的对齐。当一段文字嵌套一张图片时，<p>xxx<img src="1.jpg">xxx</p>，该属性决定文字和图片的排版方式，类似于word中图片与文字的关系。

6，opacity属性

        这个属性用于设置整个元素的透明度。范围为0-1,1完全不透明，0完全透明。