首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

CSS概要

CSS语法 选择符 { 属性:值} 选择符:又称选择器,指明网页要应用样式规则元素本例是网页中所有的段(p)文字将变 成蓝色,而其他元素(ol)不会受到影响。...1 em = 父元素font-size : p{font-size:14px} span{font-size:0.8em;} 以这个例子为例。...如果想为元素设置层模型相对定位,需要设置position:relative(表示相对定位),它通过left、right、top、 bottom属性确定元素在正常文档流偏移位置。...:relative 和 left:50%:利用 相对定位 方式,将元素向左偏移 50% ,即达到居中目的 • 垂直居中-父元素高度确定单行文本 通过设置父元素 height 和 line-height...高度一致来实现 • 垂直居中-父元素高度确定多行文本 使用插入 table (包括tbody、tr、td)标签,同时设置 vertical-align:middle 设置块级元素 display

1.4K50

HTMLCSS基础知识学习笔记

斜体文本(强调)    斜体文本内容     粗体文本    粗体显示文本内容     单独样式文本    没有语义,...    使用:         胆小鼠 9....,而ID选择器是不可以 三年级 10.CSS 子选择器     还有一个比较有用选择器子选择器,即大于符号(>),用于选择指定标签元素第一代子元素...)                 需要设置position:absolute(表示绝对定位),这条语句作用将元素从文档流拖出来                 然后使用left、right、top...(position: relative)                 position:relative(表示相对定位),它通过left、right、top、bottom属性确定元素在正常文档流偏移位置

2K10
您找到你想要的搜索结果了吗?
是的
没有找到

视觉格式化模型-控制框

一、块级元素和块框 块级元素是源文档那些在视觉上被格式化为块(:段落)元素。... 提示:你可以先修改部分代码再运行。 上述代码SPAN 元素包含匿名文本区块 C1,后跟块级元素 P ,最后是匿名文本区块 C2。...匿名框不会影响元素原有特性设置。例2 SPAN 设置了 border,产生匿名框后,C1 C2还是被红色边框包围。 块框会占据一整行。...二、行内级别元素和行内框 行内元素是源文档那些不形成新内容块元素;内容在行内分布(,段落内着重文本,行内图形等等)。...如果一个块框(不是浮动,也不是绝对定位)跟随在一个插入控制框之后,则该插入框成为该块框第一个行内框。 3. 否则,该插入框成为一个块框。

64390

C1 能力认证——Web基础

C1 能力认证——Web基础 语义化标签 元素 说明 article 定义独立来自外部文档,新闻投稿、博客文章、论坛帖子等 aside 一般用于网页侧边栏或者文章内部标注框 header...用于选取属于其父元素最后一个特定类型元素 :nth-child(N) 选择匹配属于其父元素第N个子元素且满足基础选择器选取要求,N可以为数字、关键字(odd / even)、公式(:2n+1...: "结束"; } ::before 用于创建伪元素,在元素内容之前插入内容,该伪元素默认为行内元素 p::before { content: "开始"; } ::first-line 向文本首行添加样式...,为行内元素设置宽,行内元素宽高为内容宽高 以下选项,全部标签都为行内元素选项是_______?...元素会自动从上至下,从左往右流式排列,称为文档流 元素脱离文档流后,将不在文档流占据空间,元素浮于文档流上方,此时元素层级发生变化 div.box2定位在div.box1上方,横线处可填写最大整型数字是

3.3K40

HTML标签

4.body标签: 作用:页面在主体部分,用于存放所有的HTML标签: p,h,a,b,u,i,s,em,del,ins,strong,img HTML标签分类 在HTML页面,带有“”符号元素被称为...span, 跨度,跨距;范围 语法格式: 这是头部    今日价格 文本格式化标签(熟记) 在网页,有时需要为文字设置粗体、斜体或下划线效果,这时就需要用到...4.不仅可以创建文本超链接,在网页各种网页元素,如图像、表格、音频、视频等都可以添加超链接。 锚点定位 (难点) 通过创建锚点链接,用户能够快速定位到目标内容。...路径(重点、难点) 实际工作,通常新建一个文件夹专门用于存放图像文件,这时再插入图像,就需要采用“路径”方式来指定图像文件位置。...但是实际工作, 较少用 ol  自定义列表(理解) 定义列表常用于对术语或名词进行解释和描述,定义列表列表项前没有任何项目符号

6.9K20

CSS基础

选择符:又称选择器,指明网页要应用样式规则元素本例是网页中所有的段(p)文字将变成蓝色,而其他元素ol)不会受到影响。...比如下面代码:某种颜色应用于p标签,这个颜色设置不仅应用p标签,还应用于p标签所有子元素文本,这里子元素span标签。...p{color:red;} 三年级时,我还是一个胆小小女孩。 可见右侧结果窗口中p文本span文本都设置为了红色。...盒模型 CSS 盒模型 (Box Model) 规定了元素框处理元素内容、内边距、边框和 方式,页面所有标记都可以看成是一个盒子,盒模型是我们对网页 行定位基础,而定位是我们对网页元素进行位置固定重点知识...一般来说,把各个元素内边距和外边距 浮动 因为 div 元素是块级元素,独占一行。如何在一行显示多个 div 元素?显然默认标准流已经无法满足需求,这就要用到浮动。

1.7K50

CSS知识总结(上)

:值; } 子元素选择器只会查找儿子, 不会查找其他被嵌套标签 子元素选择器之间需要用>符号连接, 并且不能有空格 后代选择器使用空格作为连接符号 | 子元素选择器使用>作为连接符号 后代选择器会选中指定标签...div会单独占领一行,而span不会单独占领一行 div是一个容器级标签, 而span是一个文本标签 容器级标签和文本标签区别?...文本标签 span p buis strong em ins del ... 在CSSCSS也将所有的标签分为两类, 分别是块级元素和行内元素 什么是块级元素, 什么是行内元素?...块级元素会独占一行 行内元素不会独占一行 容器级标签 div h ul ol dl li dt dd ... 文本标签 span p buis stong em ins del ......背景图片仅仅是一个装饰, 不会占用位置 插入图片会占用位置 背景图片有定位属性, 所以可以很方便控制图片位置 插入图片没有定位属性, 所有控制图片位置不太方便

1K40

markdown语法简介

它允许人们“使用易读易写文本格式编写文档,然后转换成有效XHTML(或者HTML)文档”。 Markdown 吸收了很多在电子邮件已有的纯文本标记特性。 ?...Markdown目标是:成为一种适用于网络书写语言。 Markdown基本语法-区块元素 段落和换行 一个 Markdown段落是由一个或多个连续文本行组成,它前后要有一个以上空行。...Markdown基本语法-区段元素 强调: Markdown 使用星号(*)和底线(_)作为标记强调字词符号 code: test *stest* __test__ **_...转义字符: Markdown 可以利用反斜杠来插入一些在语法中有其它意义符号。...Markdown 支持以下这些符号前面加上反斜杠来帮助插入普通符号: \ 反斜线 ` 反引号 * 星号 _ 底线 {} 花括号 [] 方括号 () 括弧 # 井字号 +

57490

CSS基础知识

1.jpg 选择符:又称选择器,指明网页要应用样式规则元素本例是网页中所有的段(p)文字将变成蓝色,而其他元素ol)不会受到影响。... 上面代码不可以实现为“三年级”三个文字设置文本颜色为红色并且字号为25px作用。 5-4 子选择器 还有一个比较有用选择器子选择器,即大于符号(>),用于选择指定标签元素第一代子元素。...如右侧代码编辑器代码: .first span{color:red;} 这行代码会使第一段文字内容“胆小鼠”字体颜色变为红色。...比如下面代码:某种颜色应用于p标签,这个颜色设置不仅应用p标签,还应用于p标签所有子元素文本,这里子元素span标签。...p{color:red;}三年级时,我还是一个胆小小女孩。 可见结果窗口中p文本span文本都设置为了红色。

2.7K30

Typora Markdown 语法

号来表示,: 1. 第一项 2. 第二项 3. 第三项 显示结果如下: ? 列表嵌套 列表嵌套只需在子列表选项添加四个空格即可: 1....Markdown 还没有办法指定图片高度与宽度,如果你需要的话,你可以使用普通 ? 标签。...目前支持 HTML 元素有:等 ,: 使用 Ctrl+Alt+Del 重启电脑 输出结果为: ?...转义 Markdown 使用了很多特殊符号来表示特定意义,如果需要显示特定符号则需要使用转义字符,Markdown 使用反斜杠转义特殊字符: **文本加粗** \*\* 正常显示星号 \*\* 输出结果为...Markdown 支持以下这些符号前面加上反斜杠来帮助插入普通符号: \ 反斜线 ` 反引号 * 星号 _ 下划线 {} 花括号 [] 方括号 () 小括号 # 井字号 +

2.7K10

HTML试题——附答案

请解释以下常见HTML标签用途: 和 和 5. HTML属性是什么?给出一些常见HTML属性示例及其作用。6. 什么是HTML表单?...列举一些常见HTML表单元素和它们用途。7. 请简要解释HTML语义化概念。8. 在HTML,什么是注释?如何在HTML编写注释?HTML试题答案1. HTML是什么意思?... 和 :用于在文档创建容器,可以用于布局和样式控制。5. HTML属性是什么?给出一些常见HTML属性示例及其作用。...常见HTML表单元素:(接收用户输入,文本框、复选框、单选框等)(用于多行文本输入)(创建下拉列表)(创建按钮)(包含表单元素...它能够增强页面的可读性、可维护性,并对搜索引擎和辅助技术提供更好支持。8. 在HTML,什么是注释?如何在HTML编写注释?

16810

CSS再学

比如下面代码:某种颜色应用于p标签,这个颜色设置不仅应用p标签,还应用于p标签所有子元素文本,这里子元素span标签。...p{color:red;}  三年级时,我还是一个胆小小女孩。...important;} p{color:green;} 三年级时,我还是一个胆小小女孩。...固定定位(position:fixed) 绝对定位: positon:absolute,这条语句作用是将元素从文档拖出来,然后使用left、top、right、bottom属性相对于最接近一个具有定位属性父包含块进行绝对定位...除了上面讲到插入table标签,可以使父元素高度确定多行文本垂直居中之外,本节介绍另外一种实现这种效果方法。但这种方法兼容性比较差,只是提供大家学习参考。

1.9K70

CSS进阶02-盒模型进阶

3.1 块级元素Block-level Elements与块盒Block Boxes 块级元素是指源文档以块(段落)形式被格式化,生成主要块级盒(principal block-level box...每个块级元素生成一个主要块级盒( principal block-level box)。 一些元素,比如li和list-item,生成额外盒来放置项目符号,这些额外盒会相对于主要盒来摆放。...(,段落内强调文本,行内图片等等)。...3.4 匿名行内盒 Anonymous Inline Boxes 任何直接包含在块容器元素文本(不在内联元素内)都必须作为匿名行内元素处理。...3.5 插入盒Run-in boxes 插入盒,由 display:run-in 定义,根据上下文来决定其为块盒还是行内盒。属性根据插入最终状态(行内级还是块级)应用于其上。 4.

49510

CSS

none; background-color: #eee; #框里面的背景色 }   12,伪元素选择器 #将p标签文本第一个字变颜色变大小 p:first-letter { font-size...: 48px; color: red; } /*在每个元素之前插入内容*/ p:before { content:"*"; color:red; } /*在每个元素之后插入内容*...kkdkkdkksk rewrrrreerrre 此时div标签下所有标签前文本颜色都会继承...  1,static,默认值,无定位,为标签设置top,left等值都没作用   2,relative(相对定位) 相对定位是相对于该元素在文档流原始位置,在这种情况下,虽然原来位置没有了内容...3,absolute(绝对定位) 设置为绝对定位元素框会从文本流出来,也就不会占据原来位置,同时也会出现父级塌陷现象,绝对定位是相对于父级位置来(父级必须是relative,也就是父级要是相对定位

1.4K11

html常用标签

再次强调,p是一个文本标签,p里面只能放文字、图片、表单元素。 图片 页面上可以插入图片,能够插入图片类型是:jpg(jpeg)、gif、png、bmp。...不能往网页插入图片格式是:psd、ai HTML页面不是直接插入图片,而是插入图片引用地址,所以也要把图片上传到服务器上。 插入方法: 1!...div和span div和span是非常重要标签,div语义是division“分割”; span语义就是span“范围、跨度”。 CSS课程你将知道,这两个东西,都是最最重要“盒子”。...默认是不会增加任何效果改变,但是语义变了,div所有元素是一个小区域。...div标签是一个容器级标签,里面什么都能放,甚至可以放div自己 span也是表达“小区域、小跨度”标签,但是是一个“文本级”标签。 就是说,span里面只能放置文字、图片、表单元素

5.2K20

HTML试题-附答案

请解释以下常见HTML标签用途: 和 和 5. HTML属性是什么?给出一些常见HTML属性示例及其作用。6. 什么是HTML表单?...列举一些常见HTML表单元素和它们用途。7. 请简要解释HTML语义化概念。8. 在HTML,什么是注释?如何在HTML编写注释?HTML试题答案1. HTML是什么意思?... 和 :用于在文档创建容器,可以用于布局和样式控制。5. HTML属性是什么?给出一些常见HTML属性示例及其作用。...常见HTML表单元素:(接收用户输入,文本框、复选框、单选框等)(用于多行文本输入)(创建下拉列表)(创建按钮)(包含表单元素...它能够增强页面的可读性、可维护性,并对搜索引擎和辅助技术提供更好支持。8. 在HTML,什么是注释?如何在HTML编写注释?

22910

10.4【前端开发】页面布局:如何理解 “CSS 视觉格式化模型”?

盒子box,有时候一个盒子对应几个元素,有时候一个元素几个盒子。一个抽象概念,由CSS引擎根据文档内容所创建,主要用于文档元素定位、布局和格式化等。...有一些元素,比如列表项会生成额外盒子来放置项目符号,而那些会生成列表项元素可能会生成更多盒子。不过,多数元素只生成一个主块级盒子。 一个块级盒子可能也是一个块容器盒子。...一个典型例子是包含多种格式内容(强调文本、图片等)段落,就可以由行内级元素组成。...这会导致普通流文本及其他内容会“流”到浮动盒子边缘处,除非元素通过 clear 清除了前面的浮动。... 效果: 绝对定位 如果元素 position 为 absolute 或 fixed,该元素为绝对定位。在绝对定位,盒子会完全从当前文档流移出。

80110

【实战】我是如何在输入框实现@ At功能

) 当前需求拆解 按住shift + @ 时候,弹出通知列表 选择时 @用户标签插入当前光标位置 生成@用户标签规则是:高亮、携带用户ID、一键删除信息、不可以编辑。...如果您使用id,它就有重复问题,这就意味着你不可能重用某个元素。 例:我再生成一个富文本组件就会初始化失败、因为id是唯一。这就是为什么很多人推荐尽量少用ID原因。...要兼容中文输入法时候@事件判断(:中文输入法打“哈哈哈@” 这个时候不能监听@事件 ) 中文输入法时候单独输入@时 怎么判断中文输入?...contents.length) { const index = contents.length - 1 // 在文本拆入换行符号兼容...获取光标的坐标在文本位置 caret-pos 从 textarea、contentedtiable 或 iframe 正文中获取插入符号/光标的位置/偏移量 import { position, offset

2.4K20

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

    运营活动

    活动名称
    广告关闭
    领券