网页开发之CSS-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_73801805/article/details/144474799

01 CSS的起源

CSS（层叠样式表，Cascading Style Sheets）

1.1 起源

俗话说，有问题才有答案

在早期Web页面的设计和布局主要依赖于HTML标签

例如使用font标签来改变字体样式，使用表格table来布局页面。

这种方法导致代码冗余，维护困难，且网页的可读性和可维护性较差。

于是乎，为了解决这种问题

W3C在1996年12月发布了CSS的首次正式推荐标准 CSS Level 1

1.2 发展

CSS Level 1：

第一个版本主要提供了基本的样式元素，如字体、颜色、边距等。

这里用来举例

属性名称	描述	示例代码
font-family	定义字体系列	font-family: Arial, sans-serif;
font-style	定义字体风格	font-style: italic
font-variant	定义字体变体	font-variant: small-caps;
font-weight	定义字体粗细	font-weight: bold;
font-size	定义字体大小	font-size: 16px;

以及其他

在这里插入图片描述

CSS Level 2：

1998年，W3C发布了CSS Level 2（也称为CSS 2），增加了更多特性，如浮动（float）、定位（positioning）和媒体查询（media queries）等。

CSS Level 2 Revision 1 (CSS 2.1)：

CSS Level 3包括多个模块，如选择器、背景和边框、颜色、字体等，每个模块都可以独立开发和完善。

CSS的持续发展：

CSS仍在不断发展中，新的特性和模块不断被提出和标准化，如Flexbox、Grid布局、自定义属性（变量）、动画和过渡效果等。
这些新特性极大地丰富了Web页面的设计和布局能力。

02 CSS的作用

如今css已经发展的相对成熟，更衍生出其他功能。

以下是一个表格，展示了CSS的作用：

功能类别	描述
美化网页	提供样式属性，如字体样式、颜色、背景图像等，改善网页外观。
布局控制	设置元素宽度、高度、边距、填充、位置等，实现复杂页面布局。
响应式设计	使用媒体查询，使网页在不同设备和屏幕尺寸上保持良好可读性和可用性。
减少工作量	集中管理样式规则，减少重复工作，提高开发效率。
维护和更新	独立的样式规则，便于网站维护和更新，无需修改HTML结构。
跨浏览器兼容性	保证在不同浏览器上样式的一致性。
提高页面加载速度	通过外部引用CSS文件，减少HTML文档大小，加快加载速度。
增强用户体验	添加动画和过渡效果，提升用户互动体验。

03 使用css的基本步骤

CSS样式：
- 可以在HTML文件内的<style>标签中定义CSS样式。
- 也可以在外部CSS文件中定义样式，然后通过<link>标签将其链接到HTML文件。
```
选择器 {
  属性: 值;
  属性: 值;
}
```
使用选择器：
- 使用选择器来指定要应用样式的HTML元素。选择器可以是元素名称、类名（.class）、ID（#id）等。
声明样式规则：
- 在选择器后面的大括号{}内，定义一系列的样式规则，例如color: blue;或font-size: 16px;。
应用样式：
- 将定义好的样式应用到HTML元素上，可以是直接在元素上使用style属性，也可以通过选择器匹配。

04 CSS选择器

1. 内联样式

直接在HTML元素中使用style属性来应用CSS样式：

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

2. 内部样式表

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

<head>
  <style>
    p {
      color: blue;
      font-size: 14px;
    }
  </style>
</head>

3. 外部样式表

创建一个单独的CSS文件（例如style.css），然后在HTML文档的<head>部分引用它：

/* style.css  必须以css为后缀名*/
p {
  color: green;
  font-size: 12px;
}

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

4. 使用CSS选择器

标签选择器：选择HTML标签，例如p、h1等。

对网页中的特定标签起作用
类选择器：使用.来选择具有特定类的元素，例如.class。

对网页中引用了.class的标签起作用可以对多个标签同时使用
ID选择器：使用#来选择具有特定ID的元素，例如#id。

对网页中引用了#id的标签起作用原则上中可以对一个标签使用

代码展示

.name1 {
    color: purple;
    text-align: center;
  }
  
 #name2 {
    color: grey;
    font-size: 16px;
  }

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <h1 class="name1">这是一个标题</h1>
  <p id="name2">这是一个段落。</p>
</body>
</html>