七夏 发表于 2024-10-17 18:43:54

保姆级css之入门篇 适合新手

CSS(Cascading Style Sheets)即层叠样式表,用于控制网页的外观和布局。以下是 CSS 的基本使用方法:

一、引入 CSS 的方式

1. 内联样式:直接在 HTML 元素的 style 属性中定义样式。

```
<p style="color: blue; font-size: 16px;">这是一个段落。</p>
```

内联样式的优先级最高,但会使 HTML 代码变得混乱,不便于维护。

2. 内部样式表:在 HTML 文件的 `<head>` 部分使用 `<style>` 标签定义样式。

```
<!DOCTYPE html>
   <html>
   <head>
   <style>
       p {
         color: green;
         font-size: 18px;
       }
   </style>
   </head>
   <body>
   <p>这是一个段落。</p>
   </body>
   </html>
```

内部样式表适用于单个页面的样式定义。

3. 外部样式表:将 CSS 代码保存为一个独立的文件,然后在 HTML 文件中通过 `<link>` 标签引入。

```
<!DOCTYPE html>
   <html>
   <head>
   <link rel="stylesheet" href="styles.css">
   </head>
   <body>
   <p>这是一个段落。</p>
   </body>
   </html>
```

```
p {
   color: red;
   font-size: 20px;
   }
```

外部样式表可以被多个 HTML 文件引用,便于维护和修改样式。

二、选择器

1. 元素选择器:通过 HTML 元素名称选择元素。

```
p {
   color: blue;
   }
```

上述代码将选择所有 `<p>` 元素,并将其文本颜色设置为蓝色。

2. 类选择器:使用 `.` 加上类名来选择具有特定类的元素。

```
<p class="my-class">这是一个段落。</p>
.my-class {
   font-size: 16px;
   }
```

```
.my-class {
   font-size: 16px;
   }
```

类选择器可以应用于多个不同的元素,提高了样式的复用性。

3. ID 选择器:使用 `#` 加上 ID 名称来选择具有特定 ID 的元素。

```
<p id="my-id">这是一个段落。</p>
#my-id {
   background-color: yellow;
   }
```

```
#my-id {
   background-color: yellow;
   }
```

ID 选择器在页面中应该是唯一的,具有较高的优先级。

4. 后代选择器:选择作为某一元素后代的元素。中间用空格隔开

```
<div>
   <p>这是一个段落。</p>
   </div>
```

```
div p {
   color: green;
   }
```

上述代码将选择 `<div>` 元素内部的所有 `<p>` 元素。

三、常见的 CSS 属性

1. 字体属性:
   * `font-family`:设置字体类型。
   * `font-size`:设置字体大小。
   * `font-weight`:设置字体粗细。
   * `color`:设置文本颜色。
2. 盒模型属性:
   * `width` 和 `height`:设置元素的宽度和高度。
   * `padding`:设置内边距。
   * `margin`:设置外边距。
   * `border`:设置边框。
3. 布局属性:
   * `display`:设置元素的显示方式,如 `block`(块级元素)、`inline`(行内元素)、`inline-block`(行内块元素)等。
   * `float`:设置元素的浮动方向。left 左浮动right 右浮动
   * `position`:设置元素的定位方式,如 `static`(静态定位)、`relative`(相对定位)、`absolute`(绝对定位)、`fixed`(固定定位)等。

![图片](https://www.3bbs.cn/index-diy/img.php?url=https://mmbiz.qpic.cn/sz_mmbiz_png/0Ez9moTRbiaJYJF990GWEGnFzR5JHsqaIQmw3F616niaia2f53e47gsaHgxOJExXjUSSWpuiaJSTWaqvAlvlIdlC1g/640?wx_fmt=png&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1)

四、CSS 优先级

当多个样式规则应用于同一个元素时,CSS 会根据优先级来确定最终的样式。优先级从高到低依次为:内联样式 > ID 选择器 > 类选择器 > 元素选择器。如果优先级相同,则后定义的样式会覆盖先定义的样式。

CSS 赋予网页丰富的视觉效果,使页面从单调的文本和基本布局转变为具有吸引力的设计作品 可以选择合适的字体、颜色、大小,以及添加各种装饰元素如阴影、渐变等,提升页面的美观度。
页: [1]
查看完整版本: 保姆级css之入门篇 适合新手