一、元素按显示方式分为哪几种，并距离描述他们。
元素分为三种：块元素、行内元素、行内块元素
1、块元素：
举例： p、div、h1-h6、ol、ul、li......
特点：
块元素不能在一行上显示
块元素可以直接设置宽度和高度
如果块元素没有设置宽度，那么块级元素的宽与其父元素的宽度一致。
2、行内元素：
举例：a、span.......
特点：行内元素默认情况下没有宽度，宽度等于其内容的大小、行内元素不能直接设置宽度和高度。。
两个行内元素可以在一行上显示。
3、行内块元素
举例：<img>图片、<input>表单
特点：既有行内元素特点和块状元素特点。
可以设置宽度和高度，可以在一行显示。
二、css是什么，主要作用是什么？
1、css是层叠样式表。
2、是用来设置HTML（网页）等文件的计算机语言布局与显示方式。
三、什么是CSS选择器、它的样式声明是哪二部分组成？
1、选择器是用于选择需要添加样式的元素。
2、样式声明是由“属性”和“值”两部分组成组成。
四、简单选择器
简单选择器分为：h1等标签选择器、属性选择器、类class选择器、id选择器、群组选择器、通配符选择器
写法：
1、标签选择器（h1｛color:red;},
2、属性选择器[class="kuai"]{width: 500;border: red 1px solid;}
3、类选择器.class{color:red;}
4、ID选择器#id{color:red;}
5、群组选择器h1、h2、h3、p｛color:red;}
6、通配符选择器*｛color:red}
同级共存时优先级：id>class>属性
html引入CSS文件的两种方式：
1、<link rel="stylesheet" href="stlyle.css">
2、@import "stlyle.css";
实例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简单选择器</title>
<style>
h1{
color: darkred;
}
p,div h3{
background: brown;
}
.kuai h3{
font-family: 黑体;
}
#hang{
border: yellow 1px solid;
}
body *{
font-size: 2rem;
}
[class="kuai"]{
width: 500;
height: 200;
border: red 1px solid;
}
img{
width: 500px;
height: 300px;
}
[controls]{
width: 800px;
height: 500px;
}
</style>
</head>
<body>
<h1>简单选择器</h1>
<p>css是层叠样式表。</p>
<div class="kuai">
<h3>块元素：</h3>
<h4 class="hangnei">行内块元素,是CSS一种元素类型，可以设置，还可以同行显示</h4>
</div>
<h3>css语法</h3>
<ul>
<li id="hang"><h2>行内元素</h2></li>
</ul>
<audio src="C:\Users\lenovo\Desktop\web\野狼.mp3" controls>音乐</audio>
<br>
<a href="http://www.baidu.com" ><img src="C:\Users\lenovo\Desktop\web\36.jpg" alt="美女" >美女</a>
<br>
<video src="C:\Users\lenovo\Desktop\web\野狼.mkv" controls muted poster="36.jpg"></video>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
五、css上下文选择器演示
写法：
1、后代选择器 div li{color:red;}
2、"父子"选择器 div>li{color:red;}
3、同级相邻选择器 .class+*{color:red;}
4、同级所有选择器 .class~*{color:red;}
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>上下文选择器</title>
<!-- 两种引入css文件的方式-->
<!-- <link rel="stylesheet" href="stlyle.css">-->
<style>
/*@import "stlyle.css";*/
div li{
font-size: 25px;
}
ol li{
color: red;
}
ul>li{
color:darkgreen;
}
.cc+*{
background: aliceblue;
}
#dd~*{
background: chartreuse;
}
</style>
</head>
<body>
<div class="">
<h1>程序员的基本素养</h1>
<ol>
<li>坚持以规范的形式编码</li>
<ol>
<li>坚持锻炼</li>
<li class="cc">坚持礼貌待人</li>
<li>坚持12点之前入睡</li>
<li>坚持6:30之前起床</li>
</ol>
<li>坚持以最快最优方式完成任务完成</li>
</ol>
</div>
<ul>
<li>坚持以规范的形式编码</li>
<li>坚持锻炼</li>
<li id="dd">坚持礼貌待人</li>
<li>坚持12点之前入睡</li>
<li>坚持6:30之前起床</li>
<li>坚持以最快最优方式完成任务完成</li>
</ul>
</body>
</html运行实例 »
点击 "运行实例" 按钮查看在线实例
六、css伪类选择器（限定与非限定类型）
写法;
非限定类型：ul>:nth-child(2) {选中所有ul下的第三个ul子元素}
限定类型：ul:first-of-type > :last-of-type li:nth-of-type(n+1) ｛选中第一个ul标签下面的最后一个ul标签的所有li标签｝
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>非限定类型-伪类</title>
<style>
/*选中所有ul下的第三个ul子元素*/
/*ul>:nth-child(3){*/
/* background: gold;*/
/*}*/
/*选中当前UL下面的子元素*/
/*ul:nth-child(2){*/
/* background: gold;*/
/*}*/
/*选中第一个UL的所有元素*/
/*ul:first-child{*/
/* background: gold;*/
/*}*/
/*选中第一个ul下面的第三个子元素*/
/*ul:first-child > :nth-child(3){*/
/* font-size: 35px;*/
/*}*/
/*选中第一个UL下面的最后一个子元素*/
/*ul:first-child > :last-child{*/
/* background:red;*/
/*}*/
/*选中第一个UL下面的最后一个UL下面的所有LI元素*/
/*ul:first-child > :last-child > li:nth-child(n+1){*/
/* background:chocolate;*/
/*}*/
/*选中第一个ul标签下面的最后一个ul标签的所有li标签*/
ul:first-of-type > :last-of-type li:nth-of-type(n+1){
font-size: 15px;
color: chocolate;
}
</style>
</head>
<body>
<ul>
<h1>程序员的基本素养</h1>
<ul>
<li>坚持以规范的形式编码</li>
<ul>
<li>坚持锻炼</li>
<li class="cc">坚持礼貌待人</li>
<li>坚持12点之前入睡</li>
<li>坚持6:30之前起床</li>
</ul>
<li>坚持以最快最优方式完成任务完成</li>
</ul>
<ul>
<li>坚持以规范的形式编码</li>
<li>坚持锻炼</li>
<ul>
<li id="dd">坚持礼貌待人</li>
<li>坚持12点之前入睡</li>
<li>坚持6:30之前起床</li>
</ul>
<li>坚持以最快最优方式完成任务完成</li>
</ul>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
七、css表单伪类选择器
写法：input:属性｛属性：值；｝
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css常用的表单伪类选择器</title>
<style>
input:required{
background: chocolate;
}
input:enabled{
background: green;
}
input:disabled{
background: red;
}
</style>
</head>
<body>
<h2>用户注册</h2>
<form action="" method="post">
<p>
<label for="yhm">用户名：</label>
<input type="text" name="yhm" id="yhm" required placeholder="****@email.com">
</p>
<p>
<label for="password">密码：</label>
<input type="password" name="password" id="password" required placeholder="不少于6位" min="6">
</p>
<label for="tel">提示：</label>
<input type="text" name="tel" is="tel" size="11" readonly placeholder="输入11位手机号">
<p>
<label for="checkbox">保存密码：</label>
<input type="checkbox" name="checkbox" >
</p>
<p>
<label for="savetime">保存期限：</label>
<select name="savetinme" id="savetime">
<option value="savetime" selected>7天</option>
<option value="savetime">30天</option>
</select>
</p>
<p>
<label for="jinggao">警告：</label>
<input type="text" id="jinggao" value="一天内允许登录2次" style="border: none; "disabled>
</p>
<p><input type="submit" value="提交">
</p>
</form>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例