1:元素按显示方式分为哪几种, 并举例, 正确描述它们
块级元素:独立一行,可接受宽度。默认为父级100%。有div,p,h,ul
行内元素:于行内元素并排,不可设置宽高,默认宽度为内容宽度。有span,em,a
2:CSS是什么? 它的主要作用是什么?
CSS是层叠式样式。是控制页面布局的。可以美化网页。
3:什么是CSS选择器,它的样式声明是哪二部分组成?
CSS选择器是可以操作的样式的一个集合。样式声明由样式属性和样式值。如 p{color:red}
4: 举例演示CSS简单选择器(全部)
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>简单选择器</title> <style> .red{ color: red; } p{ font-size: 20px; background-color: green; } #item{ color: #fff; } body{ background-color: yellow; } </style> </head> <body> <p class="red">昨天在朱老师带领下学习了css基本知识</p> <p id="item">朱老师讲的行云如流水</p> <p>我听的脑子嗡嗡的</p> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
5:举例演示CSS上下文选择器(全部)
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>举例演示CSS上下文选择器(全部)</title> <style> /* 后代选择器*/ section h2{ color: aqua; } /*父子选择器*/ section > h2{ color: red; } /*同级相邻选择器*/ #item + *{ background-color: black; } /*同级所有选择器*/ #item ~ *{ background-color: yellow; } </style> </head> <body> <section> <div> <h2 id="item">昨天在朱老师带领下学习了css基本知识</h2> <h2 >朱老师讲的行云如流水</h2> <h2>我听的脑子嗡嗡的</h2> </div> <h2>php中文网</h2> <h2>html中文网</h2> </section> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
6:举例演示常用CSS结构伪类选择器(不少于四种)
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>举例演示常用CSS结构伪类选择器(不少于四种)</title> <style> /*选中页面ul中的子第二个元素*/ ul>:nth-child(2){ background-color: lightblue; } /*选中第一个ul中的第二个子元素*/ ul:first-child>:nth-child(2){ background-color: lightgreen; } /*选中第一个ul中的最后一个子元素*/ ul:first-child>:last-child{ background-color: lightpink; } /*选中最后一个子元素中,类型为p的元素*/ ul:first-child>:last-child>p:nth-child(n+1){ background-color: yellow; } /*选中最后一个元素中,类型为li的后代元素*/ ul:first-child>:last-child li:nth-child(n+1){ background-color: lightgray; } /*选中最后一个元素中,类型为p的元素*/ ul:first-of-type>:last-of-type>p:nth-of-type(n+1){ background-color: cyan; } /*选中最后一个元素中,类型为li的后代元素*/ ul:first-child>:last-child li:nth-child(n+1){ background-color:lightsalmon; } </style> </head> <body> <ul> <li><h3>购物车</h3> <ul> <li>lenovo笔记本电脑</li> <li>iphone11</li> <li>MAC pro</li> </ul> </li> <li><h3>学习计划</h3> <ul> <li>系统学习html基础知识</li> <li>练习课堂所讲知识</li> <li>多敲代码,多温习</li> </ul> </li> <li><h3>重要通知</h3> <p>好好学习~</p> <ul> <li>今天加班学习,直到弄懂知识位为止</li> <li>努力努力!</li> <li>学习html+css布局好看网页</li> </ul> <p>努力就会出现效果的~</p> </li> </ul> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
7: 举例演示常用CSS表单伪类选择器(不少于三种)
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>举例演示常用CSS表单伪类选择器(不少于三种)</title> <style> input:enabled{ background-color: blanchedalmond; } /*选择禁用元素*/ input:disabled{ background-color: lightgray; } /*选择所有必选项*/ input:required{ background-color: yellow; } </style> </head> <body> <h2>用户登录</h2> <form action="" method="post"> <p> <label for="email">邮箱:</label> <input type="email" id="email" name="email" required placeholder="example@email.com"> </p> <p> <label for="pwd">密码:</label> <input type="password" id="pwd" name="pwd" required placeholder="6位-12位"> </p> <p> <label for="save" >保存密码:</label> <input type="checkbox" id="save" name="save" checked readonly> </p> <p> <label for="save_time">保存期限:</label> <select name="save_time" id="save_time"> <option value="7" selected>7天</option> <option value="30">30天</option> </select> </p> <p> <label for="warning">警告:</label> <input type="text" id="warning" value="一天内仅允许登录三次" style="border:none" disabled> </p> </form> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
均按老师课件敲打,有对比性。