CSS 教程入门-JavaScript中文网-JavaScript教程资源分享门户

CSS（Cascading Style Sheets）是一种用来为网页添加样式和布局的语言。通过使用CSS，开发人员可以控制网页的外观和风格，使其更具吸引力和易于阅读。本章将介绍CSS的基础知识和常用属性。

什么是 CSS？

CSS是一种样式表语言，用于描述网页的外观和布局。通过将CSS应用于HTML文档，开发人员可以控制文本的颜色、字体、大小，以及页面的布局、间距和背景等。CSS的作用是将内容和样式分离，使网页更易于维护和修改。

如何使用 CSS？

CSS可以通过三种方式应用到HTML文档中：

内联样式：直接在HTML元素中使用style属性来定义样式。

示例代码：

<p style="color: red; font-size: 16px;">这是一段红色的文字</p>

内部样式表：在HTML文档的<head>标签内使用<style>标签定义样式。</li> </ol> 示例代码： <pre class="prettyprint login html"><head> <style> p { color: blue; font-size: 14px; } </style> </head></pre><ol start="3"> <li>外部样式表：将CSS代码保存为独立的.css文件，并在HTML文档中通过<link>标签引用。</li> </ol> 示例代码： <pre class="prettyprint login html"><head> <link rel="stylesheet" href="styles.css"> </head></pre><h2>CSS 选择器</h2> CSS选择器用于选择要应用样式的HTML元素。常见的选择器包括： <ol> <li>元素选择器：选择指定类型的元素。</li> </ol> 示例代码： <pre class="prettyprint login css">p { color: red; }</pre><ol start="2"> <li>类选择器：选择具有相同类名的元素。</li> </ol> 示例代码： <pre class="prettyprint login css">.text { font-size: 16px; }</pre><ol start="3"> <li>ID选择器：选择具有唯一ID的元素。</li> </ol> 示例代码： <pre class="prettyprint login css">#header { background-color: gray; }</pre><ol start="4"> <li>后代选择器：选择元素的后代元素。</li> </ol> 示例代码： <pre class="prettyprint login css">div p { margin-bottom: 10px; }</pre><ol start="5"> <li>伪类选择器：根据元素的状态选择元素。</li> </ol> 示例代码： <pre class="prettyprint login css">a:hover { text-decoration: underline; }</pre><h2>CSS 属性</h2> CSS属性用于控制元素的样式和布局。常用的CSS属性包括： <ol> <li>color：控制文本颜色。 </li> <li>font-size：控制字体大小。 </li> <li>background-color：控制背景颜色。 </li> <li>margin：控制元素的外边距。 </li> <li>padding：控制元素的内边距。 </li> <li>border：控制元素的边框样式。 </li> <li>display：控制元素的显示方式。 </li> <li>position：控制元素的定位方式。 </li> </ol> 以上是CSS的基础知识和常用属性，希望通过本章的介绍能够帮助您更好地理解和应用CSS。