一篇文章讲清楚html css js三件套之css

大学生亨亨

于 2024-07-26 18:35:41 发布

阅读量675

点赞数 10

文章标签： html css javascript

本文链接：https://blog.csdn.net/juzihuaile/article/details/140721977

版权

CSS 入门概述

CSS（层叠样式表）用于设置和布置网页——例如，更改内容的字体、颜色、大小和间距，将其拆分为多个列，或添加动画和其他装饰功能。这个模块为你掌握 CSS 的过程提供了一个温和的开端，包括它如何工作的基础知识，语法是什么样的，以及如何开始使用它来为 HTML 添加样式。

CSS 究竟是怎么工作的？

当浏览器展示一个文件的时候，它必须兼顾文件的内容和文件的样式信息，下面我们会了解到它处理文件的标准的流程。需要知道的是，下面的步骤是浏览加载网页的简化版本，而且不同的浏览器在处理文件的时候会有不同的方式，但是下面的步骤基本都会出现。

浏览器载入 HTML 文件（比如从网络上获取）。
将 HTML 文件转化成一个 DOM（Document Object Model），DOM 是文件在计算机内存中的表现形式，下一节将更加详细的解释 DOM。
接下来，浏览器会拉取该 HTML 相关的大部分资源，比如嵌入到页面的图片、视频和 CSS 样式。JavaScript 则会稍后进行处理，简单起见，同时此节主讲 CSS，所以这里对如何加载 JavaScript 不会展开叙述。
浏览器拉取到 CSS 之后会进行解析，根据选择器的不同类型（比如 element、class、id 等等）把他们分到不同的“桶”中。浏览器基于它找到的不同的选择器，将不同的规则（基于选择器的规则，如元素选择器、类选择器、id 选择器等）应用在对应的 DOM 的节点中，并添加节点依赖的样式（这个中间步骤称为渲染树）。
上述的规则应用于渲染树之后，渲染树会依照应该出现的结构进行布局。
网页展示在屏幕上（这一步被称为着色）

结合下面的图示更形象：

CSS的基本语法

CSS规则由两个主要部分组成：选择器和声明块。选择器用于选择HTML元素，声明块包含属性和值，定义所选元素的样式。

/* 选择器：选择所有的段落元素 */
p {
  /* 属性和值：设置字体大小和颜色 */
  font-size: 16px;
  color: #333;
}

CSS选择器

CSS提供了多种选择器来定位HTML元素：

元素选择器：选择所有指定类型的元素。
选择所有<p>（段落）元素，并设置字体大小和颜色。
```
p {
  font-size: 16px;
  color: #333;
}
```
类选择器：选择具有特定类名的元素，使用点（.）表示。
选择所有具有class="highlight"的元素，并设置背景颜色。

.highlight {
  background-color: yellow;
}

HTML:

<p class="highlight">这段文本将有黄色背景。</p>
<div class="highlight">这个div也将有黄色背景。</div>

ID选择器：选择具有特定ID的元素，使用井号（#）表示。
选择具有id="main-header"的元素，并设置字体样式和大小。

#main-header {
  font-family: Arial, sans-serif;
  font-size: 24px;
}

HTML:

<h1 id="main-header">这是主标题。</h1>

属性选择器：根据元素属性或属性值选择元素。
选择所有具有type="email"的<input>元素，并设置边框样式。

input[type="email"] {
  border: 1px solid #ccc;
}

html:

<input type="email" placeholder="Enter your email">

伪类选择器：选择处于特定状态的元素，如:hover或:active。
选择所有链接在鼠标悬停时改变颜色。
```
a:hover {
  color: red;
}
```
选择所有被激活的按钮改变背景颜色。

button:active {
  background-color: blue;
}

后代选择器、子选择器和兄弟选择器：用于更精确地选择元素之间的关系。
后代选择器
选择<div>元素内部所有的<p>元素，并设置段落间距。
```
div p {
  margin: 10px 0;
}
```
HTML:

<div>
  <p>这段文本将有上下方各10像素的间距。</p>
  <p>这段文本也是。</p>
</div>

子选择器（直接子元素选择器）

选择<ul>元素的直接<li>子元素，并设置列表项的缩进。

ul > li {
  padding-left: 20px;
}

HTML:

<ul>
  <li>列表项 1</li>
  <li>列表项 2
    <ul>
      <li>子列表项 1</li> <!-- 这个不会应用上面的样式 -->
    </ul>
  </li>
</ul>

兄弟选择器（相邻兄弟选择器）

选择紧接在<h1>元素后的<p>元素，并设置字体样式。

h1 + p {
  font-style: italic;
}

HTML:

<h1>这是一个标题</h1>
<p>这段文本将斜体显示，因为它紧跟在标题后面。</p>
<p>这段文本不会斜体显示，因为它不是紧跟在标题后面。</p>

声明块

CSS中的声明块，也称为规则集或属性块，是一组由花括号 {} 包围的CSS声明。每个声明包含一个CSS属性和相应的值，它们之间用冒号 : 分隔。声明之间用分号 ; 分隔。

声明块总是跟随在一个选择器后面，用于定义选择器所选择的HTML元素的样式。

示例：基本的声明块

假设我们有一个简单的HTML文档，包含一个段落和一个类名为 highlight 的<div>元素：

<p>这是一个普通段落。</p>
<div class="highlight">这是一个高亮的div。</div>

我们可以使用以下CSS声明块来设置这些元素的样式：

/* 元素选择器的声明块 */
p {
  color: blue;       /* 文本颜色设置为蓝色 */
  font-size: 16px;   /* 字体大小设置为16像素 */
}

/* 类选择器的声明块 */
.highlight {
  background-color: yellow; /* 背景颜色设置为黄色 */
  padding: 10px;            /* 内边距设置为10像素 */
  border: 1px solid black;  /* 边框设置为1像素黑色实线 */
}

在这个例子中，p 是一个元素选择器，它选择了页面上所有的 <p> 元素，花括号内是它的声明块，包含了两个声明：color 和 font-size。

同样，.highlight 是一个类选择器，它选择了所有具有 class="highlight" 属性的元素。它的声明块包含了三个声明：background-color、padding 和 border。

声明块中的多个声明

声明块可以包含任意数量的声明。例如：

body {
  margin: 0;
  padding: 0;
  font-family: 'Arial', sans-serif;
  background-color: #f4f4f4;
  color: #333;
}

这里，body 选择器的声明块包含了五个声明，分别设置了外边距、内边距、字体族、背景颜色和文本颜色。

声明块的继承

某些CSS属性的值可以被子元素继承。例如，如果在一个声明块中为<body>元素设置了 font-family，那么除非另有指定，页面上的所有元素都将使用这个字体族。

声明块的优先级

当多个声明块影响同一个元素时，CSS有一套规则来确定哪个声明块的样式将被应用。这包括考虑选择器的特异性（specificity），源代码中声明的顺序（后来的声明会覆盖先前的声明），以及!important规则的使用。

声明块是CSS中定义样式的核心部分，通过它们，你可以控制网页的视觉表现。

CSS盒模型

CSS盒模型是设计和布局网页的基础。每个HTML元素可以看作一个盒子，包含内容、内边距（padding）、边框（border）和外边距（margin）。

内容（Content）：元素的实际内容。
内边距（Padding）：内容周围的空间。
边框（Border）：内边距外的一条线。
外边距（Margin）：边框外的空间，用于分隔元素。

布局技术

CSS提供了多种布局技术，包括：

Flexbox：一种灵活的布局模型，可以轻松地在不同方向上对齐和分布元素。
Grid：一个二维布局系统，允许在行和列上放置元素。
Floats：一种老式的布局技术，通过使元素向左或向右浮动来创建多列布局。

响应式设计

使用CSS媒体查询，开发者可以根据不同屏幕尺寸和设备特性应用不同的样式，从而创建响应式网页。

/* 基础样式 */
body {
  background-color: lightblue;
}

/* 当屏幕宽度小于600px时应用的样式 */
@media (max-width: 600px) {
  body {
    background-color: coral;
  }
}

CSS预处理器

CSS预处理器（如Sass、Less和Stylus）提供了变量、嵌套规则、混合（mixins）和函数等高级功能，使CSS更易于编写和维护。

学习CSS

基础语法：学习选择器、属性和值。
盒模型：理解内容、内边距、边框和外边距的概念。
布局技术：学习Flexbox和Grid等现代布局方法。
响应式设计：使用媒体查询创建适应不同设备的网页。
CSS3特性：探索CSS3的新特性，如动画、过渡、阴影和渐变。

CSS是实现网页视觉呈现的关键技术。通过学习CSS，你可以创建美观、响应式和用户友好的网页设计。随着经验的积累，你将能够更有效地使用CSS来解决布局和样式问题。

期末放假自学三件套,希望我们可以一起学习!

大学生亨亨

关注

10
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
一篇文章讲清楚html css js三件套之css

期末放假自学网页三件套,希望我们可以一起学习!
复制链接

扫一扫