html5
文章平均质量分 65
html5
八十岁老将
嘿嘿
展开
-
css学习27:其他css属性和特性
1、设置元素的颜色和透明度除了background-color,border-color属性,还有属性说明值color设置元素的前景色颜色opacity设置颜色的透明度数值1.1 设置前景色color属性设置元素的前景色。一般而言,元素对color属性之于它的意义可以有不同的解读,不过实际上,color属性一般用来设置文本的颜色。a:hover { color: red;}1.2 设置元素的透明度请注意,我在前面的例子中使用了rgba函数设置原创 2021-02-11 10:46:47 · 99 阅读 · 1 评论 -
css学习26:过度,动画和变换
1、使用过渡过渡效果一般是由浏览器直接改变元素的CSS属性实现的。例如,如果使用:hover选择器,一旦用户将鼠标悬停在元素之上,浏览器就会应用跟选择器关联的属性。#banana:hover {}CSS过渡特性允许我们控制应用新属性值的速度。比如你可以选择逐渐改变示例中span元素的外观,让鼠标移到单词banana上的效果更和谐。过度属性:属性说明值transition-delay指定过渡开始之前的延迟时间时间transition-duration指定过渡的原创 2021-02-11 10:46:09 · 304 阅读 · 1 评论 -
css学习25:设置文本样式
1、应用基本文本样式1.1 对齐文本对齐属性:属性说明值text-align指定文本块的对齐方式start,end,left,right,center,justifytext-justify如果text-align属性使用了justify值,则该值会用来指定对齐文本的规则见下表text-align属性相当简单,不过,需要注意的重要一点是:可以将文本对齐到显式命名的某个边界(使用left或者right值),或者对齐到语言本来使用的边界(使用start和end值)原创 2021-02-11 10:45:38 · 237 阅读 · 1 评论 -
css学习24:创建布局
1、定位内容控制内容最简单的方式就是通过定位,这允许你使用浏览器改变元素的布局方式。定位属性:属性说明值position设置定位方法见下面表left为定位元素设置偏移量长度right百分数topautobottomz-index设置定位元素的层叠顺序数字1.1 设置定位类型position属性的值:值说明static元素为普通布局,默认值relative元素位置相对于普通位置定位a原创 2021-02-11 10:44:56 · 127 阅读 · 1 评论 -
css学习23:使用盒模型
1、为元素应用内边距应用内边距会在元素内容和边框之间添加空白。我们可以为内容盒的每个边界单独设置内边距,或者使用padding简写属性在一条声明中设置所有的值。属性说明值padding-top为顶边设置内边距长度值或百分数padding-right为右边设置内边距长度值或百分数padding-bottom为底边设置内边距长度值或百分数padding-left为左边设置内边距长度值或百分数padding简写属性,在一条声明中设置所有边的内边距原创 2021-02-11 10:44:08 · 98 阅读 · 0 评论 -
css学习22:应用轮廓
轮廓对于边框来说是可选的。轮廓最有用的地方在于短时间抓住用户对某个元素的注意力,如必须按压的按钮或者数据输入中的错误。轮廓绘制在盒子边框的外面。边框和轮廓最大的区别是:轮廓不属于页面,因此应用轮廓不需要调整页面布局。轮廓属性:属性说明值outline-color设置外围轮廓的颜色颜色outline-offset设置轮廓距离元素边框边缘的偏移量长度outline-style设置轮廓样式跟border-style属性的值一样outline-width设置原创 2021-02-11 10:43:30 · 131 阅读 · 0 评论 -
css学习21:创建盒子阴影
对盒子添加阴影效果,要通过box-shadow属性实现。值:box-shadow: hoffset voffset blur spread color inset值说明hoffset阴影的水平偏移量,是一个长度值,正值代表阴影向右偏移,负值代表阴影向左偏移voffset阴影的垂直偏移量,是一个长度值,正值代表阴影位于元素盒子下方,负值代表阴影位于元素盒子上方blur(可选)指定模糊值,是一个长度值,值越大盒子的边界越模糊。默认值为0,边界清晰spread(可原创 2021-02-10 12:00:23 · 190 阅读 · 0 评论 -
css学习20:设置元素的背景
1、设置背景颜色和图像设置元素背景的起点是设置背景颜色或者背景图像,也可以使用背景属性同时设置两者。boder:medium solid black;background-color: lightgray;background-image: url(t.png);background-size: 40px 40px;background-repeat: repeat-x;使用background-repeat属性可以实现这种效果重复。值说明repeat-x水平方向平铺原创 2021-02-10 11:59:55 · 534 阅读 · 0 评论 -
css学习19:应用边框样式
简单边框有三个关键属性: border-width、border-style和border-color。基本边框属性属性说明border-width设置边框的宽度border-style设置绘制边框使用的样式border-color设置边框的颜色border-width: 5px;border-style: solid;border-color: black;1、定义边框宽度border-width属性的取值可能是常规CSS长度值,可能是边框绘制区域原创 2021-02-10 11:59:20 · 317 阅读 · 0 评论 -
css学习18:其他伪类选择器
1、否定选择器否定选择器可以对任意选择取反。这个选择器可谓相当实用,不过却常常被忽略。a:not([href*="apress"]) { padding: 4px;}2、:empty选择器:empty选择器匹配没有定义任何子元素的元素。3、:lang选择器:lang选择器匹配基于lang全局属性值的元素。:lang(en) { padding: 4px;}<a lang="en-us"></a>该选择器匹配具有lang属性代表其内容采用英语表原创 2021-02-10 11:58:04 · 129 阅读 · 0 评论 -
css学习17:动态伪类选择器
1、:link和:visited选择器:link选择器匹配超级链接,:visited选择器匹配用户已访问的超级链接。选择器说明:link选取未访问的链接元素:visited选取用户已访问的链接元素对于用户访问过的链接,可在浏览器中设置保留已访问状态的时间。当用户清除浏览器历史记录,或者历史记录自然超时,链接会返回未访问状态。:link {}:visited {}2、:hover选择器:hover选择器匹配用户鼠标悬停在其上的任意元素。鼠标在HTML页面内移动原创 2021-02-10 11:57:30 · 533 阅读 · 0 评论 -
css学习16:UI位类选择器
选择器内容:enabled选取已启用的元素:disabled选取被禁用的元素:checked选取所有选中的复选框和单选按钮:default选取默认元素:valid选取基于输入验证判定的有效或者无效的input元素:invalid:in-range选取被限定在指定范围之内或者之外的input元素:out-of-range:required根据是否允许使用required属性选取input元素:optional:opt...原创 2021-02-10 11:56:55 · 380 阅读 · 0 评论 -
css学习15:结构性伪类选择器
1、根元素选择器:root选择器匹配文档中的根元素。它可能是用得最少的一个伪类选择器,因为总是返回html元素。:root { border: thin;}2、子元素选择器选择器说明:first-child选取元素的第一个子元素:last-child选取元素的最后一个子元素:only-child选取元素的唯一一个子元素:only-of-type选取属于父元素的特定类型的唯一子元素2.1 :first-child选择器:first-ch原创 2021-02-10 11:56:22 · 234 阅读 · 0 评论 -
css学习14:伪元素选择器
伪选择器分两种:伪元素和伪类。1、::first-line选择器: :first-line选择器匹配文本块的首行。<style type="text/css"> ::first-line { color: white; }</style><p> ahahah aadhfasdf asdfadsf</p>无论窗口怎么变,都只应用在第一行。2、::first-letter选择器选取文本块的原创 2021-02-10 11:55:49 · 211 阅读 · 0 评论 -
css学习13:复合选择器
组合使用不同的选择器可以匹配更特定的元素。有的复合选择器能将目标样式应用到更多元素,有的复合选择器则会锁定更少元素,总之会让你的选择非常具体。1、并集选择器创建由逗号分隔的多个选择器可以将样式应用到单个选择器匹配的所有元素。a,[lang|="en"] { border:thin;}2、后代选择器后代选择器用于选择包含在其他元素中的元素。p span { border:thin;}3、选择子元素子代选择器跟后代选择器很像,不过只选择匹配元素中的直接后代。body &原创 2021-02-10 11:55:17 · 69 阅读 · 0 评论 -
css学习12:css基本选择器
1、选择所有元素* { border:this black;}2、根据类型选择元素a { border: thin;}3、根据类选择元素.class2 { border:this;}*.class2与.class2是等价的。4、根据ID选择元素#myid { border: thin;}5、根据属性选择元素[href] { border: thin;}选择器说明[attr]选取定义了attr属性,且属性值原创 2021-02-10 11:54:45 · 62 阅读 · 0 评论 -
css学习11:其他属性
属性说明border-collapse指定表格相邻单元格的边框的显示样式border-spacing指定相邻单元格的边框的距离caption-side指定表格标题的位置color设置元素的前景色cusor指定光标的形状empty-cells指定是否显示表格中的空单元格list-style设置列表样式的简写属性list-style-image指定列表项标记使用的图像list-style-position指定列表项标记相对于列...原创 2021-02-09 14:02:57 · 69 阅读 · 0 评论 -
css学习10:过度,动画和变换属性
属性说明@keyframes为动画指定一个以上的关键帧animation设置动画的简写属性animation-delay指定动画开始前的延迟时间animation-direction指定动画重复播放时的播放方向animation-duration指定动画持续时间animation-iteration-count指定动画的循环次数animation-name指定用于动画的关键帧集合的名称animation-play-state指定动...原创 2021-02-09 14:02:23 · 77 阅读 · 0 评论 -
css学习9:文本属性
属性说明@font-face指定网页使用的字体direction指定文本方向font在一条声明中设置文本字体、大小和颜色的简写属性font-family指定文本所用的字体系列,排在前面的优先使用font-size指定字体大小font-style指定采用正常字体、斜体还是倾斜字体font-variant指定字体是否以小型大写字母显示font-weight设置文本粗细letter-spacing设置字母间距line-he...原创 2021-02-09 14:01:45 · 84 阅读 · 0 评论 -
css学习8:布局属性
属性说明bottom设置元素下外边距边界与包含块下边界之间的偏移column-count指定多列布局的列数column-fill多列布局中列与列之间的内容如何分布column-gap指定多列布局中列与列之间的间隔column-rule多列布局中定义列与列之间的规则的简写属性column-rule-color设置多列布局中的颜色规则column-rule-style设置多列布局中的样式规则column-rule-width设置多列布...原创 2021-02-09 14:01:13 · 92 阅读 · 0 评论 -
css学习7:盒模型属性
属性说明box-sizing设置要应用盒子尺寸相关属性的元素clear设置盒子的左边界、右边界或左右两个边界不允许出现浮动元素display设置元素盒子的类型float将元素移动到其包含块的左边界或者右边界,或者另一个浮动元素的边界height设置元素盒子的高度margin设置元素盒子四个外边距宽度的简写属性margin-bottom设置盒子下外边距的宽度margin-left设置盒子左外边距的宽度margin-right...原创 2021-02-09 14:00:25 · 126 阅读 · 0 评论 -
css学习6:边框和背景属性
属性说明background设置所有背景值的简写属性background-attachment设置元素的背景附着属性,决定背景图片是否随页面一起滚动background-clip设置元素背景颜色和图像的裁剪区域background-color设置背景颜色background-image设置元素背景图像background-origin设置背景图像绘制的起始位置background-position设置背景图像在元素盒子中的位置bac...原创 2021-02-09 13:59:37 · 165 阅读 · 0 评论 -
css学习5:选择器简明参考
选择器说明*选取所有元素<type>选取指定类型的元素.<class>选取指定类的元素#<id>选取id属性为指定值的元素[attr]选取定义了attr属性,且属性值任意的元素[attr=“val”]选取定义了attr属性,且属性值为val的元素[attr^=“val”]选取定义了attr属性,且属性值以val字符串打头的元素[attr$=“val”]选取定义了attr属性,且属性值以val字符...原创 2021-02-09 13:59:02 · 99 阅读 · 0 评论 -
css学习4:盒模型
CSS中的一个基本概念是盒模型(box model )。可见元素会在页面中占据一个矩形区域,该区域就是元素的盒子( box),由四部分组成。元素盒子有两个部分是可见的:内容和边框。内边距是内容和边框之间的空间,外边距是边框和页面上其他元素之间的空间。元素还可以包含其他元素。这种情况下,父元素的内容盒子称为子元素的块容器( containerblock ),通常称为容器。...原创 2021-02-09 13:58:39 · 127 阅读 · 0 评论 -
css学习3:颜色,长度,单位,有用工具介绍
1、css中的颜色颜色在网页中的作用非常重要。在CSS中设置颜色有好几种方法。最简单的办法是使用规定的颜色名称,或者设置红、绿、蓝三种颜色成分的值(十进制或十六进制)。设置颜色成分值时,十进制值以逗号分隔(例如0,0,0),十六进制值前面通常要加上一个#符号(例如#mIf,它代表白色)。1.1 表示更复杂的颜色颜色名称和简单的十六进制数不是表示颜色的唯一方式。CSS中还可以用一些函数选择颜色。函数说明示例rgb(r,g,b)用RGB模型表示颜色color:rgb(11,12原创 2021-02-09 13:57:48 · 255 阅读 · 0 评论 -
css学习2:样式的层叠和继承
1、浏览器样式浏览器样式(更恰当的名称是用户代理样式)是元素尚未设置样式时浏览器应用在它身上的默认样式。这些样式因浏览器而略有差异,不过大体一致。以a元素(超链接)为例,想想没有特别为它定义样式时浏览器会怎样显示。2、用户样式大多数浏览器都允许用户定义自己的样式表。这类样式表中包含的样式称为用户样式。这个功能用的人不多,不过,那些要定义自己的样式表的人往往比较看重这一点,一个特别的原因是这可以让有生理不便的人更容易使用网页。各种浏览器都有自己管理用户样式的方式。以谷歌的Chrome为例,它会在用户的原创 2021-02-09 11:49:50 · 152 阅读 · 0 评论 -
css学习1:定义和应用样式
CSS样式由一条或多条以分号隔开的样式声明组成。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KqWqI2tl-1612793570709)(D:\u(backups)]\note\css\img\1-1.JPG)1、使用元素内嵌样式使用全局属性style。<a href="http://apress.com" style="backgroud-color:grey; color:white">visit</a>2、使用文档内嵌样式直接对原创 2021-02-08 22:15:24 · 267 阅读 · 2 评论 -
html5学习19:嵌入内容
1、嵌入图像img元素允许我们在HTML文档里嵌入图像。属性:src,alt,height,width,usemap,ismap<img src="te.png" alt="text image" width="200" height="200"/>src属性指定了图像的URL,alt定义了img元素的备用内容。图像无法显示的时候就呈现alt里面的内容。1.1 在超链接里嵌入图像img元素的一个常见用法是结合a元素(第8章已介绍过)创建一个基于图像的超链接。它类似表单里基于图像的提原创 2021-02-08 19:26:45 · 265 阅读 · 0 评论 -
html5学习18:其他表单元素及输入验证
1、使用其他表单元素1.1 生成选项列表select元素可以用来生成一个选项列表供用户选择。它比radiobutton型input元素更紧凑,更适合于选项较多的情形。该元素的name 、 disabled、form 、 autofocus和required属性与input元素的同名属性类似。size属性用来设定要显示给用户的选项数目。元素如果设置了multiple属性的话,那么用户就能一次选择多个选项。内容有option和optgroup元素<select id="fave" name="f原创 2021-02-08 14:44:45 · 213 阅读 · 0 评论 -
html5学习17:定制input元素
1、用input元素输入文字type属性设置为text的input元素在浏览器中显示为一个单行文本框。上一章用到的input元素就是这个样子,这是未设置type属性情况下的默认形式。text型input元素可用的额外属性属性说明dirname指定元素内容文字方向的名称list指定为文本框提供建议值的datalist元素,其值为datalist元素的id值maxlength设定用户可以在文本框中输入的字符的最大数目pattern指定一个用于输入验证的正则表达原创 2021-02-08 14:11:19 · 733 阅读 · 0 评论 -
html5学习16:表单
1、制作基本表单制作一个基本的表单需要三个元素: form、input和button元素。<form method="post" action="http://titan:8080/form"> <input name="fave"/> <button> Submit vote </button></form>1.1 定义表单1)form元素可以流元素的元素的子元素,但form元素不能是其他fo原创 2021-02-07 22:24:24 · 698 阅读 · 0 评论 -
html5学习15:表格元素
1、基本的表格有三个元素是每个表格都必须要有的: table、tr和td。元素table,是HTML用以支持表格式内容的核心元素,它表示HTML文档中的表格。1.1 table元素属性:border包含:caption,colgroup,thead,tbody,tfoot,tr,th,td1.2 tr元素父元素:table,thead,tfoot,tbody内容:td,th1.3 td元素属性:colspan,rowspan,headers<table> <tr原创 2021-02-07 19:31:39 · 2444 阅读 · 0 评论 -
html5学习14:文档分节
1、h1~h6,添加基本标题h1~h6<h1>test</h1>2、hgroup元素,隐藏子标题hgroup元素可以用来将几个标题元素作为一个整体处理,以免搅乱HTML文档的大纲。hgroup主要用来解决子标题的问题。通过缩小hgroup元素中两个标题元素的间距将二者拉拢在一起,并且为二者设置同样的背景色,可以在外观上明确揭示二者的关系。3、生成节section元素是HTML5中新增的。顾名思义,它表示的是文档中的一节。使用标题元素的时候实际上也生成了隐含的节。用s原创 2021-02-07 14:51:35 · 171 阅读 · 0 评论 -
html5学习13:组织内容
1、对内容分组HTML要求浏览器将连在一起的几个空白字符折算为一个空格。一般而言,这种做法是有道理的,因为可以把HTML文档的布局与文档内容在浏览器窗口中的布局分开。2、建立段落p元素代表段落。段落包含着一个或多个相关句子,这些句子围绕的是一个观点或论点。组成一个段落的句子也可以涉及多个论点,但它们都有一些共同的主题。<p> i like you.</p>3、div元素div元素没有具体的含义。找不到其他恰当的元素可用时可以使用这个元素为内容建立结构并赋予其含原创 2021-02-07 13:48:45 · 151 阅读 · 0 评论 -
html5学习12:其他文本元素
1、br元素,强制换行把后续的内容转移到新行上。this is,<br/>haha.2、wbr元素,安全换行html5新增的,用来表示长度超过当前浏览器窗口的内容适合在此换行,到底换不换由浏览器决定,该元素只不过是对恰当的换行位置的建议。this is a very long word: super<wbr>califragilistic<wbr>expialidocious.3、用于输入输出的文字元素元素说明code表示计算机代码原创 2021-02-07 12:43:11 · 165 阅读 · 0 评论 -
html5学习11:基本的文字元素标记内容
1、b元素,表示关键词和产品名称标记一段文字,但不表示特别强调或重要性<b>apples</b>2、em元素,加以强调对一段文字的强调,可以用来 向读者提供关于句子或段落含义的一种语境。<em>apples</em>3、i元素,表示外文词语或科技术语<i>apples</i>4、s元素,表示一段文字不在正确或准确<s>apples</s>5、strong元素,表示重要的文字<s原创 2021-02-07 11:13:57 · 232 阅读 · 0 评论 -
html5学习10:生成超链接
1、a元素属性:href,hreflang,media,rel,target,type该元素现在既能包含短语内容也能包含流内容。media属性是新增的。HTML4中已弃用的target属性现在又被恢复。在HTML5中,不含href值的a元素作为超链接的占位符使用。原有的id、coords、shape、urn、charset、methods、rev属性现已不再使用属性表:属性说明href指定a元素所指资源的URLhreflang说明所链接资源使用的语言media说原创 2021-02-07 11:02:46 · 743 阅读 · 0 评论 -
html5学习9:HTML5文档结构详解
1、基本的文档结构文档元素只有4个,但是任何HTML文档都需要这些元素。1.1 DOCTYPE元素每个HTML文档都必须以DOCTYPE元素开头,通知浏览器要处理的是HTML内容用来标记文档内容的HTML所属的版本HTML5中只有一种写法:<!DOCTYPE HTML>注意,没版本号不用写,没有结束标签,把它放在开头就好1.2 html元素也叫根元素。有个manifest属性。<!DOCTYPE HTML><html> 内容</ht原创 2021-02-06 23:30:48 · 1563 阅读 · 0 评论 -
html5学习8:HTML5元素速览
1、文档和元数据元素元素说明base设置相对URL的基础body表示HTML文档的内容DOCTYPE表示HTML文档的开始head包含文档的元数据html表示文档中HTML部分的开始link定义与外部资源的关系meta提供关于文档的信息noscript包含浏览器禁用脚本或不支持脚本时显示的内容script定义脚本程序,可以是文档内嵌的也可以是外部文件中的style定义CSS样式title设置文档标题原创 2021-02-06 20:55:51 · 129 阅读 · 0 评论 -
html5学习7:HTML5元素背景知识
1、语义与呈现分离HTML5中的一大主要变化是基本信念方面的:将元素的语义与元素对其内容呈现结果的影响分开。HTML元素负责文档内容的结构和含义,内容的呈现则由应用于元素上的CSS样式控制。HTML文档的用户未必都需要显示它们,不掺合呈现方面的事有助于简化HTML的处理以及从中自动提炼含义。HTML5中新增的大多数元素都有具体的含义。例如,article元素可以用来表示适于联合供稿的独立成篇的内容,而figure元素表示的自然是图片。HTML4中的许多元素产生在呈现与含义分离观念形成之前。这造成了一原创 2021-02-06 20:55:17 · 100 阅读 · 0 评论