![](https://img-blog.csdnimg.cn/20190918140053667.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
HTML+CSS
文章平均质量分 93
HTML+CSS知识
无区新手
细节决定成败
展开
-
CSS3
CSS3CSS3 选择器属性选择器原创 2020-04-06 12:17:21 · 485 阅读 · 1 评论 -
CSS3开发案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...原创 2020-04-02 13:20:29 · 159 阅读 · 0 评论 -
CSS之三角形
原文地址:https://www.cnblogs.com/monozxy/articles/7903019.html<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device...转载 2020-03-18 22:08:18 · 111 阅读 · 0 评论 -
居中总结(不包括CSS3的方法)
袁进老师整理:居中总结居中:盒子在其包含块中居中行盒(行块盒)水平居中直接设置行盒(行块盒)父元素```text-align:center```常规流块盒水平居中定宽,设置左右margin为auto绝对定位元素的水平居中定宽,设置左右的坐标为0(left:0, right:0),将左右margin设置为auto> 实际上,固定定位(...原创 2020-03-02 16:45:17 · 176 阅读 · 0 评论 -
浏览器兼容性
袁进老师整理:浏览器兼容性问题产生原因- 市场竞争- 标准版本的变化厂商前缀> 比如:box-sizing, 谷歌旧版本浏览器中使用-webkit-box-sizing:border-box- 市场竞争,标准没有发布- 标准仍在讨论中(草案),浏览器厂商希望先支持IE: -ms-Chrome,safari: -webkit-opera: -o...原创 2020-03-02 16:21:21 · 278 阅读 · 0 评论 -
深入理解文字-参考线
袁进老师整理(膜拜大佬):参考线-深入理解字体font-size、line-height、vertical-align、font-family文字文字是通过一些文字制作软件制作的,比如fontforge制作文字时,会有几根参考线,不同的文字类型,参考线不一样。同一种文字类型,参考线一致。font-size字体大小,设置的是文字的相对大小文字的相对大...原创 2020-02-29 17:07:39 · 436 阅读 · 0 评论 -
CSS进阶
@规则at-rule: @规则、@语句、CSS语句、CSS指令1. import@import "路径";导入另外一个css文件2. charset@charset "utf-8";告诉浏览器该CSS文件,使用的字符编码集是utf-8,必须写到第一行web字体和图标web字体用户电脑上没有安装相应字体,强制让用户下载该字体使用@font-face指...翻译 2020-03-02 20:33:07 · 752 阅读 · 0 评论 -
表单
表单元素一系列元素,主要用于收集用户数据input元素输入框type属性:输入框类型 type: text, 普通文本输入框 type:password,密码框 type: date, 日期选择框,兼容性问题 type: search, 搜索框,兼容性问题 type: number,数字输入框 type: checkbox,多...原创 2020-02-25 20:13:39 · 222 阅读 · 0 评论 -
CSS
伪类选择器 选中某些元素的某种状态 1)link:超链接未访问时的状态2)visited:超链接访问过后的状态3)hover:鼠标悬停时的状态4)active:激活状态,鼠标按下时的状态注意:当存在这四种选择器时,应该按1-2-3-4的顺序执行,否则会出问题(爱恨法则)伪元素选择器::before::after实例:<!DOCTYPE h...原创 2020-02-28 20:26:27 · 475 阅读 · 0 评论 -
属性选择器
1.E[att^=value]属性选择器 E[att^=value]属性选择器是指选择名称为E的标记,且该标记定义了att属性,att属性值包含前缀为value的子字符串。需要注意的是E是可以省略的,如果省略则表示可以匹配满足条件的任意元素。例如,div[id^=section]表示匹配包含id属性,且id属性值是以“section”字符串开头的div元素。<!doctype...翻译 2018-05-09 07:52:02 · 11606 阅读 · 1 评论 -
关系选择器
1.子代选择器(>) 子代选择器主要用于选择某个元素的第一级子元素。例如希望选择只作为h1元素子元素的strong元素,可以这样写:h1>strong。<!doctype html><html><head><meta charset="utf-8"><title>子代选择器的应用</t翻译 2018-05-09 12:39:04 · 1667 阅读 · 0 评论 -
CSS基础选择器
1.标记选择器标记选择器是指用HTML标记名称作为选择器,按标记名称分类,为页面中某一类标记指定统一的CSS样式。标记名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}该语法中,所有的HTML标记名都可以作为标记选择器,如body、h1、p、strong等。用标记选择器定义的样式对页面中该类型的所有标记都生效。标记选择器最大的优点是能快捷为页面中同类型的标记统一样式,同时这...翻译 2018-05-02 17:40:41 · 1780 阅读 · 0 评论 -
结构化伪类选择器
1.:root选择器 :root选择器用于匹配文档根元素,在HTML中,根元素始终是html元素。也就是说使用“:root选择器”定义的样式,对所有页面元素都生效。对于不需要该样式的元素,可以单独设置样式进行覆盖。<!doctype html><html><head><meta charset="utf-8"><titl...翻译 2018-05-09 13:47:25 · 10502 阅读 · 2 评论 -
文本外观属性
1.color:文本颜色color属性用于定义文本的颜色,其取值方式有如下3种。预定义的颜色值,如red,green,blue等。 十六进制,如#FF0000,#FF6600,#29D794等。实际工作中,十六进制是最常用的定义颜色的方式。 RGB代码,如红色可以表示为reb(255,0,0)或(100%,0%,0%)。注意:如果使用RGB代码的百分比颜色值,取值为0时也不能省略百分...翻译 2018-05-02 21:55:35 · 5280 阅读 · 0 评论 -
伪元素选择器
1.:before选择器 :before伪元素选择器用于在被选元素的内容前面插入内容,必须配合content属性来指定要插入的具体内容。格式如下:<元素>:before{ content:文字/url();}<!doctype html><html><head><meta charset="utf-8">...翻译 2018-05-09 17:10:47 · 3532 阅读 · 0 评论 -
CSS盒子模型
1.<div>标记 div是英文division的缩写,意为“分割、区域”。<div>标记简单而言就是一个区块容器标记,可以将网页分割为独立的、不同的部分,以实现网页的规划和布局。<div>与</div>之间相当于一个“盒子”,可以设置外边距、内边距、宽和高,同时内部可以容纳段落、标题、表格、图像等各种网页元素,也就是说大多数HTML标记都...翻译 2018-05-09 17:54:52 · 2367 阅读 · 0 评论 -
CSS高级特性
1.继承性 所谓继承性是指书写CSS样式表时,子标记会继承父标记的某些样式,如文本的颜色和字号。例如定义主体元素body的文本颜色为黑色,那么页面中所有的文本都将显示为黑色,这是因为其他的标记都嵌套在<body>标记的子标记。 继承性非常有用,它使设计师不必在元素的每个后代上添加相同的样式。如果设置的属性是一个可继承的属性,只需将它应用于父元素即可,如下面的代码:...翻译 2018-05-08 22:15:47 · 2264 阅读 · 0 评论 -
字体样式属性
1.font-size:字体大小 相对长度单位 说明 em 相对于当前对象内文本的字体尺寸 px 像素,最常用,推荐使用 绝对长度单位 说明 in 英寸 cm 厘米 mm 毫米 pt 点 2.font-family:字体 各种字体之间必须使用英文状态下的逗号隔开。 中文字体需要加英文状态下的引号,英文...翻译 2018-04-24 13:47:08 · 844 阅读 · 0 评论 -
超链接标记和锚点链接
1.超链接<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>href:用于指定链接目标的url地址,当为<a>标记应用href属性时,它就具有了超链接的功能。target:用于指定链接页面的打开方式,其取值有_self和_blank两种,其中_self为默认值,意为在原窗口中打开,_blank为在新窗口中打开。...翻译 2018-03-17 13:00:51 · 4700 阅读 · 0 评论 -
列表元素
1.ul元素(无序列表)<ul><li>列表项1</li><li>列表项2</li><li>列表项3</li> ......</ul> 注意:(1)在HTML5中不再支持无序元素的type属性(2)<li>与&am翻译 2018-03-17 13:23:55 · 2240 阅读 · 0 评论 -
结构元素
1.header元素header元素包含所有通常放在页面头部的内容。<header> <h1>网页主题<h1> ......</header>注意:header元素并非head元素,在HTML网页中,并不限制header元素的个数,一个网页中可以使用多个header元素,也可以为每一个内容块添加header元素...翻译 2018-03-19 12:42:25 · 2635 阅读 · 0 评论 -
link标记的常用属性
属性名 常用属性值 描述 href URL 指定引用外部文档的地址 rel stylesheet 指定当前文档与引用外部文档的关系,该属性值通常为stylesheet,表示定义一个外部样式表 type text/css text/javascript 引用外部文档的类型为CSS样式表 ...翻译 2018-03-14 15:57:08 · 1156 阅读 · 0 评论 -
hr标记的常用属性
属性名 含义 属性值 align 设置水平线的对齐方式 可选择left.right.center三种值,默认为center,居中对齐 size 设置水平线的粗细 以像素为单位,默认为2像素 color 设置水平线的颜色 可是颜色名称.十六进制#RGB.rgb(r,g,b) width 设置水平线的宽度 可以是确...翻译 2018-03-14 16:03:46 · 5826 阅读 · 0 评论 -
常用文本格式化标记
标记 显示效果 <b></b>和<strong></strong> 文字以粗体方式显示(b定义文本粗体.strong定义强调文本) <i></i>和<em></em> 文字以斜体方式显示(i定义斜体字,em定义强调文本) <s>&翻译 2018-03-14 16:11:27 · 8729 阅读 · 1 评论 -
常用特殊字符的表示(部分)
特殊字符 描述 字符的代码 空格符 &nbsp; < 小于号 &lt; > 大于号 &gt; & 和号 &amp; ¥ 人民币 &yen; © 版权 &copy; ® 注册商标 &reg; °...翻译 2018-03-14 16:24:27 · 2612 阅读 · 0 评论 -
img 标记的属性
属性 属性值 描述 src URL 图像的路径 alt 文本 图像不能显示时的替换文本 title 文本 鼠标悬停时显示的内容 width 像素 设置图像的宽度 height 像素 设置图像的高度 border 数字 设置图像边框的宽度 vspace 像素 设置图像顶部和底部...翻译 2018-03-14 16:32:51 · 13320 阅读 · 0 评论 -
文本层次语义元素
1.time元素time元素用于定义时间或日期,可以代表24小时中的某个时间。time元素不会在浏览器中呈现任何特殊效果,但是该元素能以机器可读方式对日期和时间进行编码,这样,用户能够将生日提醒或其他事件添加到日程表中,搜索引擎也能够生成更智能的搜索结果。time元素有两个属性。(1)datetime:用于定义相应的时间或日期。取值为具体时间(如14:00)或具体日期(如2015-09...翻译 2018-04-02 19:41:49 · 1408 阅读 · 0 评论 -
全局属性
1.draggable属性draggable属性用来定义元素是否可以拖动,该属性有两个值:true和false,默认为false,当值为true时表示元素选中之后可以进行拖动操作,否则不能拖动。<!doctype html><html><head><meta charset="utf-8"><title>draggabl...翻译 2018-04-02 20:18:05 · 475 阅读 · 0 评论 -
分组元素
1.figure元素和figcaption元素在HTML5中,figure元素用于定义独立的流内容(图像.图表.照片.代码等),一般指一个单独的单元。figure元素的内容应该与主内容相关,但如果被删除,也不会对文档流产生影响。figcaption元素用于为figure元素组添加标题,一个figure元素内最多允许使用一个figcaption元素,该元素应该放在figure元素的第一个或者最后...翻译 2018-03-28 09:49:28 · 659 阅读 · 0 评论 -
页面交互元素
1.detalis元素和summary元素datails元素用于描述文档或文档某个部分的细节。summary元素经常与details元素配合使用,作为details元素的第一个子元素,用于为detalis定义标题。标题是可见的,当用户单击标题时,会显示或隐藏details中的其他内容。2.progress元素progress元素可用于表示一个任务的完成进度。这个进度可以是不确定的,只是...翻译 2018-03-28 09:57:26 · 1643 阅读 · 0 评论 -
meter元素的常用属性值
属性 说明 high 定义度量的值位于哪个点被界定为高的值 low 定义度量的值位于哪个点被界定为低的值 max 定义最大值,默认值是1 min 定义最小值,默认值是0 optimum 定义说明样的度量值是最佳的值。如果该值高于high属性,则意味着值越高越好,如果该值低于low属性的值,则意味着值越低越好 value 定义度量的值...翻译 2018-03-28 10:01:02 · 4766 阅读 · 0 评论 -
引入CSS样式表的三种方法
1.行内式<标记名 style="属性1:属性值1;属性2:属性值2;属性3:属性值3;">内容</标记名> 该语法中style是标记的属性,实际上任何HTML标记都拥有style属性,用来设置行内式。其中属性和值的书写规范与CSS样式规则相同,行内式只对其所在的标记及嵌套在其中的子标记起作用。<body><h2 style=...翻译 2018-04-22 15:27:33 · 17079 阅读 · 4 评论 -
绝对路径和相对路径
1.绝对路径绝对路径就是网页上的文件或目录在硬盘上的真正路径,如"D:\HTML5+CSS3\images\logo.gif",网页上不推荐使用绝对路径,因为网页制作完成之后我们需要将所有的文件上传到服务器,这时图像文件可能在服务器的C盘,也有可能在D盘.E盘,可能在aa文件中,也有可能在bb文件夹中。也就是说,很有可能不存在"D:HTML5+CSS3\images\logo.gif"这样一个...翻译 2018-03-14 17:31:31 · 3878 阅读 · 1 评论