CSS基础特性

**CSS 基础特性**

CSS (层叠样式表) 是一种用来控制网页外观的编程语言。它允许你定义网页元素的布局、颜色、大小等方面的样式。CSS 的基础特性是理解 CSS 样式的核心部分。

###1.选择器选择器是 CSS 中最基本也是最重要的一部分，它决定了哪些 HTML 元素会被应用 CSS 样式。常见的选择器有：

* **元素选择器**：通过元素名称来选择元素，例如 `h1`、`p` 等。
* **类选择器**：通过类名来选择元素，例如 `.header`、`.footer` 等。
* **ID选择器**：通过 ID 名称来选择唯一的元素，例如 `#logo`、`#nav` 等。

css/* 元素选择器 */
h1 {
 color: red;
}

/* 类选择器 */
.header {
 background-color: blue;
}

/* ID选择器 */
#logo {
 font-size:24px;
}

###2.颜色CSS 中的颜色可以使用各种方式来定义，例如：

* **颜色名称**：使用颜色的名称，如 `red`、`blue` 等。
* **RGB 值**：使用 RGB 的值来定义颜色，如 `rgb(255,0,0)` 等。
* **HEX 值**：使用 HEX 的值来定义颜色，如 `#FF0000` 等。

css/* 颜色名称 */
h1 {
 color: red;
}

/* RGB 值 */
.header {
 background-color: rgb(255,0,0);
}

/* HEX 值 */
#logo {
 font-size:24px;
 color: #FF0000;
}

###3.字体CSS 中的字体可以使用各种方式来定义，例如：

* **字体名称**：使用字体的名称，如 `Arial`、`Times New Roman` 等。
* **字体家族**：使用字体家族的名称，如 `serif`、`sans-serif` 等。

css/* 字体名称 */
h1 {
 font-family: Arial;
}

/* 字体家族 */
.header {
 font-family: serif;
}

###4.大小CSS 中的大小可以使用各种方式来定义，例如：

* **像素值**：使用像素值来定义大小，如 `16px` 等。
* **百分比值**：使用百分比值来定义大小，如 `50%` 等。

css/* 像素值 */
h1 {
 font-size:16px;
}

/* 百分比值 */
.header {
 width:50%;
}

###5.边距CSS 中的边距可以使用各种方式来定义，例如：

* **像素值**：使用像素值来定义边距，如 `10px` 等。
* **百分比值**：使用百分比值来定义边距，如 `20%` 等。

css/* 像素值 */
h1 {
 margin:10px;
}

/* 百分比值 */
.header {
 width:50%;
 margin:20%;
}

###6.背景CSS 中的背景可以使用各种方式来定义，例如：

* **颜色**：使用颜色来定义背景，如 `red` 等。
* **图像**：使用图像来定义背景，如 `url('image.jpg')` 等。

css/* 颜色 */
h1 {
 background-color: red;
}

/* 图像 */
.header {
 background-image: url('image.jpg');
}

###7.盒模型CSS 中的盒模型是理解 CSS 布局的核心部分。盒模型分为四个部分：

* **内容区域**：这是盒子的内容区域。
* **内边距**：这是盒子与内容区域之间的空白区域。
* **边框**：这是盒子与外部环境之间的界限。
* **外边距**：这是盒子与外部环境之间的空白区域。

css/* 内容区域 */
h1 {
 width:100px;
 height:50px;
}

/* 内边距 */
.header {
 padding:10px;
}

/* 边框 */
#logo {
 border:1px solid red;
}

/* 外边距 */
.footer {
 margin:20px;
}

###8.定位CSS 中的定位可以使用各种方式来定义，例如：

* **静态定位**：元素的位置由其在 HTML 文档中的位置决定。
* **相对定位**：元素的位置相对于其正常位置进行调整。
* **绝对定位**：元素的位置相对于其最近的定位祖先元素进行调整。

css/* 静态定位 */
h1 {
 position: static;
}

/* 相对定位 */
.header {
 position: relative;
 top:10px;
}

/* 绝对定位 */
#logo {
 position: absolute;
 left:20px;
}

###9.浮动CSS 中的浮动可以使用各种方式来定义，例如：

* **左浮动**：元素向左浮动。
* **右浮动**：元素向右浮动。

css/* 左浮动 */
h1 {
 float: left;
}

/* 右浮动 */
.header {
 float: right;
}

###10.清除浮动CSS 中的清除浮动可以使用各种方式来定义，例如：

* **clear:both**：清除左侧和右侧浮动。
* **clear:left**：清除左侧浮动。
* **clear:right**：清除右侧浮动。

css/* clear:both */
h1 {
 clear: both;
}

/* clear:left */
.header {
 clear: left;
}

/* clear:right */
#logo {
 clear: right;
}

以上就是 CSS 基础特性的介绍。这些特性是理解 CSS 样式的核心部分，希望对你有所帮助！