CSS基础教程：选择器、样式与链接方式解析

需积分: 0 36 浏览量更新于2024-08-04 收藏 4KB TXT 举报

"CSS基础知识plonk精心整理" CSS（Cascading Style Sheets）是一种样式表语言，用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档的呈现。CSS控制网页元素的布局、颜色、字体、尺寸等视觉效果。以下是关于CSS基础知识的详细解释： 1. CSS基础概念： - CSS允许我们将样式与结构分离，这意味着我们可以在一个单独的文件（样式表）中定义所有页面的外观，而不用在每个HTML元素中重复写入样式信息。 - CSS通过选择器和声明来指定样式。选择器匹配HTML元素，而声明则定义具体的样式属性和值。 2. 内联样式和内部样式： - 内联样式是直接在HTML元素的`style`属性中定义的，例如`<p style="color: red;">文本</p>`，这种方式只影响当前元素。 - 内部样式通常放在HTML文档的`<head>`部分，用`<style>`标签包裹，可以影响整个页面中的元素。 3. 外部样式： - 外部样式表是独立于HTML文件的CSS文件，如`first.css`。通过在HTML的`<head>`中使用`<link>`标签引用外部样式表，可以实现样式复用和更好的组织管理。 - `<link rel="stylesheet" href="first.css">`，其中`rel`属性指定了关系类型，表明这是一个样式表，`href`则指定了样式表的URL。 4. 层叠规则： - CSS的层叠特性意味着当多个样式定义了同一个元素时，会根据优先级确定最终样式。通常，内联样式权重最高，接着是ID选择器，然后是类选择器，最后是元素选择器。外部样式表和内部样式表的权重取决于它们在文档中的位置。 5. 选择器： - 类选择器：`.class-name`，选取具有指定类的所有元素，例如`<div class="myClass">`。 - ID选择器：`#id-name`，选取具有特定ID的唯一元素，如`<p id="myID">`。 - 元素选择器：`element`，选取所有指定类型的元素，例如`p`将选取所有段落。 - 通配符选择器：`*`，选取页面上的所有元素。 6. 声明和属性： - 声明由属性和值组成，用冒号分隔，例如`font-size: 16px`。属性定义要设置的样式，值则指定了该属性的具体表现。 - `font-size`：定义文本的大小，通常使用像素单位（px），浏览器默认字体大小通常是16px。 - `font-weight`：定义字体的粗细，可选`normal`、`bold`，或数值100-900，400代表常规，700代表加粗。 - `font-style`：定义字体是否倾斜，`normal`表示不倾斜，`italic`表示斜体。 - `font-family`：定义字体系列，常用的是系统默认字体，如`Arial`（Windows）、`Times New Roman`（Mac）。多个字体名称之间用逗号隔开，如果浏览器无法找到前面的字体，会尝试使用后面的字体。 - `font`：简写属性，可以同时设置`font-style`、`font-weight`、`font-size`和`font-family`，例如`font: italic bold 18px/24px Arial, sans-serif`。 7. 样式层叠与继承： - 如果一个元素同时有多个样式声明，浏览器会根据层叠规则决定最终样式。子元素通常会继承父元素的某些样式，但不是所有属性都支持继承，如`color`和`font`可以，而`border`和`background-color`则不行。 8. ı、ˮƽ뷽ʽ、ı及и塢ıչʽ： - ı（元素选择器）选取HTML元素。 - ˮƽ뷽ʽ（类选择器）选取具有特定类的所有元素。 - ı（ID选择器）选取具有特定ID的唯一元素。 - и塢ıչʽ（伪类选择器）根据元素状态选取元素，如`:hover`用于鼠标悬停时的效果。 9. ɫ： - ɫ可以设置元素的颜色，例如`color: red;`，也可以使用十六进制（如`#FF0000`）、RGB（如`rgb(255, 0, 0)`）、RGBA（带透明度，如`rgba(255, 0, 0, 0.5)`）和颜色关键词（如`red`）。以上是CSS基础知识的概览，理解并熟练掌握这些内容对于创建美观且功能丰富的网页至关重要。

李妍.

粉丝: 119
资源: 11

CSS基础教程：选择器、样式与链接方式解析

Python库 | plonk-0.6.0-py3-none-any.whl

plonky:基于Plonk和Halo的递归SNARK

Plonk-开源

plink-plonk:Chrome扩展程序

AirPlonk:本地网络中的Plonk内容

plonk-cli:全面的cli使生活更轻松

plonkit:在plonk证明系统中使用circom zkp DSL的zkSNARK工具包

纯Rust实现PLONK协议配合arkworks后端

零知识证明在去中心化应用中的使用

数据与信息安全期末复习资料（网络信息安全）

最新资源