1,元素按显示方式分为哪几种, 并举例, 正确描述它们
块级框对应的是块级元素,
行内框对应的是行内元素
行内框的宽高, 由它内部的内容决定
块级框的宽高, 是由它内部的子元素决定
一般来说, 块级框内,可以嵌套行内框, 反过来就不允许(可用display改变)
2,CSS是什么? 它的主要作用是什么?
CSS: 层叠样式表(Cascading Style Sheets)
CSS是用来设置页面中的元素样式和布局的
3,什么是CSS选择器,它的样式声明是哪二部分组成?
CSS选择器:根据元素的标签名称和属性来选择元素, 是最朴素,最直观的方式
样式声明=属性+属性值
4,举例演示CSS简单选择器(全部)
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>举例演示CSS简单选择器</title> <style> /*元素选择器*/ p { color:red; background-color: azure; } /*属性选择器*/ /*属性由属性名和值二部分组成,对应的语法也有二种*/ p[class] { color: black; } p[class="cs"] { color: aliceblue; } p[id="bl"] { color: aqua; } /*几乎所有的元素都可以添加class和id属性,所以css针对这二个属性创建了二个快捷方式*/ /*类选择器, 对应标签中的class属性*/ /*类选择器优先级高于元素选择器*/ .cs{ background-color: brown; } /*ID选择器, 对应标签中的id属性*/ /*ID选择器优先器高于类选择器*/ #bl{ background-color: blue; } /* 群级选择器: 多个选择器之间用逗号分隔, 用于将样式应用到一组元素上 将有class="cs"的元素和<h3>元素选中,并将背景色设置为绿色 第三行.rcs背景未改变,是因为它还有一个id属性, 而该属性优先级高于类属性 */ .cs,h3{ background-color: green; } </style> </head> <body> <p>文能挂机喷队友,武能越塔送人头</p> <p class="cs">进可孤身一挑五,退可坐等二十投</p> <p class="cs" id="bl">前能飞脚救残敌,后能放墙堵队友</p> <p>静则百年不见人,动则千里送超神</p> <h3>问君能有几多愁,恰似五人四坑20投</h3> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
5,举例演示CSS上下文选择器(全部)
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*后代选择器*/ /*body内所有p元素的颜色为green*/ body p { color: green; } /*父子选择器*/ body > p { background-color: blue; } /*同级相邻选择器*/ #tj+* { color: azure; } /*同级所有选择器*/ #tj ~ * { background-color: brown; } </style> </head> <body> <div> <p id="tj">英勇闪现送一血</p> <p>卖起队友不回头</p> <p>顺风浪,逆风投。</p> </div> <p>商女不知亡国恨</p> <p>出门还买多兰盾</p> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
6,举例演示常用CSS结构伪类选择器
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>结构伪类选择器</title> <style> /*非限定类型*/ /*选中页面所有的ul下面的子第二个子元素*/ ul > :nth-child(2) { background-color: brown; } /*如果只想选中第一个ul中的第二个子元素*/ /*会匹配到工作计划*/ ul:first-child > :nth-child(2) { background-color: blue; } /*选中最后一个: 注意事项*/ ul:first-child > :last-child{ background-color: green; } /*选中最后一个子元素中,类型为<p>的元素*/ /*参数是表达式时, n从0开始, n+1, 表示的索引是: 1,2,3,4...*/ 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>火腿一箱</li> <li>手机一部</li> <li>相机一部</li> </ul> </li> <li> <h3>工作计划</h3> <ul> <li>八点开会</li> <li>十二点休息</li> <li>两点写作业</li> </ul> </li> <li> <h2>注意事项</h2> <p>每天工作注意事项如下:</p> <ul> <li>早起给老婆做饭</li> <li>早上给员工开会</li> <li>晚上陪客户吃饭</li> </ul> <p>每月完成30W目标收入</p> </li> </ul> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
7,举例演示常用CSS表单伪类选择器
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>举例演示常用CSS表单伪类选择器</title> <style> /*表单伪类选择器*/ /*选择所有有效的input表单元素*/ /*下拉列表虽有效,但不是input,所以未选中*/ /*警告信息是禁用项, 所以未选中*/ /*保存密码项实际上选中的, 通过检查元素可以查询*/ 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="password">密码:</label> <input type="password" id="password" name="password" required placeholder="不得少于6位"> </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> <input type="hidden" name="login_time" value="登陆时间戳"> </p> <p> <label for="warning">警告:</label> <input type="text" id="warning" value="一天内仅允许登录三次" style="border:none" disabled> </p> <script> document.querySelector('[type="hidden"]').value = new Date().getTime() </script> </form> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
手写代码部分