HTML 样式- CSS

HTML 样式 - CSS

CSS是什么？

CSS（层叠样式表）是用于描述HTML和XML等文档的外观和格式的一种样式表语言。CSS为Web设计者提供了一种“样式”语言，使他们可以为Web页面中的元素指定各种样式，如颜色、字体、间距、边框等等，这些样式可以直接写入HTML标签里，或写在一个单独的css文件中。

HTML中的样式

在HTML中，你可以通过以下方式设置样式：

  • HTML标签的“style”属性中设置样式，例如：
<h1 style="color: red;">标题</h1>
  • 在HTML标签中使 用“class”或“id”属性引用CSS文件中定义的样式，例如：
<h1 class="highlight">标题</h1>

这里的“highlight”是一个在CSS文件中定义的样式类。

CSS文件的基本结构

一个基本的CSS文件由“选择器”和“声明块”组成，例如：

h1 {
  color: red;
}
  • 选择器指定要应用样式的HTML元素，例如" h1"
  • 声明块包含一系列属性-值的对，例如“color: red; ”

CSS中常用的属性

以下是在CSS中常用的属性：

字体属性

  • font-family：设置字体（例如：sans-serif、Arial、Times New Roman等等）
  • font-size：设置字体大小（例如：12px、16px等等）
  • font-weight：设置字体粗细（例如：bold、normal等等）

文本属性

  • color：设置字体颜色（例如：red、black等等）
  • text-align：设置文本对齐方式（例如：left、center、right等等）
  • text-decoration：设置文本修饰（例如：underline、line-through等等）

布局属性

  • margin：设置元素的外边距（例如：margin: 10px;）
  • padding：设置元素的内边距（例如： padding: 10px;）

边框属性

  • border：设置元素的边框（例如： border: 1px solid black;）

背景属性

  • background-color：设置元素的背景颜色（例如： background-color: gray;）
  • background-image：设置元素的背景图片（例如： background-image: url(“image.jpg”);）

CSS的继承和优先级

CSS的继承是指当子元素没有设置某个属性时，将继承其父元素的属性。例如：

<body style="color: red;">
  <div>
    <p>文字颜色这里应该是 red</p>
  </div>
</body>

这里，段落元素没有显式地设置文字颜色，但是它会继承body元素的颜色。

CSS的优先级是指当存在多个样式时，哪个样式会被应用。以下是CSS优先级的规则：

  • 选择器越具体，优先级越高。例如：ID选择器比标签选择器优先级更高。
  • 相同选择器，后定义的样式优先级更高。例如：在不同CSS块中设置相同的样式。
  • ! important属性优先级最高，不建议滥用。

总结

CSS是一种样式表语言，可以用于描述HTML和XML等文档的外观和格式。在HTML中，可以通过设置“style”或“class”属性来应用CSS。CSS文件包含一系列的选择器和声明块，其中选择器用于指定应用样式的HTML元素，声明块包含一系列属性-值的对，用于设置元素的样式。常用的CSS属性包含字体、文本、布局、边框和背景等。CSS同时支持继承和优先级，它们在样式覆盖的过程中起着重要的作用。

HTML 标题 HTML 框架