CSS基础---新手入门级详解

这篇文章距离上次修改已过189天，其中的内容可能已经有所变动。

CSS (Cascading Style Sheets) 是用来定义网页样式的计算机语言，可以使网页元素如文本，图片，布局等更加美观。

CSS的引入方式：

内联样式：通过标签的style属性为其添加样式。




<p style="color: red;">这是一个段落。</p>

内部样式表：在HTML文档的<head>标签中添加<style>标签，然后在其中添加CSS规则。




<head>
  <style>
    p { color: blue; }
  </style>
</head>
<body>
  <p>这是一个段落。</p>
</body>

外部样式表：创建一个CSS文件，然后在HTML文档的<head>标签中添加<link>标签，引用该CSS文件。




<!-- 创建一个style.css文件，内容如下 -->
p { color: green; }
 
<!-- 在HTML文件中引用 -->
<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <p>这是一个段落。</p>
</body>

CSS的基本语法：
```
selector {
  property: value;
  property: value;
  ...
}
```
- selector：选择器，用于选择需要添加样式的HTML元素。
- property：属性，表示要改变的样式属性。
- value：值，表示属性的值。
CSS的选择器：
- 标签选择器：直接使用HTML标签作为选择器。
```
p { color: red; }
```
- 类选择器：在HTML元素上添加class属性，然后在CSS中使用.前缀。
```
<p class="para">这是一个段落。</p>
```
```
.para { color: orange; }
```
- ID选择器：在HTML元素上添加id属性，然后在CSS中使用#前缀。
```
<p id="paraId">这是一个段落。</p>
```
```
#paraId { color: purple; }
```
- 组选择器：使用,分隔多个选择器，可以同时选择多个元素。
```
h1, h2, h3 { color: grey; }
```
- 嵌套选择器：可以在选择器之间添加空格，表示后代选择器，即选择特定父元素的子元素。
```
div p { color: pink; }
```
CSS的属性：
- 文本属性：color, text-align, text-decoration, ...
- 背景属性：background-color, background-image, ...
- 列表属性：list-style, ...
- 布局属性：width, height, margin, padding, float, position, ...
- 边框属性：border, ...
- 字体属性：font-size, font-family, font-weight, ...
- 透明度属性：opacity, ...
CSS的优先级：
- 内联样式 > 内部样式表和外部样式表。
- 具体性选择器：ID选择器 > 类选择器 > 标签选择器。
- 当选择器相同时，最后声明的样式会被应用。
- 可以使用!important

CSS基础---新手入门级详解

评论已关闭

推荐阅读