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

前端之HTML和CSS

-- 在段落前想缩进两个文字空格,使用空格字符实体:  -->   一个html文件就是一个网页,html文件用编辑器打开显示文本,可以用 文本方式编辑它,如果用浏览器打开...布局示例   根据网页布局原理以及上面的实例,写出网页html结构代码。...float 设置元素浮动,浮动可以让块元素排列在一行,浮动分为左浮动:float:left; 右浮动:float:right; 文本常用样式属性一: color 设置文字颜色,: color:...line-height 设置文字行高,:line-height:24px; 表示文字高度加上文字上下间距是24px,也就是每一行占有的高度是24px text-decoration...表格元素及相关样式 1、标签:声明一个表格 2、标签:定义表格一行 3、和标签:定义一行一个单元格,td代表普通单元格,th表示表头单元格,它们常用属性如下

4.3K30

【黑马程序员pink名师讲CSS】学好CSS有这一篇就够了(CSS笔记)

font开始,空格隔开 风格,粗细,字号,字体,必要是后面两个 P78.文本属性 1.文本总体概述 text(文本)属性可定义外观,比如文本颜色,对齐文本,装饰文本,文本缩进,行间距...: underline; } 最好用还是用来去掉网页超链接标签默认带有的下划线 5.文本缩进 text-indent属性用于第一行缩进,也就是文档里首行缩进功能 单位...} line-height行高不仅仅是我们眼中文本高度,实际上还包括上间距和下间距 文本高度已经在font-size设置过,所以这里line-height设置是上间距和下间距 上边距=下边距...我是ol 孩子 我是ol 孩子 我是ol 孩子 比如上面的html代码,如果我想选中ul所有的li,... 这里我们并没有给p标签设置样式,但是给p标签标签设置了文本颜色和字体样式,子标签p就继承过来了 这个其实我们早就用过,我们之前在body设置样式,应用于

2.3K20
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    HTMLCSS基础知识学习笔记

    若加此标签后,表格会一次性显示出来(而非网页加载一点显示一点)         表格一行        表格一行         表格单元格...外部式         把CSS代码写到一个单独外部文件,以.css扩展名结尾,在内使用标签引入,:         三年级 10.CSS 子选择器     还有一个比较有用选择器子选择器,即大于符号(>),用于选择指定标签元素第一代子元素...块状元素:         1、每个块级元素都从新一行开始,并且其后元素也另起一行。...2、浮动模型 (Float)         现在我们想让两个块状元素并排显示         任何元素在默认情况下是不能浮动,但可以用CSS定义为浮动,div、p、table、img等元素都可以被定义为浮动

    2.1K10

    CSS基础知识

    比如下面代码:某种颜色应用于p标签,这个颜色设置不仅应用p标签,还应用于p标签所有子元素文本,这里子元素为span标签。...(内联元素可不像块状元素这么霸道独占一行) 9-4 浮动模型 块状元素这么霸道都是独占一行,如果现在我们想让两个块状元素并排显示,怎么办呢?不要着急,设置元素浮动就可以实现这一愿望。...任何元素在默认情况下是不能浮动,但可以用 CSS 定义为浮动, div、p、table、img 等元素都可以被定义为浮动。如下代码可以实现两个 div 元素一行显示。...5.jpg 当然你也可以同时设置两个元素右浮动也可以实现一行显示。...6.jpg 两个元素一左一右可以实现一行显示吗?

    2.8K30

    Web前端基础(01)

    文本:指不仅仅是纯文本 还包括各种字体效果和多媒体(图片,音频,视频) 标记语言格式: 标签体 学习HTML主要学习有哪些标签 以及标签使用方式....###创建HTML页面 ###常见文本标签 内容标题h1-h6 align=“left/right/center”; 独占一行, 字体加粗, 自带上下间距 段落标签p 独占一行,自带上下间距...水平分割线hr 加粗 b 斜体 i 小字 small 删除线 s 下划线 u 换行 br 在html页面回车不是换行 只能识别成一个空格 ###列表标签 无序列表 ul:type(控制图标) li...) alt: 图片不能正常显示时显示文本 title: 鼠标在图片上悬停时显示文本 width/height: 两种赋值方式:1....百分比 支持图片格式: jpg/jpeg png gif ###超链接a a标签包裹文本文本超链接,包裹图片是图片超链接 href:路径 可以指向页面也可以指向其它文件(如果浏览器支持浏览此文件则直接浏览

    1.1K30

    CSS基础

    相对于当前对象内文本字体尺寸。当前对行内文本字体尺寸未被人为设置,则相对于浏览器默认字体尺寸。...比如下面代码:某种颜色应用于p标签,这个颜色设置不仅应用p标签,还应用于p标签所有子元素文本,这里子元素为span标签。...p{color:red;} 三年级时,我还是一个胆小小女孩。 可见右侧结果窗口中p文本与span文本都设置为了红色。...) 段落排版 text-indent:2em:缩进;中文文字段前习惯空两个文字空白。...一般来说,把各个元素内边距和外边距 浮动 因为 div 元素是块级元素,独占一行。如何在一行显示多个 div 元素?显然默认标准流已经无法满足需求,这就要用到浮动。

    1.7K50

    Imooc之Html与CSS

    比如下面代码:某种颜色应用于p标签,这个颜色设置不仅应用p标签,还应用于p标签所有子元素文本,这里子元素为span标签。...任何元素在默认情况下是不能浮动,但可以用 CSS 定义为浮动, div、p、table、img 等元素都可以被定义为浮动。如下代码可以实现两个 div 元素一行显示。...标签加入一行代码 标签主要作用:预格式化文本。被包围在 pre 元素文本通常会保留空格和换行符。大段代码可用。...ul-li无序标签 ol-li有序标签 在网页制作过程过,可以把一些独立逻辑部分划分出来,放在一个标签,这个标签作用就相当于一个容器。...代码编辑器代码: .food>li{border:1px solid red;} 这行代码会使class名为food下子元素li(水果、蔬菜)加入红色实线边框。

    6.8K20

    Web前端基础(02)

    ###课程回顾 文本标签 内容标题h1-h6: 独占一行 自带上下间距 字体加粗 字体从大到小 段落标签p : 独占一行 自带上下间距 换行 br 水平分割线hr 字体相关: b加粗 i斜体 small...单元格距内容距离 表单form 学习表单就是学习表单各种控件 文本框 密码框 <input...分区标签可以理解成是一个容器,将多个有相关性标签放进一个容器,可以对多个标签进行统一管理 div:块级分区元素,特点:独占一行 span:行内分区元素,特点:共占一行 html5...内联样式:在标签style属性添加样式代码,不可以复用 使用较少 内部样式: 在head标签里面添加style标签 标签体内写样式代码,可以在当前页面复用,这种写法学习使用较多,工作中使用较少 外部样式...: 在单独css样式文件写样式代码,通过link标签引入,好处:可以多页面复用,可以将html和css代码分离开 选择器 标签名选择器 格式: 标签名{样式代码} 作用: 选取页面中所有同名标签 id

    1.2K20

    8则未必知道且超级实用纯CSS布局排版技巧 | 网易4年实践

    元素为尾元素 3 √ :only-child 父元素仅有该元素元素 3 √ :nth-of-type(n) 标签中指定顺序索引标签 3 √ :nth-last-of-type(n) 标签中指定逆序索引标签...3 × :first-of-type 标签为首标签 3 √ :last-of-type 标签为尾标签 3 √ :only-of-type 父元素仅有该标签标签 3 √ 属性选择器 选择器 说明...三列布局」由左右三列组成,其特点为连续两列宽度固定、剩余一列宽度自适应和三列高度固定且相等。...圣杯布局」和「双飞翼布局」都是由左右三列组成,其特点为左右两列宽度固定、中间一列宽度自适应和三列高度固定且相等。...由于行内元素在当前行排版产生溢出会自动将其余节点排版到下一行,因此还需声明white-space:nowrap使所有行内元素在一行内排版完毕。若产生滚动条,还需对容器height做适当微调。

    3.3K20

    CSS概要

    CSS语法 选择符 { 属性:值} 选择符:又称选择器,指明网页要应用样式规则元素,本例是网页中所有的段(p)文字将变 成蓝色,而其他元素(ol)不会受到影响。...标签选择器 - 标签选择器其实就是html代码标签。...,用于选择指定标签元素下后辈元素 通用选择器 - 它使用一个(*)号指定,它作用是匹配html中所有标签元素 伪类选择符 - 它允许给html不存在标签(标签某种状态)设置样式,:...、、、、、、 、 每个块级元素都从新一行开始,并且其后元素也另起一行。...高度一致来实现 • 垂直居中-父元素高度确定多行文本 使用插入 table (包括tbody、tr、td)标签,同时设置 vertical-align:middle 设置块级元素 display

    1.4K50

    『知识巩固#1』Html、Css基础整理

    在当前窗口中跳转(覆盖原网页) 不打开新网页窗口 h5 不再支持 div盒子 align: center 属性 列表标签 ul无序列表 只能包含li标签 li标签可以包含任意内容 ol...有序列表 可以认为是 order list: 有顺序列表 ol 列表只允许包含li标签 li 标签可以包含任意内容 dl自定义列表 diy list dt 自定义列表主题 dd自定义列表内容...style weight size family 只能省略前两个,省略相当于默认值 一个属性冒号后面书写多个值写法,属于复合属性 文本 文本缩进 text-indent 取值为 数字+px 或者...行高 = 上间距 + 文本高度 + 下间距 应用 单行文本垂直居中 可以设置为line-height: 文字父元素高度 注意点 如果同时设置了行高和font连写,注意覆盖问题 font: style...img 不重要图片用background-image 元素显示模式 块级元素 独占一行 宽度默认是父元素宽度 高度默认由内容展开 可以设置宽高 div、h系列、p、ul、li、dl、dt、dd、

    4K20

    HTML

    ,第二行“”标签和最后一行“”定义html文档整体,“”标签‘lang=“en”’定义网页语言为英文,定义成中文是'lang="zh-CN"',不定义也没什么影响...这是一级标题 这是二级标题 这是三级标题 怼到顶部 3.html段落标签、换行标签与字符实体 html段落标签 标签定义一个文本段落,一个段落含有默认上下间距...-- 在段落前想缩进两个文字空格,使用空格字符实体:  -->   一个html文件就是一个网页,html文件用编辑器打开显示文本,可以用...2、 标签 行内元素,表示一行一小段内容,没有具体语义。...right 2、标签:定义表格一行 3、和标签:定义一行一个单元格,td代表普通单元格,th表示表头单元格,它们常用属性如下: align 设置单元格内容水平对齐方式

    1.5K10

    C1 能力认证——Web基础

    C1 能力认证——Web基础 语义化标签 元素 说明 article 定义独立来自外部文档,新闻投稿、博客文章、论坛帖子等 aside 一般用于网页侧边栏或者文章内部标注框 header...ul 无序列表 form 创建HTML表单 button 定义按钮 i 用于表示区分普通文本其他文本,浏览器通常会将其内容显示为斜体 现需要设置一个按钮,请填写语义化标签补全代码片段(仅填写一个标签名即可...,请补全代码片段 两个黄鹂鸣翠柳,一行白鹭上青天 writing-mode ''' writing-mode...line-height ''' line-height属性 用于设置行间距,可设置值如下 数字:行间距为当前字体大小乘此数字 固定值:设置固定间距20px 百分比:行间距为当前字体大小乘百分比...以下选项,全部标签都为行内元素选项是_______?

    3.3K40

    CSS行高(line-height)及文本垂直居中原理

    行框 在浏览器,会将给每一段文本生成一个行框,行框高度就是行高。行框由上间距文本高度、下间距组成,上间距距离与下间距距离是相等。 ?...2.png 默认情况下一行文本行高分为:上间距文本高度,下间距,并且上间距是等于下间距,所以文字默认在这一行是垂直居中。 2. 文本几条线 ?...5.png 如果一段文本高度为16px,如果给他设置line-height高度为200,那么相当于,文本上下间距高度增加了,但是文本本身高度依然是16是不变,并且一直默认在行框垂直居中,而上间距和下间距平分了...所以,容器被这一行文本占满,而本身文字在自己一行是垂直居中,所以看起来就像是在容器垂直居中。 3....如果是%,%之前数据一定是整数 :150% ,200% em 效果跟%是一样一样。 注意:一行em大小相当于是当前标签font-size大小。

    4.5K10

    Web前端温故知新-CSS基础

    1.3 编写CSS样式   (1)缺省样式:浏览器样式   所有的标签在不同浏览器中都有各自默认样式,h1,h2,p,div,span,ul等,可以通过设置修改浏览器样式。   ...(5)复合选择器   复合选择器是由两个或多个基础选择器,通过不同方式组合而成,具体如下: ① 标签指定式选择器   标签指定式选择器有两个选择器构成,其中第一个为标记选择器,第二个为class选择器或...id选择器,两个选择器之间不能有空格,:h3.special, p#one等等。...(2)CSS伪元素   伪元素是控制内容,例如 :   :first-line与:first-letter,这两个伪元素只能用于块级元素。前者用于选择第一行,后者用于选择第一个字符。...这种方式固然可以实现圆角背景效果,但是,如果以后增加或减少列表项文字,就需要重新对li定义背景图像,以适应文本内容多少。

    2.3K20
    领券