CSS基础学习总结

**CSS 基础学习总结**

CSS（Cascading Style Sheets）是网页设计中一个非常重要的方面。它负责控制网页元素的样式、布局和行为。在本文中，我们将全面介绍 CSS 的基础知识，包括选择器、盒模型、颜色、背景、字体、尺寸、边框、阴影等。

###1.选择器CSS 中最基本的概念是选择器，它决定了哪些元素会被样式应用。常见的选择器有：

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

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

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

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

###2. 盒模型盒模型是 CSS 中一个非常重要的概念，它决定了元素的宽高和边距。盒模型由以下几个部分组成：

* **内容区域**：元素的内容所占据的空间。
* **内边距**：元素与内容区域之间的空白区域。
* **边框**：元素的外部边界。
* **外边距**：元素与其他元素之间的空白区域。

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

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

/* 边框 */
.border {
 border:1px solid black;
}

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

###3. 颜色CSS 中颜色的表示方式有以下几种：

* **十六进制颜色**：使用 `#` 符号来表示颜色，例如 `#FF0000`。
* **RGB 颜色**：使用 RGB 值来表示颜色，例如 `rgb(255,0,0)`。
* **HEX 颜色**：使用 HEX 值来表示颜色，例如 `#F00`。

css/* 十六进制颜色 */
.red {
 color: #FF0000;
}

/* RGB 颜色 */
.blue {
 background-color: rgb(0,0,255);
}

/* HEX 颜色 */
.green {
 border-color: #0F0;
}

###4. 背景CSS 中背景的设置有以下几种方式：

* **背景颜色**：使用 `background-color` 属性来设置背景颜色。
* **背景图像**：使用 `background-image` 属性来设置背景图像。

css/* 背景颜色 */
.background-color {
 background-color: #F0F;
}

/* 背景图像 */
.background-image {
 background-image: url(' />}

###5. 字体CSS 中字体的设置有以下几种方式：

* **字体名称**：使用 `font-family` 属性来设置字体名称。
* **字体大小**：使用 `font-size` 属性来设置字体大小。

css/* 字体名称 */
.font-name {
 font-family: 'Arial', sans-serif;
}

/* 字体大小 */
.font-size {
 font-size:24px;
}

###6. 尺寸CSS 中尺寸的设置有以下几种方式：

* **宽度**：使用 `width` 属性来设置元素的宽度。
* **高度**：使用 `height` 属性来设置元素的高度。

css/* 宽度 */
.width {
 width:300px;
}

/* 高度 */
.height {
 height:200px;
}

###7. 边框CSS 中边框的设置有以下几种方式：

* **边框颜色**：使用 `border-color` 属性来设置边框颜色。
* **边框宽度**：使用 `border-width` 属性来设置边框宽度。

css/* 边框颜色 */
.border-color {
 border-color: #0F0;
}

/* 边框宽度 */
.border-width {
 border-width:5px;
}

###8. 阴影CSS 中阴影的设置有以下几种方式：

* **盒阴影**：使用 `box-shadow` 属性来设置盒阴影。
* **文本阴影**：使用 `text-shadow` 属性来设置文本阴影。

css/* 盒阴影 */
.box-shadow {
 box-shadow:0px0px10px rgba(0,0,0,0.5);
}

/* 文本阴影 */
.text-shadow {
 text-shadow:2px2px4px rgba(0,0,0,0.5);
}

以上就是 CSS 基础知识的总结。通过学习这些基本概念和属性，你可以开始构建自己的网页设计，并掌握 CSS 的使用技巧。