📌  相关文章
📜  超文本编程语言 - CSS (1)

📅  最后修改于: 2023-12-03 15:12:15.036000             🧑  作者: Mango

超文本编程语言 - CSS

CSS（Cascading Style Sheets） 是用于控制web页面外观样式的语言。它可以为元素定义各种属性，如字体、大小、颜色、对齐等。CSS将样式与HTML文档分离，使设计和内容分离，方便修改和维护，提高了网站的可访问性和可扩展性。

样式的应用方式

样式可以应用到HTML文档中的不同地方，主要有以下方式：

  1. 行内样式：将样式定义直接写在元素的style属性中。如：
<p style="color: red;">这是一段红色的文字。</p>
  1. 内部样式表：将样式定义在HTML页面的头部，放在<style>标签内。如：
<html>
  <head>
    <style type="text/css">
      p { color: red; }
    </style>
  </head>
  <body>
    <p>这是一段红色的文字。</p>
  </body>
</html>
  1. 外部样式表：将样式定义在一个独立的CSS文件中，通过<link>标签引用。如：
<html>
  <head>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <p>这是一个外部CSS文件定义的样式。</p>
  </body>
</html>
CSS的语法结构

CSS语法由选择器（selectors）、属性（properties）、和值（values）组成。

选择器用于选择要应用样式的HTML元素。有多种选择器，包括元素选择器、类选择器、ID选择器、属性选择器、伪类选择器和伪元素选择器。

属性用于定义要控制的样式属性。例如：font-size、color、background、padding等。

值表示属性要设置的值。例如：12px、#333333、bold、center等。

CSS规则由选择器和一组属性声明组成，如：

p {
  color: red;
  font-size: 16px;
  font-weight: bold;
}

以上规则将选择所有<p>元素，设置它们的颜色、字体大小和字体粗细。

CSS的继承和层叠

CSS有两个重要的概念：继承和层叠。

继承指的是子元素会继承父元素的一些样式，如字体、颜色、行高等。例如：

body {
  color: #333333;
  font-size: 14px;
}
h1 {
  font-size: 24px;
  font-weight: bold;
}

以上样式设置了整个页面的默认字体为14px的黑色字体。但是，由于h1元素继承了body元素的样式，所以它的字体大小也变为了24px。

层叠指的是当同一元素上定义了多个样式时，如何决定使用哪个样式。例如：

h1 {
  font-size: 24px;
  color: red;
}
h1 {
  font-size: 36px;
  color: blue;
}

以上两个样式规则都定义了<h1>元素的样式，但它们设置了相同的属性。在这种情况下，将会应用后面的规则，即字体大小为36px、颜色为蓝色。

CSS的常用属性

CSS有数百种属性，下面列出一些常用的属性：

  • 字体属性：font-family、font-size、font-weight、font-style
  • 文本属性：color、text-align、text-decoration、line-height
  • 背景属性：background-color、background-image、background-position、background-repeat
  • 盒模型属性：width、height、margin、padding、border
  • 定位属性：position、top、bottom、left、right
  • 列表属性：list-style-type、list-style-image
  • 渐变属性：linear-gradient、radial-gradient
总结

CSS是一种用于控制web页面外观样式的语言，可以将样式与HTML文档分离，提高网站的可访问性和可扩展性。CSS语法由选择器、属性和值组成，支持继承和层叠，常用属性有字体属性、文本属性、背景属性、盒模型属性、定位属性和列表属性。熟练掌握CSS可以帮助开发者创建出精美的web页面。