-- 文本属性 1、背景颜色 background-color 2、文本居中（位置）text-align 3、行高 line-height 4、字母间距 letter-spacing...-- 外边距和内边距 1、margin：用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。...； 3、Border(边框)：围绕在内边距和内容外的边框。...4、Content(内容)：盒子的内容，显示文本和图像，content属性与before及after伪类配合使用，来插入生成内容。。...-- Content 1、样式在head添加 --> 百度
DOCTYPE> 于文档的最前面，用于向浏览器说明当前文档使用哪种标准规范，必需在开头处使用该标签。为所有的 XHTML 文档指定 HTML 版本和类型，只有这样浏览器才能按指定的文档类型进行解析。...④ 不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。...③ 自定义列表 常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。... 表格属性 属性 内容 说明 border 像素 表格边框宽度 cellspacing 像素 单元格边框之间的间距 cellpadding 像素 单元格内容与边框的间距 width 像素...必须位于 table 标签中，一般包含网页的logo和导航等头部信息。 ：用于定义表格的主体。位于 table 标签中，一般包含网页中除头部和底部之外的其他内容。
在HTML中，元素被分为块级元素和内联元素两种主要类型。块级元素通常用于构建网页的结构，而内联元素则嵌套在块级元素内，用于添加文本和其他内容。...它通常用于组织和布局网页的内容，不会自动添加任何样式。 元素通常与CSS一起使用，以定义样式和布局。... 元素 元素用于定义段落文本，通常在文本块之间创建间距。浏览器会自动在元素前后添加一些间距。 示例代码： This is a paragraph of text.... 元素 元素用于引用长段落或文本的部分，通常在引用内容周围创建缩进。浏览器通常会自动添加引用样式。... 元素 元素是一个通用的块级容器，通常用于组织和布局网页的内容。它不会自动添加任何样式。
* 段落标签 【文本内容】 默认情况下，文本在一个段落中会根据浏览器窗口的大小自动换行。...⚪ target：用于指定链接页面的打开方式，其取值有self和blank两种，其中self为默认值，blank为在新窗口中打开方式。...⚪ 不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。... * 自定义列表 ⚪ 常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。...位于 table 标签中，一般包含网页中除头部和底部之外的其他内容。
列表 HTML列表是在网页中组织和呈现信息的重要元素，通过使用不同类型的列表，可以更好地结构化和展示内容。...有序列表（Ordered list）：使用元素来创建，列表项同样用元素来表示，不同的是它们会自动添加序号。...无序列表 无序列表是最常见的列表类型，它在每个列表项前添加一个小圆点（也叫做列表符号）。它使用 作为列表的容器，而 作为描述具体的列表项。...：用于为 HTML 表格添加标题，标题通常显示在表格的顶部。 ：定义表格列的组 ：定义用于表格列的属性。...cellpadding：用于指定单元格之间的间距。值为一个数字，表示间距的大小。 cellspacing：用于指定单元格边框之间的间距。值为一个数字，表示间距的大小。 width：用于指定表格的宽度。
web前端学习 10节 HTML 学习如何搭建页面结构和内容 (盖房子 毛坯房) CSS 学习如何美化页面 (装修) JavaScript 学习如何给页面添加动态效果 jQuery JS语言框架,简化原生...: 超文本标记语言 超文本:指不仅仅是纯文本 还包括各种字体效果和多媒体(图片,音频,视频) 标记语言格式: 标签体 学习HTML主要学习有哪些标签 以及标签的使用方式...###创建HTML页面 ###常见的文本标签 内容标题h1-h6 align=“left/right/center”; 独占一行, 字体加粗, 自带上下间距 段落标签p 独占一行,自带上下间距...页面和文件同级目录:直接写图片名 文件在页面的上一级:…/图片名 文件在页面的下一级:文件夹名/图片名 绝对路径:访问站外资源时使用 图片盗链,节省本站资源,但有可能找不到图片(原网站的图片路径发生改变则找不到该图片...) alt: 图片不能正常显示时显示的文本 title: 鼠标在图片上悬停时显示的文本 width/height: 两种赋值方式:1.
下面是需要创建的内容： 要完成这个基本布局， Flexbox 需要完成的主要任务包括以下方面： 创建完整宽度的 header 和 footer 将侧边栏放置在主内容区域左侧 确保侧边栏和主内容区域的大小合适...尤其在控制列表元素样式和设置导航与按钮之间的间距方面，特别有用。 使用 CSS Grid 创建布局 为了测试效率，接下来使用 CSS Grid 创建相同的基本布局。...此处声明 grid-template-columns，是为了确保页面的整体结构。这里 grid-template-column 已将侧边栏和主内容区域大小设置为 1fr 和 3fr。...首先 display: grid; 是基本设置，其次内容块之间的间距，可以通过 grid-column-gap 和 grid-row-gap 实现。...带有文本和按钮的行内容 下图是包含了“额外”文本和按钮的三个区域。Flexbox 可以轻松设置三列的宽度。
关于高度问题 问题： 如果是动态地添加内容，高度最好不要定义。浏览器可以自动伸缩，然而如果是静态的内容，高度最好定好。...在ie中如果td中的没有内容，那么border将不会显示 8. div嵌套p时，出现空白行 问题： div中显示文本，ff、oprea、Chrome：top和bottom都会出现空白行，但是在...IE6两个层之间3px的问题 问题： 左边层采用浮动，右边没有采用浮动，这时在ie6中两层之间就会产生3像素的间距 解决： 1、右边层也采用浮动 float 2、左边层添加属性 margin-right...嵌套使用ul、li的问题 问题： ie的bug，嵌套使用ul、li时，里层的li设置float以后，外层li不设置float, 里面的ul顶部和它外面的li总是有一段间距 解决： 设置里面的ul的zoom... clear:both; 3、给包含的文本末尾添加一个空格 4、设置width 29.
下划线 : underline 删除线 :line-through 上划线 : overline 不添加任何装饰 : none 注：添加多个文本修饰：line-through...取值：1. number( px ) | scale ( 比例值 , 跟文字大小成比例的 ) letter-spacing : 字之间的间距 word-spacing : 词之间的间距 ( 针对英文段落的...(可以添加给所有的标签) 注： 一般的网站都只设置 a{} ( link visited active ) a:hover{} :after、:before 通过伪类的方式给元素添加一段文本内容...()之间的区别 type : 类型 child : 孩子 li:nth-of-type(2n+1){background:red;} li:nth-of-type(2n){background...内联标签之间会有空隙，原因：换行产生的 inline-block : input、select … 贴在一起，但是支持宽高 注：布局一般用块标签，修饰文本一般用内联标签 按内容 Flow：流内容
除了显示成方块，它们一般分为下面两类： 块元素：在布局中默认会独占一行，块元素后的元素需换行排列。 内联元素：元素之间可以排列在一行，设置宽高无效，它的宽高由内容撑开。...-- 在段落前想缩进两个文字的空格，使用空格的字符实体： --> 一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用 文本的方式编辑它，如果用浏览器打开...属性和值之间用冒号，一个属性和值与下一个属性和值之间用分号，最后一个分号可以省略，代码示例： div{ width:100px; height:100px; background...把元素叫做盒子，设置对应的样式分别为：盒子的宽度(width)、盒子的高度(height)、盒子的边框(border)、盒子内的内容和边框之间的间距(padding)、盒子与盒子之间的间距(margin...>列表标题一 列表标题二 列表标题三 列表的内容一般是可以链接的，点击链接到新闻或者文章的具体内容，所以具体结构一般是这样的
声明：在英文大括号“｛｝”中的的就是声明，属性和值之间用英文冒号“：”分隔。...5-4 类和ID选择器的区别 学习了类选择器和ID选择器，我们会发现他们之间有很多的相似处，是不是两者可以通用呢？...了不起的盖茨比 注意：这个样式使用在英文单词时，是设置字母与字母之间的间距。 单词间距设置： 如果我想设置英文单词之间的间距呢？可以使用 word-spacing 来实现。...在chrome浏览器下可查看元素盒模型，如下图： ? 3.jpg 8-8 盒模型--填充 元素内容与边框之间是可以设置距离的，称之为“填充”。填充也可分为上、右、下、左(顺时针)。...如下代码： 偏移前的位置还保留不动，覆盖不了前面的div没有偏移前的位置 效果图： ?
修饰页面文本和页面背景的属性 background，将背景属性设置在一个声明中 background-color，设置页面对象的背景颜色 background-image，引用图像，将其设置为背景 background-repeat...，设置背景图像重复的方式 background-position，设置背景图像的具体位置 background-attachment，设置背景图像是固定还是随着页面的其余部分滚动 color，设置文本颜色...，设置字体风格 font-weight，设置字体粗细 direction，设置文本方向 letter-spacing，设置字符间距 text-align，对齐页面中的文本 text-decoration...:nth-of-type(n)，匹配同类型中的第N个同级兄弟元素E E:nth-last-of-type(n)，匹配同类型中的倒数第n个同级兄弟元素E CSS结构伪类选择符 E:link，设置超链接a在未被访问前的样式...，用来和content属性一起使用 E:after/E::after，设置在对象后发生的内容，用来和content属性一起使用 E::selection，设置被选择时的颜色 文本 文本阴影 text-shadow
现在，我们就开始进入今天的内容吧。 01. 网站平滑滚动 在元素中添加scroll-behavior: smooth，以实现整个页面的平滑滚动。...字体字距调整 字体字距调整允许微调字符间距，通过调整文本元素内字符之间的间距来确保最佳的可读性。 p { font-kerning: auto; } 74....选项卡大小 滚动边距设置滚动容器边缘和滚动内容开始之间的边距，通过提供滚动缓冲空间来增强用户体验。 pre { tab-size: 4; } 77....滚动填充块 定义在可滚动块容器周围添加的填充空间，以确保内容在滚动期间保持可见和可访问。 .container { scroll-padding-block: 20px; } 86....字间距 字间距调整文本元素中字之间的间距，使您可以微调版式布局并提高可读性。
当然，你也可以使用 .nav li+li或者 .nav li:first-child ~li ,但是 ：not是更有语义化（semantic）和容易理解的。...在上面的列子中，跟在其他元素后面的元素，比如说H3后面的H4，或者一个段落之后的一个段落，他们之间至少1.5rems的间距（大约为30px） 9、一致的垂直结构（Consistent Vertical...box-decoration-break 假设您希望对换行到多行的长文本行应用统一的间距、边距、突出显示或背景色，但不希望整个段落或标题看起来像一个大块。...这迫使您为子元素中的任何链接编写额外的覆盖和样式规则，并且在使用像WordPress这样的CMS时，可能会导致您的主链接样式比按钮文本颜色更容易出现问题。...19、在表单元素上设置字体大小，以获得更好的移动体验 为了避免移动浏览器（iOS Safari等）在点击下拉列表时放大HTML表单元素，请在添加font-size样式： input[type
，是因为标签段之间存在空格，只要我们把 HTML 中的空格去掉后，空隙自然就不存在了，下面提供三种去掉空格的方式： left<li id...，子项继承父级属性之后，文本内容都堆叠在了一起，所以我们还要在子项中添加 letter-spacing: 0; 属性#left { letter-spacing: 0;}#center { letter-spacing...: 0;}#right { letter-spacing: 0;}类似的属性还有 word-spacing，该属性是用来定义元素中字之间插入多少空白符，在父级直接添加该属性即可完成我们想要的效果，子项不需要添加其他属性...#main { word-spacing: -8px;}将字体大小设置为 0该方法是在父级元素中添加 font-size: 0; 属性，但是子元素也会继承父级 0 字体大小的属性，无法显示出文本内容...#main { font-size: 0;}若是想要子元素的文本内容呈现出来，只需在每个子项里设置 font-size 属性即可#left { font-size: 16px;}#center {
本文重要内容 CSS的单位 字体属性 文本属性 定位属性：position、float、overflow等 CSS的单位 html中的单位只有一种，那就是像素px，所以单位是可以省略的，但是在CSS中不一样...文本属性 CSS样式中，常见的文本属性有以下几种： letter-spacing: 0.5cm ; 单个字母之间的间距 word-spacing: 1cm; 单词之间的间距 text-decoration.../2.gif) ; /*列表项前设置为图片*/ margin-left:80px; /*公有属性*/ } 另外还有一个简写属性叫做list-style，它的作用是：将上面的多个属性写在一个声明中...overflow属性：超出范围的内容要怎么处理 overflow属性的属性值可以是： visible：默认值。多余的内容不剪切也不添加滚动条，会全部显示出来。...hidden：不显示超过对象尺寸的内容。 auto：如果内容不超出，则不显示滚动条；如果内容超出，则显示滚动条。 scroll：Windows 平台下，无论内容是否超出，总是显示滚动条。
2.css-美容师 css:层叠样式表，也叫css样式表或级联样式表 css也是一种标记语言[简单] css作用就是在HTML的基础上美化页面，布局页面的 css主要设置HTML页面中的文本内容...我只把ul里面的li选择出来（ol里面的li不选），怎么做？...1.文本总体概述 text(文本)属性可定义外观,比如文本颜色,对齐文本,装饰文本,文本缩进,行间距 2.文本颜色 div { color: deeppink...text-align属性只能用于设置元素内文本内容的水平对齐方式 ps: 盒子里面的文字,而不是盒子本身的对齐方式 div { text-align:...行高不仅仅是我们眼中的文本高度,实际上还包括上间距和下间距 文本高度已经在font-size设置过,所以这里的line-height设置的是上间距和下间距 上边距=下边距=[(line-height
对于本文，我将它们称为外层和内层。假设我们有一个元素，它里面的间距是内间距，它外面的间距是外间距。...但是，在处理具有大量细节和子元素的组件时，这可能会变得越来越复杂。 Margin- 外部间距 它用于在一个元素和另一个元素之间添加间距。...例如，在前面的示例中，我添加了 margin-bottom: 1rem 以在两个堆叠元素之间添加垂直间距。...CSS 网格中，可以使用 grid-gap 属性轻松地在列和行之间添加间距。...考虑来自 styled-system.com 的以下内容： 我们在标题和部分之间有一个间隔。
：第一行 ::after：在之后添加内容，定义内容属性 ::before：在之前添加内容，定义内容属性 搞定CSS 3权重，写CSS样式更流畅 层叠样式，是不同的选择器效果附加到元素上。...text-decoration来添加上划线或者下划线 七 文本阴影 text-shadow 八 文本溢出与空白处理 white-space：pre，保留原样式空白 溢出：white-sapce...指定垂直方向对齐，可以是数值也可以是枚举 缩进：text-indent：em单位比较好 十 排版模式 letter-spacing：字符间距 word-spacing：单词间距 排版方向：writing-mode...，控制渐变的范围 颜色渐变中间阈值：渐变过渡中间点，隔在颜色之间，控制渐变色占的比例 渐变重复：repeat-linear-gradient() 使用 CSS 3 操作数据内容样式，CSS没那么简单哟...：caption标签 对齐：文本用文本对齐，表格用块对齐方式 表格颜色：与div差不多 表格背景：与div差不多 细线表格：border-collapse，设置collapse 间距：border-spacing
当然，你也可以使用 .nav li+li或者 .nav li:first-child ~li ,但是 ：not是更有语义化（semantic）和容易理解的。 ?...在上面的列子中，跟在其他元素后面的元素，比如说H3后面的H4，或者一个段落之后的一个段落，他们之间至少1.5rems的间距（大约为30px） 9、一致的垂直结构（Consistent Vertical...box-decoration-break 假设您希望对换行到多行的长文本行应用统一的间距、边距、突出显示或背景色，但不希望整个段落或标题看起来像一个大块。...这迫使您为子元素中的任何链接编写额外的覆盖和样式规则，并且在使用像WordPress这样的CMS时，可能会导致您的主链接样式比按钮文本颜色更容易出现问题。...19、在表单元素上设置字体大小，以获得更好的移动体验 为了避免移动浏览器（iOS Safari等）在点击下拉列表时放大HTML表单元素，请在添加font-size样式： input[type
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM
