一. 元素按显示方式分为哪几种, 并举例, 正确描述它们
答:元素按显示方式分为块状元素和内联元素
块状元素
1.块状元素在网页中就是以块的形式显示,所谓块状就是元素显示为矩形区域,常用的块状元素包括div,dl,dt,dd,ol,ul,fieldset,(h1~h6),p,form,hr,iframe,colgroup,col,table,tr,td等等;
2.默认情况下,块状元素都会占据一行,通俗地说,两个相邻块状元素不会出现并列显示的现象;默认情况下,块状元素会按顺序自上而下排列
3.块状元素都可以定义自己的宽度和高度
4.块状元素一般都作为其他元素的容器,它可以容纳其他内联元素和其他块状元素。我们可以把这种容器称为一个盒子。
内联元素
1.常见的内联元素如:a,span,i,em,strong,b等等
2.内联元素的表现形式是始终以行内逐个进行显示
3.内联元素没有自己的形状,不能定义它的宽和高,它显示的高度和欢度只能根据所包含内容的高度和宽度来确定,它的最小内容单元也会呈现矩形形状;
4.内联元素也会遵循盒模型基本规则,如可以定义padding,border,magrin,background等属性
二. CSS是什么? 它的主要作用是什么?
答:CSS全称为Cascading Style Sheets(层叠样式表),中文翻译为“层叠样式表”,简称CSS样式表。它是一种用来表现HTML或 XML 等文件式样的计算机语言。
在网页制作时采用CSS技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。
只要对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者页数不同的网页的外观和格式。
CSS的作用:CSS具有对网页的布局、颜色、背景、宽度、高度、字体进行控制,让网页按您的美工设计布局的更加美观漂亮。
三. 什么是CSS选择器,它的样式声明是哪二部分组成?
CSS3 选择器 在CSS 中,选择器是一种模式,用于选择需要添加样式的元素。
它的样式声明是由属性和属性值两部分组成
例如:
<style type="text/css">
声明{ 属性: 值;}
</style>
四. 举例演示CSS简单选择器(全部)
常用的简单选择器有5种:
1.元素选择器: div {...}
2.属性选择器: tag[property...]
3.类/class选择器: .active {...}
4.ID选择器: #style {...}
5.群组选择器: p, .active, div {...}
通配符选择器: *, 表示全部元素, 通常用在上下文选择器
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS简单选择器</title> <style type="text/css"> /*标签选择器*/ h2{ color: red; } span{ background: burlywood; color: cadetblue; } /*.类选择器*/ .style1{ font-size: 20px; color: green; background:blue; } .style2{ background: rebeccapurple; font-size: 16px; color: white; } /*ID类选择器*/ #style3{ font-size: 23px; background: darkgrey; } /*属性选择器*/ p[class]{ background: green; color: white; font-size: 24px; } /*伪类选择器*/ a:link{font-size: 30px;color:yellow;} /*打开网页时标签为黄色*/ a:hover{font-size: 30px;color:green;} /*将鼠标放在标签上时标签为绿色*/ a:active{font-size: 30px;color:blue;} /*点击标签时标签为蓝色*/ a:visited{font-size: 30px;color:red;} /*点击后标签为红色*/ </style> </head> <body> <section> <h2>CSS简单选择器</h2> <p class="style1">她年轻时迷死一大片男人,却不结婚不生子,<span>今39岁甜的像个水蜜桃</span></p> <p class="style1">最近一对农村男女相亲火了,被网友称为最朴实最美好的相亲</p> <p class="style2">直击北京故宫航拍照:尽显皇家威严,却被现代化的建筑步步紧逼</p> <p id="style3">其实在唐僧的三个徒弟中,猪八戒实力垫底,<span>孙悟空也不一定排第一</span></p> <a href="https://www.php.cn" target="_blank">PHP中文网</a> </section> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
五. 举例演示CSS上下文选择器(全部)
所谓上下文, 是指元素之间的结构关系,如层级,包含等,主要有四个选择器
后代选择器: 空格, 如 section p
父子选择器: >, 如 section > h2
同级相邻选择器: +, 如 h2 + p
同级所有选择器: ~, 如 h2 ~ a
通配选择器:* 如 section * a
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS-上下文选择器</title> <style type="text/css"> /*后代选择器*/ section p{ font-size: 20px; color: darkgrey; } /*标签1 > 标签2 标签2必须是标签1的子元素。与其他常规的上下文选择符不同,这个选择符中的标签1不能使标签2的父元素之外的其他祖先元素*/ section > h2 { font-size: 30px; color: green; } /* 紧邻同胞选择符 + 标签1 + 标签2 标签2必须紧跟在其同胞标签1的后面 */ h2 + p { background: #7a3dff; } /*一般同胞选择符 ~ 标签1 ~ 标签2 标签2必须在(不一定紧挨着)其同胞标签1后面*/ h2 ~ a{ font-size: 26px; color: darkslategray; } /*通配选择符 * 适用于section的非子元素a *(常称为星号选择符)是一个通配符,它匹配任何元素*/ section * a{ color: blue; font-size: 50px; } </style> </head> <body> <section> <h2>CSS-上下文选择器</h2> <p>她年轻时迷死一大片男人,却不结婚不生子,今39岁甜的像个水蜜桃</p> <p>最近一对农村男女相亲火了,被网友称为最朴实最美好的相亲</p> <p>直击北京故宫航拍照:尽显皇家威严,却被现代化的建筑步步紧逼</p> <p>其实在唐僧的三个徒弟中,猪八戒实力垫底,<a href="https://www.php.cn" target="_blank">PHP中文网</a></p> <a href="https://www.html.cn" target="_blank">HTML中文网</a> </section> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS上下文选择器</title> <style type="text/css"> em{ color: red; font-size: 50px; } article li em{ color: blue; font-size:20px; } aside li em{ color: chocolate; background: darkgrey; font-size: 20px; } </style> </head> <body> <article> <div class="main"> <h2><em>CSS</em>上下文选择器</h2> <ul> <li>她年轻时迷死一大片男人,却不结婚不生子,今39岁甜的像个水蜜桃</li> <li>最近一对农村男女相亲火了,被网友称为最朴实最美好的相亲</li> <li>直击北京故宫航拍照:<em>尽显皇家威严</em>,却被现代化的建筑步步紧逼</li> </ul> </div> </article> <aside> <ul> <li>最近昆凌出席活动的时候,穿了一件黑色的开叉长裙,轻松展现出曼妙性感的好身材</li> <li>S型的身材曲线让人看完之后心动不已,一点都不像是已经生了两个孩子的人</li> <li>其实在唐僧的三个徒弟中,<em>猪八戒实力垫底</em>,孙悟空也不一定排第一</li> </ul> </aside> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
六. 举例演示常用CSS结构伪类选择器(不少于四种)
:nth-child(n)是最主要的非限定类型,其它四个只是它的某种行为快捷方式
:nth-child(n): 匹配父元素中指定索引的子元素
:first-child: 匹配父元素中的第一个子元素
:last-child: 匹配父元素中的最后一个子元素
:nth-last-child(n): 匹配从父元素中倒数选择子元素
:only-child: 匹配父元素中的唯一子元素
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>常用CSS结构伪类选择器</title> <style type="text/css"> /*结构伪类选择器,可以根据元素在文档中所处的位置,来动态选择元素,从而减少HTML文档对ID或类的依赖,有助于保持代码干净整洁。*/ /*:nth-of-type(n) 与 :nth-child(n) 的作用和使用方法完全相同,唯一不同的是,它用来选择某个父元素下,指定类型的一个或多个特定的子元素。*/ section ul li:first-child{/*选择第1个li*/ color: red; font-size: 20px; } section ul li:last-child{/*选择最后一个li*/ color: #3ad4ff; background: darkgrey; padding: 10px; } section ul li:nth-child(3){/*选择第3个li*/ font-size: 20px; color: blue; } section ul li:nth-child(4){/*选择第四个li*/ background: green; color: white; } section ul li:nth-last-child(2){/*选择倒数第二个li*/ color: chocolate; background: aquamarine; } section ul li:nth-of-type(5){ background: black; color: white; } </style> </head> <body> <section> <h2>常用CSS结构伪类选择器</h2> <ul> <li>她年轻时迷死一大片男人</li> <li>今39岁甜的像个水蜜桃</li> <li>最近一对农村男女相亲火了</li> <li>被网友称为最朴实最美好的相亲</li> <li>直击北京故宫航拍照:尽显皇家威严</li> <li>却被现代化的建筑步步紧逼</li> <li>唐僧的三个徒弟中,猪八戒实力垫底</li> <li>孙悟空也不一定排第一</li> </ul> </section> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
七. 举例演示常用CSS表单伪类选择器(不少于三种)
所谓非限定类型, 是指只关注子元素的位置, 忽略子元素类型(当然也可以指定类型)
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>常用CSS表单伪类选择器</title> <style type="text/css"> input:enabled{ background: darkgrey; } input:focus { background: #7a3dff; } input:disabled{ background: chocolate; } </style> </head> <body> <section> <h2>常用CSS表单伪类选择器</h2> <form action="login.php"> <p> <label for="username">用户名:</label> <input type="text" name="username" id="username" value="请输入用户名"> </p> <p> <label for="password">密码:</label> <input type="password" name="password" id="password" placeholder="请输入密码"> </p> <p> <label for="password">确认密码:</label> <input type="password" name="password" id="password" placeholder="请确认密码"> </p> <p> <label for="email">邮箱:</label> <input type="email" name="email" id="email" placeholder="example@email.com"> </p> <p> <label for="warning">警告:</label> <input type="text" id="warning" value="一天内仅允许登录三次" style="border:none" disabled> </p> </form> </section> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例