CSS的使用

Posted 2021-11-28 qqwhsj

在我们刚刚使用html的过程中，我们一定会遇到一些问题，诸如：调整图片，文字等标签时，同样意思但是属性名不同的问题，以及块属性调整麻烦等问题，而CSS的出现就是为了解决这些问题。（本文仅仅从功能以及理解层面解释，由于时间原因没有具体代码实现，详情请结合W3School官方学习）

一、CSS的作用

• CSS 指层叠样式表 (Cascading Style Sheets)
• 样式定义如何显示 HTML 元素
• 样式通常存储在样式表中
• 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
• 外部样式表可以极大提高工作效率
• 外部样式表通常存储在 CSS 文件中
• 多个样式定义可层叠   

      这是来源于W3School的说法，个人理解来说CSS的作用在于几点：1.通过各种选择器实现样式的复用  2.统一规范整个html的常用属性设置，避免不同标签属性名不同的窘境。 3.通过CSS文件以及link的使用，将样式与html代码分离开来，既保证了CSS文件的复用，降低了样式与html代码的耦合，又提高了代码的逻辑性以及美观感。

二、CSS的选择器

     1.派生选择器（直接以标签名作为样式名）--即直接对于html的标签进行样式定义，值的注意的是这样的话，会对整个html文件的所有该标签进行样式修改，所以在大型的网站编写中，不建议使用，即使使用也是放在后代选择器中结合使用。

     2.id选择器（#样式名）--在html中id具备唯一性，可以视为身份证一样的唯一标识，所以id选择器也是作为唯一选择器使用。但是，虽然id的意义在于唯一性，html并没有这样设置，也就是锁id选择器依旧可以让多个标签使用，不过不推荐这样使用，因为会失去id选择器的意义。

     3.类选择器（.样式名）--在html中使用class表示的标签均使用该选择器，作为样式复用的重要一环，可以将一些很通用的样式放于class中并结合id使用。

     4.属性选择器（[属性名=“属性值”]）--可配合派生选择器来使用，设置所有具备这个属性值的标签的样式。

     5.后代选择器（样式名1 样式名2）--对于样式1中的样式2的样式作出设置

     6.相邻兄弟选择器（样式名1+样式名2）--如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器

三、样式的一些细节

     1.无论什么样式都可以对所有样式属性进行调整，但不一定会有效，比如非块元素调整background等块元素属性是不会生效的，不过错误的属性也不会影响后面属性的有效性。

     2.每条属性相互独立，但是具有顺序性，重复的属性后者会重置前者，且在有顺序性的情况下，一些特殊的属性会相互影响，如浮动float与清除浮动的clear会因为顺序原因倒是代码异常，如border等总属性会直接覆盖掉border-bottom等分属性，在编写时需要注意。

     3.在大型项目中，由于需要的样式太多，所以应该注意命名的规范以及样式的复用，避免出现命名困难的现象。

  

四、常用的样式

    1.背景：background-image，background-color：设置块属性的背景信息

    2.文本：text-aligh：设置块属性内部的位置（居中左右等处理） text-indent：设置段落的首行空字符（em） word-spacing：设置字之间的间距 line-heigh：设置行距（可用于header部分左右居中）text-decoration：设置文本修饰（也可用于消除文本修饰）color：文本的颜色

    3.字体：font：字体相关的总属性  font-family：设置字体系列 font-style：设置字体风格 font-weight：设置字体粗细 font-size：设置字体的尺寸

    4.列表：list-style：把所有用于列表的属性做标记  list-style-image：将图片设置为列表项标志 list-style-type：对列表中的属性的类型做设置

  5.表格：

border-collapse