小杨同学的博客

CSS三大特性详解 CSS（层叠样式表）有三大核心特性，它们决定了样式如何应用到HTML元素上。理解这三大特性对于掌握CSS至关重要，它们分别是：继承性、层叠性和优先级。 1. 继承性（Inheritance） 1.1 什么是继承性 继承性是指子元素会自动继承父元素的某些样式属性，无需为每个子元素单独设置。这一特性可以减少CSS代码量，提高开发效率。 1.2...

CSS文本样式详解 什么是CSS文本样式？ CSS文本样式用于控制网页中文字的外观，包括字体、颜色、对齐方式、行高、间距等。它们是网页设计中最基础也是最重要的部分之一，直接影响页面的可读性和视觉效果。 文本样式分类 CSS文本样式主要分为两大类： 字体样式：控制文字本身的外观，如字体、大小、粗细、颜色等 文本布局：控制文字在页面中的排列方式，如对齐、行高、间距等 1. 字体样式 1.1 字体颜色（color） 语法：color: 值; 取值方式： 关键字：如 red、green、blue、pink 等 十六进制值：如 #ff0000（红色）、#00ff00（绿色）、#0000ff（蓝色） RGB值：如 rgb(255, 0, 0)（红色） RGBA值：如 rgba(255, 0, 0, 0.5)（半透明红色） 示例： 1234567891011p { color: #333; /* 深灰色 */}a { color: #0066cc; /* 蓝色链接 */}.warning { color: rgba(255,...

CSS盒子模型详解 CSS盒子模型是CSS布局的核心概念，它定义了网页中元素的基本结构和尺寸计算方式。理解盒子模型对于掌握CSS布局至关重要。 1. 盒子模型的基本概念 在CSS中，每个元素都被视为一个矩形的盒子，包含以下四个部分（从内到外）： 内容区域（Content）：元素的实际内容，如文本、图片等 内边距（Padding）：内容区域与边框之间的空间 边框（Border）：围绕内容和内边距的边界 外边距（Margin）：边框与其他元素之间的空间 2. 块级盒子与行内盒子 根据元素的显示类型，盒子可以分为两种基本类型： 2.1 块级盒子（Block Box） 总是从新行开始，占据一整行宽度 可以设置宽度（width）、高度（height） 可以设置内边距、边框和外边距 常见块级元素：<div>、<p>、<h1>-<h6>、<ul>、<ol>、<li>、<form> 123456div { display: block; /* 默认值 */ width:...

CSS属性选择器详解 CSS属性选择器是一种强大的选择器类型，它允许我们根据HTML元素的属性及其值来选择元素。属性选择器为我们提供了更灵活、更精确的元素选择方式，能够适应各种复杂的选择需求。 1. 属性选择器的基本概念 属性选择器通过元素的属性名和属性值来选择元素，语法使用方括号 [] 表示。根据匹配规则的不同，属性选择器可以分为多种类型。 2. 属性选择器的分类 2.1 存在属性选择器 语法： [attribute] 作用： 选择所有具有指定属性的元素，无论属性值是什么。 示例： 123<div title="提示">这是一个带有title属性的div</div><p>这是一个没有title属性的段落</p><a href="#" title="链接">这是一个带有title属性的链接</a> 123456/* 选择所有带有title属性的元素 */[title] { border: 2px solid #007bff; ...

CSS伪元素选择器详解 什么是伪元素选择器 CSS伪元素选择器用于选择元素的特定部分，而不是整个元素。伪元素使用双冒号（::）作为前缀，用于创建或选择文档中不存在的虚拟元素，从而实现复杂的样式效果。 伪元素选择器允许我们在元素的特定位置插入内容或应用样式，而无需修改HTML结构，是实现语义化HTML和美观样式分离的重要工具。 伪元素选择器的分类 常用的伪元素选择器包括： ::first-line - 选择文本的第一行 ::first-letter - 选择文本的第一个字母 ::before - 在元素内容的前面插入内容 ::after - 在元素内容的后面插入内容 ::placeholder - 选择表单元素的占位符文本 ::selection - 选择用户选中的文本 1. ::first-line - 首行选择器 ::first-line 伪元素用于选择块级元素中文本的第一行，无论这一行有多少个单词。 应用场景 为段落的首行添加特殊样式，如新闻标题、文章开头 增强文本的可读性和视觉层次 示例 12345p::first-line { ...

CSS伪类选择器详解 什么是伪类选择器 CSS伪类选择器用于选择元素的特定状态或结构位置，使用单个冒号（:`）作为前缀。伪类选择器允许我们根据元素的动态状态或在文档树中的位置来应用样式，而不仅仅是基于元素的类型、类名或ID。 伪类选择器的分类 根据使用场景的不同，伪类选择器可以分为以下几类： 状态伪类：根据元素的动态状态选择 结构伪类：根据元素在文档树中的位置选择 表单伪类：针对表单元素的状态选择 1. 状态伪类选择器 状态伪类选择器用于选择元素在特定状态下的样式，主要包括链接伪类和用户行为伪类。 1.1 链接伪类 链接伪类用于根据链接的不同状态（如未访问、已访问、悬停、点击等）为其添加样式。 伪类 描述 示例 :link 未访问的链接 a:link { color: blue; } :visited 已访问的链接 a:visited { color: purple; } :hover 鼠标悬停在链接上 a:hover { color: red;...

CSS分组选择器详解 什么是分组选择器 CSS分组选择器（也称为并集选择器）是将不同的选择器组合在一起，使用逗号分隔，以便为多个元素应用相同的样式规则。这种选择器可以有效地减少CSS代码的冗余，提高代码的可维护性。 语法格式 123选择器1, 选择器2, 选择器3 { /* CSS样式声明 */} 应用场景 分组选择器主要用于以下场景： 当多个不同类型的元素需要共享相同的样式时 当不同选择器（如类选择器、ID选择器、标签选择器）需要应用相同样式时 当需要为页面中多个不相关的元素设置统一的基础样式时 实际示例 基本用法 12345678910/* 为所有h1、h2和h3标题设置相同的颜色和字体粗细 */h1, h2, h3 { color: #333; font-weight: 700;}/* 为多个类选择器设置相同的文本对齐方式 */.title, .subtitle, .caption { text-align: center;} 混合不同类型选择器 123456/*...

CSS关系选择器详解 什么是关系选择器？ 关系选择器是通过HTML元素之间的位置关系来选择目标元素的选择器。它们允许我们根据元素在文档树中的相对位置来更精确地选择元素，而不仅仅是根据元素类型或类名。 关系选择器分类 CSS中常见的关系选择器主要有以下四种： 1. 后代选择器 语法：使用空格分隔两个选择器，形如 A B 1234567.box p { color: pink;}.nav-list li { margin-right: 10px;} 作用：选择元素A内部的所有元素B（不限层级，包括子元素、孙元素等） HTML结构示例： 123456789<div class="box"> <p>我是box的子元素p</p> <div> <p>我是box的孙元素p</p> <div> <p>我是box的曾孙元素p</p> </div> ...

CSS基础选择器详解 什么是CSS选择器？ CSS选择器是CSS规则的第一部分，它用于选择HTML元素，以便对其应用样式。选择器的作用是"选对人"，而CSS属性则是"做对事"，两者结合才能实现预期的样式效果。 基础选择器分类 基础选择器是由单个选择器组成的，是CSS中最常用、最基础的选择器类型。主要包括以下四种： 1. 类型选择器（标签选择器） 语法：直接使用HTML标签名作为选择器 1234567div { color: gold;}span { color: green;} 作用：选择所有指定类型的HTML元素 特点： 作用范围广，会匹配页面中所有该类型的元素 优先级较低，容易被其他选择器覆盖 常用于设置基础样式，如body、p等标签的默认样式 2. 类选择器 语法：以.开头，后跟自定义的类名 1234567.box { color: gold;}.pink-text { color:...

HTML表单详解 什么是HTML表单？ HTML表单是用于收集用户输入数据的交互式组件，是网页与用户进行数据交互的重要方式。表单允许用户输入文本、选择选项、上传文件等，并将这些数据提交到服务器进行处理。 表单在Web应用中广泛应用，如登录注册、搜索功能、数据提交、反馈表单等。 HTML表单的基本结构 一个完整的HTML表单由<form>元素包裹，内部包含各种表单控件（如输入框、按钮、选择框等）。 12345<form action="/submit" method="post"> <!-- 表单控件 --> <input type="text" name="username" placeholder="请输入用户名"> <input type="submit"...