HTML+CSS
g41173985
这个作者很懒,什么都没留下…
展开
-
重要性
我们在做网页代码的时,有些特殊的情况需要为某些样式设置具有最高权值,怎么办?这时候我们可以使用!important来解决。如下代码:p{color:red!important;}p{color:green;}三年级时,我还是一个胆小如鼠的小女孩。这时 p 段落中的文本会显示的red红色。注意:!important要写在分号的前面这里注意当网页制作者不设置cs原创 2015-10-31 02:14:36 · 458 阅读 · 0 评论 -
CSS注释代码
就像在Html的注释一样,在CSS中也有注释语句:用/*注释语句*/来标明(Html中使用)。就像下面代码:原创 2015-10-31 00:11:44 · 507 阅读 · 0 评论 -
CSS代码语法
css 样式由选择符和声明组成,而声明又由属性和值组成,如下图所示:选择符:又称选择器,指明网页中要应用样式规则的元素,如本例中是网页中所有的段(p)的文字将变成蓝色,而其他的元素(如ol)不会受到影响。声明:在英文大括号“{}”中的的就是声明,属性和值之间用英文冒号“:”分隔。当有多条声明时,中间可以英文分号“;”分隔,如下所示:p{font-size:12px;co原创 2015-10-31 00:10:19 · 326 阅读 · 0 评论 -
CSS样式的优势
为什么使用css样式来设置网页的外观样式呢?右边编辑器是一段文字,我们想把“超酷的互联网”、“服务及时贴心”、“有趣易学”这三个短语的文本颜色设置为红色,这时就 可以通过设置样式来设置,而且只需要编写一条css样式语句。第一步:把这三个短语用括起来。(见右边代码编辑器13行)第二步:写入下列代码:(见右边代码编辑器7-8行)span{ color:red;}原创 2015-10-31 00:06:42 · 412 阅读 · 0 评论 -
类选择器
类选择器在css样式编码中是最常用到的,如右侧代码编辑器中的代码:可以实现为“胆小如鼠”、“勇气”字体设置为红色。语法:.类选器名称{css样式代码;}注意:1、英文圆点开头2、其中类选器名称可以任意起名(但不要起中文噢)使用方法:第一步:使用合适的标签把要修饰的内容标记起来,如下:胆小如鼠第二步:使用class="类选择器名称"为标原创 2015-10-31 00:30:29 · 333 阅读 · 0 评论 -
使用<a>标签,链接到另一个页面
使用标签可实现超链接,它在网页制作中可以说是无处不在,只要有链接的地方,就会有这个标签。语法:链接显示的文本例如:click here!上面例子作用是单击click here!文字,网页链接到http://www.imooc.com这个网页。title属性的作用,鼠标滑过链接文字时会显示这个属性的文本内容。这个属性在实际网页开发中作用很大,主要方便搜索引擎了解链原创 2015-10-15 01:39:12 · 598 阅读 · 0 评论 -
caption标签,为表格添加标题和摘要
表格还是需要添加一些标签进行优化,可以添加标题和摘要。代码如下:摘要摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化),使搜索引擎更好的读懂表格内容,还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。 语法:<table summary="表格简介文本">标题用以描述表格内容,标题的显示位置:表格上方。 语法:原创 2015-10-15 01:35:21 · 407 阅读 · 0 评论 -
<pre>标签为你的网页加入大段代码
在上节中介绍加入一行代码的标签为,但是在大多数情况下是需要加入大段代码的,如下图:怎么办?不会是每一代码都加入一个标签吧,没有这么复杂,这时候就可以使用标签。语法:语言代码段 标签的主要作用:预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。如下代码: var message="欢迎"; for(var i=1;i<=10;i原创 2015-10-15 00:59:57 · 464 阅读 · 0 评论 -
<hx>标签,为你的网页添加标题
文章的段落用标签,那么文章的标题用什么标签呢?在本节我们将使用标签来制作文章的标题。标题标签一共有6个,h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。是最高的等级。语法:标题文本 (x为1-6)文章的标题前面已经说过了,可以使用标题标签,另外网页上的各个栏目的标题也可使用它们。如下图为腾讯网站。原创 2015-10-14 23:53:36 · 1304 阅读 · 0 评论 -
<p>标签
开始学习标签,添加段落如果想在网页上显示文章,这时就需要标签了,把文章的段落放到标签中。语法:段落文本 注意一段文字一个标签,如在一篇新闻文章中有3段文字,就要把这3个段落分别放到3个标签中。如下图所示。在浏览器中显示的效果:标签的默认样式,可以在上图中看出来,段前段后都会有空白,如果不喜欢这个空白,可以用css样式来转载 2015-10-14 23:48:01 · 461 阅读 · 0 评论 -
了解HTML的代码注释
什么是代码注释?代码注释的作用是帮助程序员标注代码的用途,过一段时间后再看你所编写的代码,就能很快想起这段代码的用途。代码注释不仅方便程序员自己回忆起以前代码的用途,还可以帮助其他程序员很快的读懂你的程序的功能,方便多人合作开发网页代码。语法:<!--注释文字 -->原创 2015-10-14 23:36:56 · 330 阅读 · 0 评论 -
内联式css样式,直接写在现有的HTML标签中
CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式、嵌入式和外部式三种。这一小节先来讲解内联式。内联式css样式表就是把css代码直接写在现有的HTML标签中,如下面代码:这里文字是红色。注意要写在元素的开始标签里,下面这种写法是错误的:这里文字是红色。style="color:red">并且css样式代码要写在style="原创 2015-10-31 00:13:55 · 1415 阅读 · 0 评论 -
三种方法的优先级
有的小伙伴问了,如果有一种情况:对于同一个元素我们同时用了三种方法设置css样式,那么哪种方法真正有效呢?在右边编辑器就出现了这种情况1、使用内联式CSS设置“超酷的互联网”文字为粉色。2、然后使用嵌入式CSS来设置文字为红色。3、最后又使用外部式设置文字为蓝色(style.css文件中设置)。但最终你可以观察到“超酷的互联网”这个短词的文本被设置为了粉色。因为这三原创 2015-10-31 00:24:48 · 700 阅读 · 0 评论 -
什么是选择器?
每一条css样式声明(定义)由两部分组成,形式如下:选择器{ 样式;}在{}之前的部分就是“选择器”,“选择器”指明了{}中的“样式”的作用对象,也就是“样式”作用于网页中的哪些元素。比如右侧代码编辑器中第7行代码中的“body”就是选择器。原创 2015-10-31 00:25:59 · 355 阅读 · 0 评论 -
层叠
我们来思考一个问题:如果在html文件中对于同一个元素可以有多个css样式存在并且这多个css样式具有相同权重值怎么办?好,这一小节中的层叠帮你解决这个问题。层叠就是在html文件中对于同一个元素可以有多个css样式存在,当有相同权重的样式存在时,会根据这些css样式的前后顺序来决定,处于最后面的css样式会被应用。如下面代码:p{color:red;}p{color:gre原创 2015-10-31 02:11:20 · 416 阅读 · 0 评论 -
特殊性
有的时候我们为同一个元素设置了不同的CSS样式代码,那么元素会启用哪一个CSS样式呢?我们来看一下面的代码:p{color:red;}.first{color:green;}三年级时,我还是一个胆小如鼠的小女孩。p和.first都匹配到了p这个标签上,那么会显示哪种颜色呢?green是正确的颜色,那么为什么呢?是因为浏览器是根据权值来判断使用哪种css样式的,权值高的就使用哪种cs原创 2015-10-31 01:55:18 · 464 阅读 · 0 评论 -
CSS继承
CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代。比如下面代码:如某种颜色应用于p标签,这个颜色设置不仅应用p标签,还应用于p标签中的所有子元素文本,这里子元素为span标签。p{color:red;}三年级时,我还是一个胆小如鼠的小女孩。可见右侧结果窗口中p中的文本与span中的文本都设置为了红色。但原创 2015-10-31 01:45:39 · 404 阅读 · 0 评论 -
分组选择符
当你想为html中多个标签元素设置同一个样式时,可以使用分组选择符(,),如下代码为右侧代码编辑器中的h1、span标签同时设置字体颜色为红色:h1,span{color:red;}它相当于下面两行代码:h1{color:red;}span{color:red;}原创 2015-10-31 01:40:19 · 305 阅读 · 0 评论 -
伪类选择符
更有趣的是伪类选择符,为什么叫做伪类选择符,它允许给html不存在的标签(标签的某种状态)设置样式,比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色:a:hover{color:red;}上面一行代码就是为 a 标签鼠标滑过的状态设置字体颜色变红。这样就会使第一段文字内容中的“胆小如鼠”文字加入鼠标滑过字体颜色变为红色特效。关于伪选择符: 关于伪类原创 2015-10-31 01:32:57 · 429 阅读 · 0 评论 -
通用选择器
通用选择器是功能最强大的选择器,它使用一个(*)号指定,它的作用是匹配html中所有标签元素,如下使用下面代码使用html中任意标签元素字体颜色全部设置为红色:* {color:red;}原创 2015-10-31 01:30:29 · 390 阅读 · 0 评论 -
包含(后代)选择器
包含选择器,即加入空格,用于选择指定标签元素下的后辈元素。如右侧代码编辑器中的代码:.first span{color:red;}这行代码会使第一段文字内容中的“胆小如鼠”字体颜色变为红色。请注意这个选择器与子选择器的区别,子选择器(child selector)仅是指它的直接后代,或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后代选择器通过空原创 2015-10-31 01:26:36 · 459 阅读 · 0 评论 -
子选择器
还有一个比较有用的选择器子选择器,即大于符号(>),用于选择指定标签元素的第一代子元素。如右侧代码编辑器中的代码:.food>li{border:1px solid red;}这行代码会使class名为food下的子元素li(水果、蔬菜)加入红色实线边框。水果 香蕉 苹果 梨原创 2015-10-31 01:07:19 · 308 阅读 · 0 评论 -
类和ID选择器的区别
学习了类选择器和ID选择器,我们会发现他们之间有很多的相似处,是不是两者可以通用呢?我们不要着急先来总结一下他们的相同点和不同点:相同点:可以应用于任何元素不同点:1、ID选择器只能在文档中使用一次。与类选择器不同,在一个HTML文档中,ID选择器只能使用一次,而且仅一次。而类选择器可以使用多次。下面代码是正确的: 三年级时,我还是一个class="stress">转载 2015-10-31 01:01:31 · 307 阅读 · 0 评论 -
ID选择器
在很多方面,ID选择器都类似于类选择符,但也有一些重要的区别:1、为标签设置id="ID名称",而不是class="类名称"。2、ID选择符的前面是井号(#)号,而不是英文圆点(.)。右侧代码编辑器中就是一个ID选择符的完整实例。原创 2015-10-31 00:35:39 · 350 阅读 · 0 评论 -
标签选择器
标签选择器其实就是html代码中的标签。如右侧代码编辑器中的、、、、。例如下面代码:p{font-size:12px;line-height:1.6em;}上面的css样式代码的作用:为p标签设置12px字号,行间距设置1.6em的样式。原创 2015-10-31 00:27:09 · 392 阅读 · 0 评论 -
认识<img>标签,为网页插入图片
在网页的制作中为使网页炫丽美观,肯定是缺少不了图片,可以使用标签来插入图片。语法:<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">举例:<img src = "myimage.gif" alt = "My Image" title = "My Image" />讲解:1、src:标识图像的位置;2、alt:原创 2015-10-15 01:53:41 · 602 阅读 · 0 评论 -
mailto在网页中链接Email地址
标签还有一个作用是可以链接Email地址,使用mailto能让访问者便捷向网站管理者发送电子邮件。我们还可以利用mailto做许多其它事情。下面一一进行讲解,请看详细图示:注意:如果mailto后面同时有多个参数的话,第一个参数必须以“?”开头,后面的参数每一个都以“&”分隔。下面是一个完整的实例:在浏览器中显示的结果:发送点击链接会打开电子邮件应用,并自动填写原创 2015-10-15 01:49:06 · 2251 阅读 · 0 评论 -
用css样式,为表格加入边框
Table 表格在没有添加 css 样式之前,是没有边框的。这样不便于我们后期合并单元格知识点的讲解,所以在这一节中我们为表格添加一些样式,为它添加边框。在右侧代码编辑器中添加如下代码:table tr td,th{border:1px solid #000;}上述代码是用 css 样式代码(后面章节会详细讲解),为th,td单元格添加粗细为一个像素的黑色边框。结果窗口原创 2015-10-15 01:26:55 · 1082 阅读 · 0 评论 -
table标签
有时候我们需要在网页上展示一些数据,如某公司想在网页上展示公司的库存清单。如下表:想在网页上展示上述表格效果可以使用以下代码:创建表格的四个元素:table、tbody、tr、th、td1、…:整个表格以标记开始、标记结束。2、…:当表格内容非常多时,表格会下载一点显示一点,但如果加上标签后,这个表格就要等表格内容全部下载完才原创 2015-10-15 01:19:07 · 353 阅读 · 0 评论 -
<address>标签,为网页加入地址信息
一般网页中会有一些网站的联系地址信息需要在网页中展示出来,这些联系地址信息如公司的地址就可以标签。也可以定义一个地址(比如电子邮件地址)、签名或者文档的作者身份。语法:联系地址信息如:文档编写:lilian 北京市西城区德外大街10号本文的作者:lilian 在浏览器上显示的样式为斜体,如果不喜欢斜体,当然可以,可以在后面的课程中使用 css 样式原创 2015-10-15 00:31:08 · 520 阅读 · 0 评论 -
使用<span>标签为文字设置单独样式
这一小节讲解标签,我们对、、这三个标签进行一下总结:1. 和标签是为了强调一段话中的关键字时使用,它们的语义是强调。2. 标签是没有语义的,它的作用就是为了设置单独的样式用的。如果现在我们想把上一小节的第一段话“美国梦”三个字设置成blue(蓝色),但注意不是为了强调“美国梦”,而只是想为它设置和其它文字不同的样式(并不想让屏幕阅读器对“美国梦”这三个字加重音读出),所以这原创 2015-10-15 00:08:00 · 492 阅读 · 0 评论 -
使用下拉列表框进行多选
下拉列表也可以进行多选操作,在标签中设置multiple="multiple"属性,就可以实现多选功能,在 widows 操作系统下,进行多选时按下Ctrl键同时进行单击(在 Mac下使用 Command +单击),可以选择多个选项。如下代码:在浏览器中显示的结果:原创 2015-10-22 17:57:23 · 1057 阅读 · 0 评论 -
文本输入框、密码输入框
文本输入框、密码输入框当用户要在表单中键入字母、数字等内容时,就会用到文本输入框。文本框也可以转化为密码输入框。语法: 1、type: 当type="text"时,输入框为文本输入框; 当type="password"时, 输入框为密码输入框。2、name:为文本框命名,以备后台程序ASP 、PHP使用。转载 2015-10-22 15:19:49 · 434 阅读 · 0 评论 -
使用提交按钮,提交数据
在表单中有两种按钮可以使用,分别为:提交按钮、重置。这一小节讲解提交按钮:当用户需要提交表单信息到服务器时,需要用到提交按钮。语法:type="submit" value="提交">type:只有当type值设置为submit时,按钮才有提交作用value:按钮上显示的文字举例:在浏览器中显示的结果:原创 2015-10-22 18:00:05 · 677 阅读 · 0 评论 -
多行输入文本域
当用户需要在表单中输入大段文字时,需要用到文本输入域。语法: rows="行数" cols="列数">文本1、标签是成对出现的,以开始,以结束。2、cols :多行输入域的列数。3、rows :多行输入域的行数。4、在标签之间可以输入默认值。举例: 联系我们 在这里输入内容...在浏览器中显示结果:原创 2015-10-22 15:33:42 · 1006 阅读 · 0 评论 -
使用表单标签,与用户交互
使用表单标签,与用户交互网站怎样与用户进行交互?答案是使用HTML表单(form)。表单是可以把浏览者输入的数据传送到服务器端,这样服务器端程序就可以处理表单传过来的数据。语法:讲解:1. :标签是成对出现的,以开始,以结束。2.action :浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。3.metho原创 2015-10-22 15:11:58 · 312 阅读 · 0 评论 -
使用重置按钮,重置表单信息
当用户需要重置表单信息到初始时的状态时,比如用户输入“用户名”后,发现书写有误,可以使用重置按钮使输入框恢复到初始状态。只需要把type设置为"reset"就可以。语法:type="reset" value="重置">type:只有当type值设置为reset时,按钮才有重置作用value:按钮上显示的文字举例:在浏览器中显示的结果:原创 2015-10-22 18:01:53 · 921 阅读 · 0 评论 -
使用单选框、复选框,让用户选择
在使用表单设计调查表时,为了减少用户的操作,使用选择框是一个好主意,html中有两种选择框,即单选框和复选框,两者的区别是单选框中的选项用户只能选择一项,而复选框中用户可以任意选择多项,甚至全选。请看下面的例子:语法:1、type: 当 type="radio" 时,控件为单选框 当 type="checkbox" 时,控件为复选框2、value原创 2015-10-22 17:28:54 · 500 阅读 · 0 评论 -
method="get/post",两种方式的区别
Form中的get和post方法,在数据传输过程中分别对应了GET和POST方法。二者主要区别如下:1、Get将表单中数据的按照variable=value的形式,添加到action所指向的URL后面,并且两者使用“?”连接,而各个变量之间使用“&”连接;Post是将表单中的数据放在form的数据体中,按照变量和值相对应的方式,传递到action所指向URL。如下形式:原创 2015-10-22 15:13:25 · 357 阅读 · 0 评论 -
form表单中的label标签
小伙伴们,你们在前面学习表单各种控件的时候,有没有发现一个标签--label,这一小节就来揭晓它的作用。label标签不会向用户呈现任何特殊效果,它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本,就会触发此控件。就是说,当用户单击选中该label标签时,浏览器就会自动将焦点转到和标签相关的表单控件上(就自动选中和该label标签相关连的表单控件上)。语法:原创 2015-10-28 23:34:43 · 1114 阅读 · 0 评论