CSS 基础知识

最新推荐文章于 2024-09-13 23:28:46 发布

陆仟

最新推荐文章于 2024-09-13 23:28:46 发布

阅读量1.7k

点赞数 33

分类专栏： Web前端开发文章标签： css 前端

本文链接：https://blog.csdn.net/2302_77228054/article/details/142031034

版权

Web前端开发专栏收录该内容

4 篇文章 0 订阅

订阅专栏

概述

在Web前端开发中，CSS（Cascading Style Sheets）是用于描述网页的视觉呈现和布局的技术。与HTML主要负责定义网页的结构和内容不同，CSS则专注于网页的外观设计。它允许开发者控制字体、颜色、间距、对齐方式、布局等各种视觉效果。

具体来说，CSS的作用包括：

1. 样式定义	设置元素的颜色、字体、背景、边框等样式。
2. 布局管理	控制页面的布局结构，例如使用 Flexbox、Grid 等技术来实现复杂的布局。
3. 响应式设计	通过媒体查询（Media Queries）调整不同设备上的样式，使网页在各种屏幕尺寸下都能良好展示。
4. 动画和过渡	创建视觉效果，例如元素的动画、渐变等。

1. CSS 引入方式

在Web开发中，CSS的引入方式主要有三种，每种方式都有其适用的场景和优缺点：

1.1 内联样式（Inline Styles）

定义：在HTML元素的style属性中直接写CSS样式。

示例：

<p style="color: red; font-size: 20px;">这是一个红色的段落。</p>

优点：适用于对单个元素应用样式，快速简单。
缺点：不利于样式的复用和维护，大量内联样式会导致HTML代码变得混乱。

1.2 内部样式表（Internal Stylesheet）

定义：在HTML文档的<head>部分使用<style>标签嵌入CSS样式。

示例：

<html>
<head>
  <style>
    p {
      color: blue;
      font-size: 18px;
    }
  </style>
</head>
<body>
  <p>这是一个蓝色的段落。</p>
</body>
</html>

优点：方便在单个HTML文件中管理样式，适用于页面独立的样式需求。
缺点：样式只能在当前HTML文档中生效，若有多个页面需要统一样式，需重复定义。

1.3 外部样式表（External Stylesheet）

定义：将CSS样式定义放在一个独立的.css文件中，并通过<link>标签在HTML文档的<head>部分引入。

示例：

<!-- 在HTML文件中 -->
<html>
<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <p>这是一个用外部样式表定义样式的段落。</p>
</body>
</html>

/* 在styles.css文件中 */
p {
  color: green;
  font-size: 16px;
}

优点：样式集中管理，易于复用和维护，适合大规模项目和多个页面使用统一样式。
缺点：需要额外的文件请求，可能会影响页面加载速度。

选择哪种方式取决于项目的需求和规模。对于小型项目或者单页应用，内部样式表和内联样式可能较为便捷。对于大型项目或者需要多个页面共享样式的情况，外部样式表通常是更好的选择。

2. CSS 选择器

CSS选择器用于选择HTML文档中的元素，以便对其应用样式。选择器有很多种类，每种选择器都有其特定的用途。以下是一些常见的CSS选择器类型：

2.1 基本选择器

元素选择器：选择所有指定的HTML元素。
```
p {
  color: blue;
}
```
类选择器：选择所有具有指定类名的元素，类名以.开头。
```
.classname {
  font-size: 18px;
}
```
ID选择器：选择具有指定ID的单个元素，ID以#开头。
```
#unique-id {
  background-color: yellow;
}
```
通配符选择器：选择所有元素。
```
* {
  margin: 0;
  padding: 0;
}
```

2.2 组合选择器

后代选择器：选择某个元素内部的指定子元素。
```
div p {
  color: red;
}
```
子选择器：选择直接嵌套在指定元素下的子元素。
```
ul > li {
  list-style-type: none;
}
```
相邻兄弟选择器：选择紧接在指定元素后的第一个兄弟元素。
```
h1 + p {
  margin-top: 0;
}
```
一般兄弟选择器：选择所有紧接在指定元素后的兄弟元素。
```
h1 ~ p {
  color: green;
}
```

2.3 属性选择器

基本属性选择器：选择具有指定属性的元素。
```
[type="text"] {
  border: 1px solid black;
}
```
属性值包含选择器：选择属性值中包含指定子字符串的元素。
```
[href*="example"] {
  color: orange;
}
```
属性值前缀选择器：选择属性值以指定子字符串开头的元素。
```
[href^="https"] {
  color: green;
}
```
属性值后缀选择器：选择属性值以指定子字符串结尾的元素。
```
[href$=".pdf"] {
  color: red;
}
```

2.4 伪类选择器

:hover：选择鼠标悬停在元素上的状态。
```
a:hover {
  color: red;
}
```
:focus：选择获得焦点的元素。
```
input:focus {
  border-color: blue;
}
```
:nth-child()：选择某个特定的子元素（基于其在父元素中的位置）。
```
li:nth-child(2) {
  color: red;
}
```
:first-child：选择父元素中的第一个子元素。
```
p:first-child {
  font-weight: bold;
}
```
:last-child：选择父元素中的最后一个子元素。
```
p:last-child {
  color: blue;
}
```

2.5 伪元素选择器

::before：在指定元素的内容前插入内容。

p::before {
  content: "Note: ";
  font-weight: bold;
}

::after：在指定元素的内容后插入内容。
```
p::after {
  content: " (end)";
}
```

CSS 选择器优先级
`!important`	用于提升优先级。无论选择器的优先级如何，带有 `!important` 的规则总是会被应用到元素上，除非另一个同样带有 `!important` 的规则优先级更高。
内联样式	`1000`（即 `1000, 0, 0, 0`）
ID选择器	`100`（即 `0, 1, 0, 0`）
类选择器、属性选择器和伪类选择器	`10`（即 `0, 0, 1, 0`）
元素选择器和伪元素选择器	`1`（即 `0, 0, 0, 1`）
通配符选择器	`0`（即 `0, 0, 0, 0`）

3. CSS 常用属性

颜色和背景
- color: 设置文本颜色。例如，color: red;
- background-color: 设置背景颜色。例如，background-color: #f0f0f0;
- background-image: 设置背景图像。例如，background-image: url('image.jpg');
字体
- font-family: 设置字体类型。例如，font-family: Arial, sans-serif;
- font-size: 设置字体大小。例如，font-size: 14px;
- font-weight: 设置字体粗细。例如，font-weight: bold;
文本
- text-align: 设置文本对齐方式。例如，text-align: center;
- line-height: 设置行高。例如，line-height: 1.5;
- text-decoration: 设置文本装饰（如下划线）。例如，text-decoration: underline;
盒模型
- width: 设置元素宽度。例如，width: 100px;
- height: 设置元素高度。例如，height: 50px;
- padding: 设置内边距。例如，padding: 10px;
- margin: 设置外边距。例如，margin: 20px;
- border: 设置边框。例如，border: 1px solid black;
布局
- display: 设置元素的显示类型（如块级、内联）。例如，display: block;
- position: 设置元素的位置方式（如绝对定位、相对定位）。例如，position: absolute;
- float: 设置元素的浮动方式。例如，float: left;
- flex: 设置弹性布局。例如，display: flex;

4. CSS 媒体查询

CSS媒体查询是响应式设计的关键工具，允许你根据不同的设备特性（如屏幕宽度、分辨率、方向等）应用不同的样式。以下是一些常用的媒体查询及其用法：

4.1 基本语法

媒体查询的基本语法如下：

@media 媒体类型 and (条件) {
  /* CSS规则 */
}

4.2 常用媒体类型

`all`	应用于所有设备（默认值）。
`print`	应用于打印设备。
`screen`	应用于计算机屏幕、手机、平板等屏幕设备。
`speech`	应用于语音合成器。

4.3 常用条件

width 和 height：视口的宽度和高度。

@media (min-width: 600px) {
  /* 屏幕宽度至少为600px时应用的样式 */
}

@media (max-width: 599px) {
  /* 屏幕宽度至多为599px时应用的样式 */
}

orientation：设备的方向。

@media (orientation: portrait) {
  /* 设备处于竖屏模式时应用的样式 */
}

@media (orientation: landscape) {
  /* 设备处于横屏模式时应用的样式 */
}

aspect-ratio：视口的宽高比。

@media (aspect-ratio: 16/9) {
  /* 视口宽高比为16:9时应用的样式 */
}

resolution：设备的分辨率。

@media (min-resolution: 300dpi) {
  /* 分辨率至少为300dpi时应用的样式 */
}

@media (resolution: 1dppx) {
  /* 设备像素比为1dppx时应用的样式 */
}

4.4 组合条件

多个条件可以用逻辑运算符 and、not、or（写作逗号分隔的多个媒体查询）组合起来：

and：同时满足多个条件。

@media (min-width: 600px) and (max-width: 899px) {
  /* 屏幕宽度在600px到899px之间时应用的样式 */
}

not：不满足条件。

@media not (min-width: 600px) {
  /* 屏幕宽度小于600px时应用的样式 */
}

,（逗号）：满足任一条件。

@media (max-width: 599px), (orientation: portrait) {
  /* 屏幕宽度小于600px或设备处于竖屏模式时应用的样式 */
}

4.5 响应式设计示例

这是一个示例，展示了如何根据屏幕宽度应用不同的样式：

/* 默认样式 */
body {
  font-size: 16px;
  background-color: white;
}

/* 屏幕宽度在600px及以上时应用 */
@media (min-width: 600px) {
  body {
    font-size: 18px;
    background-color: lightgray;
  }
}

/* 屏幕宽度在900px及以上时应用 */
@media (min-width: 900px) {
  body {
    font-size: 20px;
    background-color: gray;
  }
}

在这个示例中，页面的字体大小和背景颜色会根据屏幕宽度的变化而调整，从而适应不同的设备和屏幕尺寸。