Manon.icu

I'm here to make you a better developer by teaching you everything I know about building for the web.

Published 2022-05-02

css - 样式表

CSS(Cascading Style Sheets)是一种用于网页样式设计的语言。通过 CSS 样式表,可以控制网页中元素的颜色、大小、位置、字体、背景等外观样式,使得网页在视觉效果上更加美观和易于阅读。

下面是一些 CSS 的基本概念和语法:

  1. 选择器 选择器是用于选择网页中的元素的名称或标识符,例如标签名、类名、ID 等。选择器用于定义需要应用样式的元素。下面是一些常见的选择器:

标签选择器:使用 HTML 元素的标签名作为选择器,例如 p、h1、div 等。 类选择器:使用 .class 作为选择器,例如 .header、.content、.footer 等。 ID 选择器:使用 #id 作为选择器,例如 #logo、#nav 等。 属性选择器:使用元素的属性作为选择器,例如 [type="text"]、[href] 等。 伪类选择器:使用元素的特定状态作为选择器,例如 :hover、:active、:focus 等。

  1. 属性和值 属性是用于控制网页元素外观的特定属性,例如字体、颜色、大小、边框等。属性值用于设置属性的具体值,例如字体类型、颜色代码、像素值等。

例如,以下代码中的 color 属性设置文字颜色,font-size 属性设置文字大小:

p {
  color: red;
  font-size: 16px;
}
  1. 注释 CSS 中的注释用于在样式表中添加注释或说明,这些注释不会被浏览器解析或显示在网页中。注释使用 /_ ... _/ 的语法。
/* 这是一条注释 */
p {
  color: blue;
}
  1. 层叠和继承 CSS 中的层叠和继承是两个重要的概念。

层叠指的是当一个元素被多个选择器选中时,浏览器会按照一定的规则决定哪些样式将被应用到该元素上。这些规则包括选择器的特殊性、选择器的位置等。

继承指的是当一个元素应用样式时,它的子元素也会继承这些样式。例如,如果给 body 元素设置了字体大小,那么网页中的所有子元素都会继承这个字体大小,除非它们自己定义了字体大小。

  1. 盒模型

Comments

No Comments!