网站设计第一步怎么做,查看网站信息图标怎么做,如何查看网站是什么语言做的,打开公众号目录 任务描述
相关知识
id选择器
id选择器语法
类选择器与id选择器的区别
编程要求 任务描述
在本关中#xff0c;你将通过id选择器的方式完成页面菜单栏样式布局#xff0c;栏目导航等任务。
完成任务之后#xff0c;基本页面效果如下#xff1a; 动态效果如下你将通过id选择器的方式完成页面菜单栏样式布局栏目导航等任务。
完成任务之后基本页面效果如下 动态效果如下 相关知识
id选择器
id选择器与我们上一关中学习的类选择器类似但在使用上有不同。
使用类选择器时指定一个元素属于某类使用的是关键字class例如:
bodyh1 classimportant温馨提示/h1p少一串脚印多一份绿意。/p
/body
而在使用id选择器时使用的是关键字id。对于上面类选择器的例子用id选择器书写
bodyh1 idimportant温馨提示/h1p少一串脚印多一份绿意。/p
/body
在样式表中指定对应id名元素的样式使用#符号也称为棋盘号或井号。
#important {color: red;font-weight: bold;
}
样式应用效果如图 id选择器语法
同理我们可以看出id选择器的语法规则如下 首先将html中想要应用类样式的元素指定id名。 元素名 id指定的类名/元素名元素名 id指定的类名 然后书写相应类的样式。 #指定的类名 {样式声明}
类选择器与id选择器的区别
类选择器与id选择器类似那么它们的区别是什么呢什么情况下应该使用哪一种选择器呢
它们最大的区别在于在一个 HTML 文档中可以为任意多个元素指定类但id选择器只能使用一次一个id只能运用于一个元素。
一般情况下都推荐使用类选择器。而在一些特定情况下我们才会建议使用id选择器。例如通过id选择器在页面中定义锚在编写 JavaScript 为指定的页面元素应用特殊行为时。
编程要求 为header元素添加名为menu的id 使用id选择器设置精选(#chosen)标题为红色(red)时事( #news)标题为蓝色(blue)财政(#finance)标题为橄榄绿(olive), 思想(#think)标题为绿色(green)生活(#life)标题为橘色(orange)。
!DOCTYPE html
html langzh
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleID选择器/titlestyle typetext/css/* 元素选择器 */html {background-color: #F0F0F0;}header {padding: 40px;background-color: white;}footer {margin-top: 20px;font-size: 0.6em;color: grey;}/* 类选择器 */.main {margin: 10px;}.newsSection {margin-top: 20px;padding: 20px;background-color: white;}/* ********** BEIGN ********** */#chosen {color: red;}#news {color: blue;}#finance {color: olive;}#think {color: green;}#life {color: orange;}/*选择menu元素下的li子元素*/#menu li {float: left;width: 70px;font-size: 1.2em;font-weight: lighter;}/*选择menu元素下的li子元素和li下得a子元素*/#menu li, li a {list-style: none;text-decoration: none;}/* ********** END ********** *//style
/head
body
div classmain!-- ********** BEGIN ********** --header idmenu!-- ********** END ********** --lia href#chosen精选/a/lilia href#news时事/a/lilia href#finance财政/a/lilia href#think思想/a/lilia href#life生活/a/li/headerdiv classnewsSectionsectionh2 idchosen精选/h2li精选新闻1/lili精选新闻2/lili精选新闻3/li/sectionsectionh2 idnews时事/h2li时事新闻1/lili时事新闻2/lili时事新闻3/li/sectionsectionh2 idfinance财政/h2li财政新闻1/lili财政新闻2/lili财政新闻3/li/sectionsectionh2 idthink思想/h2li思想新闻1/lili思想新闻2/lili思想新闻3/li/sectionsectionh2 idlife生活/h2li生活新闻1/lili生活新闻2/lili生活新闻3/li/section/divfooterCopyright (c) News Copyright Holder All Rights Reserved./footer
/div/body
/html
