CSS基础-CSDN博客

本文链接：https://blog.csdn.net/Mozarty/article/details/129768247

CSS 发展历史

CSS 的发展可以追溯到 1996 年，当时 CSS 1.0 规范发布。自那时以来，CSS 逐渐成为 Web 开发中必备的技术之一。目前最新的 CSS 规范是 CSS3，它由多个模块组成，涵盖了各种样式和布局方案。

CSS 的作用

CSS 用于控制网页的外观和布局，通过为 HTML 元素添加样式规则，可以实现如下功能：

改变文字的颜色、字体、大小等属性；
改变网页中各个元素的位置、大小、形状等属性；
添加背景图像、颜色等；
实现动画效果、过渡效果等。
CSS 的引用方式
可以通过以下三种方式引入 CSS 样式：

选择器

简单选择器

元素选择器<元素名>{}
id选择器，类选择器 #id{} ; .class{}
通用选择器*{}
组合选择器h1,p,h2{}

组合器选择器

后代关系，父子关系：即包含关系，被包含为子为后。
兄弟关系：即并列关系。

后代选择器

div p {
  background-color: yellow;
}

请添加图片描述

子选择器

 div > p {
  background-color: yellow;
}

请添加图片描述

相邻兄弟选择器

div + p {
  background-color: yellow;
}

请添加图片描述

通用兄弟选择器

div ~ p {
  background-color: yellow;
}

请添加图片描述

伪类选择器

以按钮为例，演示hover（悬停）,active（点击）效果(链接还有visited)
正常：

悬停：
请添加图片描述
点击：

child类
child,可直接理解为孩子，如div p:first-child就是div里第一个p孩子（同样还有nth-child），下面请看效果：

伪元素选择器

用法：如要单独设置< p>的首字母相关样式（其它也以此类推）：

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

请添加图片描述
CSS 是层叠样式表（Cascading Style Sheets）的缩写，是一种用来描述网页（HTML 或 XML 等文档的）样式和布局的语言。CSS 发展至今已经成为 Web 开发中不可或缺的重要技术。

1. 外部样式表

使用外部样式表可以将 CSS 代码单独保存到一个文件中，这样可以方便地对网站的整体样式进行管理。

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

style.css 文件中的样式规则：

p {
  color: red;
  font-size: 16px;
}

2. 内部样式表

内部样式表是将 CSS 代码放在 HTML 文件的 head 标签中，适用于仅针对特定页面或特定部分的样式。

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

3. 内联样式

内联样式是将 CSS 代码直接放在 HTML 标签的 style 属性中，适用于仅需要对一个元素应用样式的情况。

<!DOCTYPE html>
<html>
<body>
  <p style="color: red; font-size: 16px;">这是一个段落</p>
</body>
</html>

CSS 的三大特性

CSS 有三大特性，即层叠性、继承性和优先级。

1. 层叠性

当多个选择器的样式规则冲突时，CSS 会按照一定的规则来确定哪个样式规则应用于元素。

CSS 样式规则的层叠顺序由低到高分别是：浏览器默认样式 < 外部样式表 < 内部样式表 < 内联样式表。如果同一个元素上有多个选择器的样式规则，那么优先级高的样式规则会覆盖优先级低的样式规则。

2. 继承性

当一个元素没有指定某个属性的值时，它会继承它的父元素的相应属性的值。比如，如果父元素的字体颜色为红色，那么子元素默认的字体颜色也是红色。

不是所有属性都具有继承性，一般来说，与文本样式相关的属性（如 font-family、font-size、color 等）具有继承性，而与布局相关的属性（如 width、height、margin 等）则不具有继承性。

3. 优先级

CSS 样式规则有不同的优先级，优先级高的样式规则会覆盖优先级低的样式规则。CSS 样式规则的优先级由以下几个因素决定：

!important：样式规则中加上 !important 标记的优先级最高；
内联样式表：样式规则直接写在元素的 style 属性中，优先级仅次于 !important；
ID 选择器：样式规则应用于 ID 选择器所匹配的元素，优先级仅次于内联样式表；
类选择器、属性选择器、伪类选择器：样式规则应用于类选择器、属性选择器或伪类选择器所匹配的元素，优先级仅次于 ID 选择器；
元素选择器、伪元素选择器：样式规则应用于元素选择器或伪元素选择器所匹配的元素，优先级最低。

常用 CSS 属性

以下是一些常用的 CSS 属性及其用法：

1. color

设置文本的颜色。

p {
  color: red;
}

2. font-family

设置文本的字体。

p {
  font-family: Arial, sans-serif;
}

3. font-size

设置文本的字体大小。

p {
  font-size: 16px;
}

4. background-color

设置元素的背景颜色。

p {
  background-color: #f5f5f5;
}
5. width、height

设置元素的宽度和高度。

div {
  width: 200px;
  height: 100px;
}

6. margin、padding

设置元素的外边距和内边距。

div {
  margin: 10px;
  padding: 5px;
}

7. border

设置元素的边框

8. text-align

设置文本的水平对齐方式。

p {
  text-align: center;
}

9. display

设置元素的显示方式。

div {
  display: block;
}

10. position、top、left、right、bottom

设置元素的定位方式和位置。

div {
  position: absolute;
  top: 10px;
  left: 20px;
}

CSS基础

文章目录

CSS 发展历史

CSS 的作用

选择器

简单选择器

组合器选择器

伪类选择器

伪元素选择器

1. 外部样式表

2. 内部样式表

3. 内联样式

CSS 的三大特性

1. 层叠性

2. 继承性

3. 优先级

常用 CSS 属性

1. color

2. font-family

3. font-size

4. background-color

6. margin、padding

7. border

8. text-align

9. display

10. position、top、left、right、bottom

“相关推荐”对你有帮助么？