收藏
批改状态：合格
老师批语：作业很认真, 代码写得也规范
1.元素按显示方式分为哪几种, 并举例, 正确描述它们
元素的显示方式有两个，一种是块级元素，如：div,p,h1等。一种是行内元素，如span。那么，为什么它们有的是块级元素占一行，有的是行内元素内容是多大就是多大呢?其实，他们这是有一个css属性决定的，这个属性就是display。
比如 display:block; 就是块的意思
display: inline; 是行的意思，
如果我们给div设置css样式为display:inline;那么，div就会像span一样变成行内元素，
同样如果给span设置display:block; 它就会变成div一样的块级元素。
我们知道，块级元素是可以设置宽高，但是要占一行，而行内元素是不能设置宽高的，有没有一种方法可以让一个元素既不占一行又可以设置宽高呢？
有的，这就是display的 inline-block属性，意思是既是块，又是行。
2.CSS是什么? 它的主要作用是什么?
CSS代表级联样式表。CSS是一种标准的样式表语言，用于描述网页的表示(即布局和格式)。如果说HTML是房子的话，CSS就是装修的风格。
3.什么是CSS选择器,它的样式声明是哪二部分组成?
CSS是一种用于屏幕上渲染html，xml等一种语言，CSS主要是在相应的元素中应用样式，来渲染相对应用的元素，那么这样我们选择相应的元素就很重要了，如何选择对应的元素，此时就需要我们所说的选择器。在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。选择器主要是用来确定html的树形结构中的DOM元素节点。
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。
4.举例演示CSS简单选择器(全部),举例演示CSS上下文选择器(全部),举例演示常用CSS结构伪类选择器(不少于四种)
<!DOCTYPE html>
<html>
<head>
<title>CSS选择器</title>
<style>
/*id选择器*/
#idSelect{
color: orange;
}
/*类选择器*/
.classSelect2{
color: green;
}
/*群组选择器*/
#idSelect2,h1{
color: pink;
}
/*通配符选择*/
*{
padding: 0;
margin: 0;
}
/*上下文选择器*/
p em{
color: blue;
}
/*后代选择器*/
nav h2{
color: gray;
}
/*父子选择器*/
nav > h2{
color:red;
}
/*同级相邻选择器*/
.idSelect3 + *{
background: orange;
}
/*同级所有选择器*/
.idSelect3 ~ *{
background: green;
}
/*menu下第二个子元素*/
menu > :nth-child(2){
background: pink;
}
menu > ul > :nth-child(2){
background: blue;
}
</style>
</head>
<body>
<h1>CSS简单选择器</h1>
<p id="idSelect">ID<em>选择器</em></p>
<p class="classSelect" id="idSelect2">类选择器</p>
<p class="classSelect2">群组选择器</p>
<p>通配选择器</p>
<nav>
<div>
<h2 class="idSelect3">好好</h2>
<h2>学习</h2>
<h2>天天</h2>
</div>
<h2>向上</h2>
</nav>
<menu>
<ul>
<li>苹果</li>
<li>华为</li>
<li>小米</li>
</ul>
<ul>
<li>平板</li>
<li>ipad</li>
<li>phone</li>
</ul>
</menu>
</body>
</html>点击 "运行实例" 按钮查看在线实例
运行结果图：
手写：
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
