Regina_Cai的博客_HTML&CSS

CSS篇十六——盒子模型之边框

一、CSS盒子模型网页布局过程： 1.先准备好相关的网页元素，网页元素基本都是盒子Box。 2.利用CSS设置盒子样式，然后拜访到相应的位置。 3.往盒子里装内容。网页布局的核心本质：利用CSS摆盒子1.1 盒子模型组成所谓盒子模型：就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。 CSS盒子模型本质上是一个盒子，封装周围的HTML元素，包括：边框（border）、

html

盒子模型

百度

原创点赞0 阅读46 收藏0 评论0 2022-11-17

CSS篇十五——（2）

一、CSS三大特性之优先级1. 权重叠加权重叠加：如果是复合选择器，则会有权重叠加，需要计算权重。代码示例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge

权重

html

选择器

原创点赞0 阅读101 收藏0 评论0 2022-10-02

CSS篇十五——（1）

一、CSS的三大特性CSS有三个非常重要的特性：层叠性、继承性、优先级1.1 层叠性给相同选择器设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突的问题。1.1.1 使用方式层叠性原则：样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式。样式不冲突，不会层叠。注意：所谓冲突是给相同选择器的相同属性设置了不同的属性值。代码示例：<!DOCTYP

选择器

权重

html

原创点赞0 阅读104 收藏0 评论0 2022-10-01

CSS篇十四

一、CSS背景综合案例1. 练习内容案例：五彩导航练习价值：1.链接属于行内元素，但是此时需要宽度高度，故需要转换模式 2.里面的文字需要水平居中和垂直居中，需要单行文字垂直居中代码 3.链接里面需要设置背景图片，需要用到背景的相关属性设置 4.鼠标经过变化背景图片，需要用到链接伪类选择器2.实现过程及结果HTML代码：<!DOCTYPE html><html lang="en

html

css

背景图片

原创点赞0 阅读102 收藏0 评论0 2022-10-01

CSS篇十——（3）

一、CSS的背景CSS设置背景颜色、背景图片、背景平铺、背景图片位置见CSS篇十——（2）5. 背景图像固定（背景附着）background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动。使用场景：background-attachment后期可以制作视差滚动的效果。5.1 使用方式background-attachment: scroll | fixed参数

背景图片

html

背景颜色

原创点赞0 阅读81 收藏0 评论0 2022-09-30

CSS篇十——（2）

一、CSS的背景设置背景颜色、背景图片、背景平铺见CSS篇十——（1）4. 背景图片位置利用backgorund-position属性可以改变图片在背景中的位置。background-position: x y;参数代表的意思是：x坐标和y坐标。可以使用方位名词或者精确单位参数值说明length百分数 | 由浮点数和单位标识符组成的长度值positiontop | center | bot

html

css

代码示例

原创点赞0 阅读94 收藏0 评论0 2022-09-30

CSS篇十——（1）

一、CSS的背景通过CSS背景属性，可以给页面元素添加背景样式。背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。1. 背景颜色background-color属性定义了元素的背景颜色。1.1 使用方式background-color: 颜色值|transparent(透明);一般情况下元素背景颜色默认值是transparent（透明），也可以手动指定背景颜色为透明色。

背景图片

html

背景图

原创点赞0 阅读138 收藏0 评论0 2022-09-30

CSS篇九

一、单行文字垂直居中及案例总结1. 单行文字垂直居中CSS没有提供文字垂直居中的代码，可以通过小技巧进行实现~ 解决方案：使文字的行高等于盒子的高度就可以让文字在当前盒子内垂直居中1.1 单行文字垂直居中原理行高组成：1.上空隙 2.文字本身高度 3.下空隙上下空隙会平分行高减去文字本身高度后剩下的部分简单理解：行高的上空隙和下空隙把文字挤到中间了，如果行高小于盒子的高度，文字会偏上，如果行高

html

垂直居中

代码示例

原创点赞0 阅读80 收藏1 评论0 2022-09-30

CSS篇八

一、CSS的元素显示模式1. 什么是元素的显示模式作用：网页的标签非常多，在不同的地方会用到不同的标签，了解他们的特点能够更好的布局网页。元素显示模式就是元素（标签以什么方式进行显示），如<div></div>自己占一行，一行可以放多个<span>. HTML元素一般分为块元素和行内元素两种类型。2. 元素显示模式的分类2.1 块元素常见的块

行内元素

块元素

html

原创点赞0 阅读101 收藏0 评论0 2022-09-30

CSS篇七——（2）

一、复合选择器后代选择器、子选择器见：https://blog.csdn.net/Regina_Cai/article/details/127095094?spm=1001.2014.3001.55014. 并集选择器（重要）并集选择器可以选择多组标签，同时为它们定义相同的样式。通常用于集体声明。并集选择器是各选择器通过英文逗号（,）连接而成，任何形式的选择器都可以作为并集选择器的

选择器

伪类选择器

html

原创点赞0 阅读112 收藏0 评论0 2022-09-29

CSS篇七——（1）

一、CSS复合选择器1. 什么是复合选择器在CSS中，可以根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。复合选择器可以更准确、更高效的选择目标元素（标签）复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等2. 后代选择器（重要）后代选择器又称为包含选择器

选择器

html

代码示例

原创点赞0 阅读134 收藏0 评论0 2022-09-28

CSS篇六

一、Emmet语法Emmet语法的前身是Zen coding，它使用缩写，来html/css的编写速度，Vscode内部已经集成该语法。 1.快速生成HTML结构语法 2.快速生成CSS样式1. 快速生成HTML结构语法1.生成标签直接输入标签名按tab键即可，如div 然后tab键，就可以生成<div></div> 2.如果想要生成多个相同的标签加上 *

css

html

css样式

原创点赞0 阅读142 收藏0 评论0 2022-09-28

CSS篇五

一、CSS字体及文本设置总结案例1. 根据所给页面完成一模一样的页面代码示例-HTML代码部分：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">

html

调试工具

css

原创点赞0 阅读104 收藏0 评论0 2022-09-28

CSS篇四

一、CSS的引入方式按照CSS样式书写的位置（或者引入的方式），CSS样式表可以分文三大类：行内样式表（行内式）、内部样式表（嵌入式）、外部样式表（链接式）1. 内部样式表内部样式表（内嵌样式表）是写到HTML页面内部，是将所有的CSS代码抽取出来，单独放到一个<style></ style>标签中。1.1 使用方式<style> div {

css

样式表

外部样式表

原创点赞0 阅读112 收藏0 评论0 2022-09-28

CSS篇三

一、CSS文本属性CSS Text（文本）属性可以定义文本的外观，比如文本的颜色、对齐方式、装饰文本、文本缩进、行间距等。1. 文本颜色color属性用于定义文本的颜色。1.1 使用方式div { color: red;}表示属性值预定义的颜色值red，green，blue，pink十六进制#FF0000，#F6600，#29D794RGB代码rgb(255,0,0)或rgb(100%,0%

下划线

html

缩进

原创点赞0 阅读84 收藏0 评论0 2022-09-28

CSS篇二

一、CSS字体属性CSS Fonts（字体）属性用于定义字体系列、大小、粗细和文字样式（如斜体）。1. 字体系列CSS使用 font-family 属性定义文本的字体系列。1.1 使用方式p { font-family: "微软雅黑"; }div { font-family: Arial, "Microsoft Yahei", "微软雅黑"; }各种字体之间必须使用英文状态下的逗号隔开一般情况下

css

microsoft

html

原创点赞0 阅读114 收藏0 评论0 2022-09-28

CSS篇一——（3）

一、id选择器id选择器可以为标有特定的id的HTML元素指定特定的样式。 HTML元素以id属性来设置id选择器，CSS中id选择器以**"#"来定义**。1. 使用方式1.1 语法#id名 { 属性1: 属性值1; ···}如：将id为nav元素中的内容设置为红色#nav { color: red;}代码示例：<!DOCTYPE html><html lang="en"

选择器

html

代码示例

原创点赞0 阅读103 收藏0 评论0 2022-09-27

CSS篇一——（2）

一、类选择器1. 语法格式及代码示例如果想要差异化选择不同的标签，单独一个或者某几个标签，可以使用类选择器。类选择器在HTML中以class属性表示，在CSS中，类选择器以一个点"."号显示。语法格式：.类名 { 属性1: 属性值1; ···}如：将所有拥有red类的HTML元素均为红色.red { color: red;}结构需要class属性来调用class类<div clas

html

类名

选择器

原创点赞0 阅读114 收藏0 评论0 2022-09-27

CSS篇一——（1）

一、CSS简介CSS是层叠样式表（Cascading Style Sheets）的简称，有时也称之为CSS样式表或级联样式表。 CSS也是一种标记语言，主要用于设置HTML页面中的文本内容（字体、大小对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。 CSS可以美化HTML，使其更加漂亮，布局也更加简单。总结：HTML主要做结构，显示元素内容CSS美化HTML，布局

选择器

css

html

原创点赞0 阅读113 收藏0 评论0 2022-09-27

HTML篇八——（2）

一、表单标签本文接https://editor.csdn.net/md/?articleId=1270370122.表单控件（表单元素）2.2.4 <select>表单元素使用场景：在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，可以使用<select>标签控件定义下拉列表。基本语法规范：<select> <opt

表单

控件

html

原创点赞0 阅读123 收藏0 评论0 2022-09-25

HTML篇八——（1）

一、表单标签1. 为什么需要表单使用表单的目的是为了收集用户信息。在网页中需要跟用户进行交互，收集用户资料，此时就需要表单。2. 表单的组成在HTML中，一个完整的表单通常由表单域、表单控件（表单元素）和提示信息3部分构成。2.1 表单域表单域是一个包含表单元素的区域；在HTML标签中，<form>双标签用于定义表单域，用以实现用户信息的收集和传递。也就是说<for

表单

属性值

单选按钮

原创点赞0 阅读126 收藏0 评论0 2022-09-25

HTML篇七

一、列表标签列表是用来布局的，其最大的特定就是整齐、整洁、有序，他作为布局会更加自由和方便。根据使用场景的不同，列表可分为三大类：无序列表、有序列表和自定义列表。1. 无序列表（重点）<ul>标签表示HTML页面中项目的无序列表，一般以项目符号呈现列表项，而列表项使用<li>标签定义。无序列表的基本语法格式如下：<ul> <li&g

html

自定义

基本语法

原创点赞0 阅读120 收藏0 评论0 2022-09-24

HTML篇六——（2）

一、表格标签表格标签的基本语法、表头单元格标签及表格相关属性见：https://editor.csdn.net/md/?articleId=1270084341.5 表格结构标签使用场景：因为表格可能会很长，为了更好的表示表格的语义，可以将表格分割成表格头部和表格主体两大部分。 <thead></thead>标签表示表格的头部区域，用于定义表格的头部，

合并单元格

html

百度

原创点赞0 阅读83 收藏0 评论0 2022-09-24

HTML篇六——（1）

一、表格标签1.1 表格的主要作用表格主要用于显示、展示数据，它可以使数据显示的非常规整，可读性非常好。1.2 表格的基本语法基本语法：<table>  <tr> <!-- <tr></tr> 是用于定义表格中的行

html

原创点赞0 阅读104 收藏0 评论0 2022-09-23

HTML篇五

一、HTML中的注释和特殊标签1. 1 注释HTML中一些便于阅读理解但又不需要显示在页面中的注释文字需要使用注释标签。注释标签是以结束；**注释标签快捷键：windows 为 ctrl+/，MacOS 为 command+/。<!DOCTYPE html><html lang="en"><head>

html

特殊字符

快捷键

原创点赞0 阅读102 收藏0 评论0 2022-09-22

HTML篇四

一、路径1. 目录文件夹和根目录目录文件夹：即普通文件夹，里面存放的是制作页面所需要的相关素材，如：html文件、图片等。根目录：打开目录文件的第一层就是根目录。由于页面中的图片非常多，通常会新建一个文件夹来存放这些图像文件（images）,这时再查找图像就需要采用“路径”的方式来指定图像文件的位置。路径可分为：相对路径和绝对路径。2. 相对路径（重点）相对路径：以引用文件所在位置为参考基础

html

绝对路径

相对路径

原创点赞2 阅读105 收藏1 评论1 2022-09-22

HTML篇二

一、HTML语法规范1.1 基本语法概述HTML标签是由尖括号包围的关键词，如HTML标签通常是成对出现的，如<html>和</html>，成此类标签为双标签。标签对中的第一个标签是开始标签，第二个标签是结束标签。有些特殊的标签必须是单个标签（极少情况），例如<br />，称此类标签为单标签。1.2 标签关系双标签关系可以分为两类：包含

html

html标签

简体中文

原创点赞0 阅读68 收藏0 评论0 2022-09-21

Vscode MacOS版本下载及html配置

一、Vscode MacOS官方版本下载路径：https://code.visualstudio.com/download1.下载及安装步骤：具体下载及安装教程可参见该博客： https://www.cnblogs.com/taikongbai/p/16283010.html二、下载并安装需要的插件： 1.打开扩展2.分别下载插件： 1）Chinese (Simplified) (

html

安装教程

vscode

原创点赞0 阅读172 收藏0 评论0 2022-09-19

官方博客	意见反馈	了解我们	全部文章
在线客服	网站地图	热门标签

开源基础软件社区	51CTO学堂
51CTO	汽车开发者社区

51CTO博客

Regina_Cai的博客