-- 文本属性 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元无门槛券
手把手带您无忧上云