用html制作一个个人网页要求有五个链接,每页都有css格式(网页制作的要求,关键词优化)

时间:2024-05-01 05:20:11 作者 : 石家庄SEO 分类 : 关键词优化
  • TAG :

    %E7%94%A8html%E5%88%B6%E4%BD%9C%E4%B8%80%E4%B8%AA%E4%B8%AA%E4%BA%BA%E7%BD%91%E9%A1%B5%E8%A6%81%E6%B1%82%E6%9C%89%E4%BA%94%E4%B8%AA%E9%93%BE%E6%8E%A5%EF%BC%8C%E6%AF%8F%E9%A1%B5%E9%83%BD%E6%9C%89css%E6%A0%BC%E5%BC%8F

方法/步骤1CSS是由选择器加声明组成的。比如:h1{color:red;}h1就是选择器,意思是只要遇到h1,就使用该CSS的规则color:red; :这个事声明color:这个是属性red:这个是值2OK,我们先来分析选择器。END一.选择器1选择器的种类很多,各有各的作用。我们来一一讲解。标签选择器class选择器id选择器全局选择器组合选择器伪类选择器2标签选择器顾名思义,HTML中有许多标签,而标签选择器就是用来给标签直接申明样式的,简单、实用、常用。举例:p{color:red;}只要是p标签,其P标签内部的颜色,都是红色。如图代码<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style>p{ color:red;}</style></head><body><p>嘿嘿哦嘿嘿呀哦嘿嘿哦</p></body>其中,<style>标签是样式标签,请将CSS放在其中(这部分内容后续会介绍,这里只是先提一下)3看网页效果4class选择器也叫做类选择器,直接说概念估计你也不明白,直接上例子吧。举例:.alsp{color:red;}这就是一个class选择器,意思是有一种CSS的样式,其名字是alsp,谁想用谁用。看代码:<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">.alsp{color:red;}</style></head><body><p class="alsp">嘿嘿哦嘿嘿呀哦嘿嘿哦</p><ol class="alsp"><li>嘿啥嘿</li><li>我想嘿嘿</li><li>专制各种不服</li></ol><p>世界为亡,死不投降</p></body>5看网页效果通过.alsp定义一个class选择器。在后面的代码中,哪个标签想用,就用class="alsp"去调用,就可以使用这件“衣服”来修饰自己了6ID选择器ID和class很像,但是和class有一个区别。class像姓名,两个人是可以同名的,但是id像身份证,只有一个人可以使用。例如:#alsp{color:red;}OK,上代码:#alsp{color:red;}</style></head><body><p id="alsp">嘿嘿哦嘿嘿呀哦嘿嘿哦</p><ol><li>嘿啥嘿</li><li>我想嘿嘿</li><li>专制各种不服</li></ol><p>世界为亡,死不投降</p></body>7看网页效果只能有一个标签使用该id,或者说该标签专属ID8全局选择器{margin:0; padding:0;}这个很简单,前面用个来表示,整个网页都会使用。这句话也是网页基本都要添加的,什么意思呢?自己试试看吧。9组合选择器组合选择,小编是非常喜欢使用的,原因无他,懒而已。他可以减少代码量,并且方便、易读。不过组合选择器的组合方式比较多,但也多很好理解。1)群模式比如:h1{color:red; font-size:14px;}p{color:red; font-size:14px;}a{color:red; font-size:14px;}这三个虽然标签不同,但是样式是一模一样的,所以,可以这样写:h1,p,a,{color:red; font-size:14px;}2)继承模式比如:.alsp li{color:red;}<ul class=".alsp"><li>fdf</li></ul>li是在ul之中的,算是ul的后代。通过.alsp li确定li是属于调用alsp类选择器里的li标签,其他的li标签并不会使用该样式。3)群模式(多元素并列选择器)其实也是一种特殊的群模式p.alsp{color:red;}<p class="alsp">p.alsp</p><a class="alsp">a.alsp</p>alsp仍然是一种class选择器,但是他只有在p的标签下被使用才生效。所以,第一行生效,p.alsp字样变红,第二行不生效10伪类选择器“伪”字暴露了他的本质,伪类选择器并不像其他选择器直接做用在标签上,但是他偏偏又是在标签上进行使用,所以称为“伪类选择器”。伪类的作用,是作用在状态上。一般情况正常运行,只有当达成条件的时候触发,才会执行伪类选择器所代表是css样式。伪类选择器很多,但许多都是我们这辈子估计都用不到的。OK,伪类选择器后续我会专门写一篇经验介绍,有点小多,这里也就不多说了。END二.在HTML中调用CSS调用CSS的常用方法有3中内样式外样式行间样式内样式直接看代码,如图所示在<head></head>中,加入<style></style>,并将相关的CSS样式放在其中外样式直接看代码,如图所示:<link rel="stylesheet" type="text/css" href="index.css">这里,href为css的路径。意思是,你专门创建一个index.css的文件,里面放上CSS样式,和内样式的语法一模一样,只是专门找了一个文件存放而已。4行间样式行间样式直接写在元素里面例如:<p style="color:#900">嘿嘿哦嘿嘿呀哦嘿嘿哦</p>直接在标签后面加上style一般不要用,不过可以用来调试使用

本文:用html制作一个个人网页要求有五个链接,每页都有css格式的详细内容,希望对您有所帮助,信息来源于网络。
上一篇:web前端开发都包括哪些技术下一篇:

5 人围观 / 0 条评论 ↓快速评论↓

(必须)

(必须,保密)

阿狸1 阿狸2 阿狸3 阿狸4 阿狸5 阿狸6 阿狸7 阿狸8 阿狸9 阿狸10 阿狸11 阿狸12 阿狸13 阿狸14 阿狸15 阿狸16 阿狸17 阿狸18