一.元素显示方式分为哪几种,并举例,正确描述它们?
块级元素和行内元素
描述:块级元素:如div、table、p等
(1)遵循最大化原则(2)总是独占一行,自动充满父元素的内容区 (3)块级元素两边不允许有其他元素(4)块级元素在没有内容的情况下需要设置宽高否则无法感知存在
行内元素:如span、input、strong、a等
(1)遵循最小化原则(2)总是在一行文本元素的内部生成,无法设置宽高
二.css是什么?它的主要作用是什么?
是什么:层叠样式表 主要作用:用来设置页面中的元素和布局
三.什么是css选择器,它的样式声明有哪两部分组成?
css选择器:选择器是一种模式,用于选择所需要的样式
样式声明:[code] 选择器{样式}
四.举例演示css简单选择器
总结:当元素选择器、类选择器、Id选择器同时存在时ID选择器的优先级>类选择器>元素选择器
实例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> /* 通配符选择器 */ * { background-color: burlywood; } /* 元素选择器 选择标签ul将字体颜色设为绿色 */ ul { color: green; } /* 属性选择器 */ /* 选择设有class属性的p标签 */ p[class] { color: blue; } p[class='book'] { color: greenyellow; } /* 类选择器 优先级大于元素选择器*/ .book { background-color: blue; } /* id选择器优先级大于类选择器 */ #game { background-color: gray; } /* 群组选择器 选择有class=xi的元素 以及 h2 标签 但游戏为变色因为他有一个id上面给他设置了css说明id选择器优先级大于群组选择器 */ .xi, h2{ background-color: red; } </style> </head> <body> <h2>举例演示css简单选择器</h2> <ul> <li class="book"> <h2>图书</h2> <ul> <li class="xi">西游记</li> <li>水浒传</li> </ul> </li> </ul> <ul> <li> <h2 id="game">游戏</h2> <ul> <li>英雄联盟</li> <li>王者荣耀</li> </ul> </li> </ul> <ul> <li> <h2>音乐</h2> <ul> <li>英雄联盟</li> <li>王者荣耀</li> </ul> </li> </ul> <p class="">阿斯达所大润肺委托人味儿</p> <p>阿斯达所大润肺委托人味儿</p> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
五.举例演示css上下文选择器
实例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> /* 后代选择器 */ div h2{ color: blue; } /* 父子选择器因为div中的h2与article不是父子关系所以不匹配 */ article > h2{ color: green; } /* 同级相邻选择器 +选择相邻的*/ .baidu + h2{ color: black; } /* 同级所有选择器 ~选择所有同级的*/ .ali ~ h2{ color: skyblue; } </style> </head> <body> <article> <h2>举例演示css上下文选择器</h2> <div> <h2 class="baidu">百度</h2> <h2>阿里</h2> <h2>腾讯</h2> </div> <div> <h2 class="ali">阿斯顿</h2> <h2>阿萨德法</h2> <h2>阿萨</h2> </div> <h2>英雄联盟</h2> <h2>QQ飞车</h2> </article> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
六.举例演示常用伪类选择器
总结:伪类选择器本质上也属于class级别的选择器,优先级小于id选择器大于标签选择器
实例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> /* 结构伪类选择器 */ /* 选中所有ul下的第三个子元素也可以写成ul>nth-child()*/ ul > :nth-child(2){ color: red; } /* 匹配第一个ul元素中的第二个子元素 */ ul:first-child > :nth-child(2){ color: green; } /* 匹配第一个ul元素中的最后一个子元素优先级高于上面的 */ ul:first-child>:last-child{ color: blue; } /* 匹配第一个ul元素中的最后一个子元素的所有li子元素 */ ul:first-child>:last-child li:nth-child(n+1){ background-color: orange; } /* 匹配所有ul标签的倒数第二个子元素 */ ul>:nth-last-child(2){ background-color: yellow; } /* 匹配ul元素中的唯一子元素 */ ul:only-child{ background-color: greenyellow; } </style> </head> <body> <h2>举例演示常用伪类选择器</h2> <div> <ul> <li> <h2>爱好</h2> <ul> <li>看书</li> <li>打游戏</li> <li>听音乐</li> <li> <span>运动</span> <ul> <li>羽毛球</li> <li>乒乓球</li> <li>桌球</li> <li>篮球</li> </ul> </li> </ul> </li> <li> <h2>电影</h2> <ul> <li>恶人转</li> <li>复仇者联盟</li> <li>钢铁侠</li> <li>美国队长</li> </ul> </li> <li> <h2>动漫</h2> <ul> <li>死神</li> <li>火影</li> <li>家庭教师</li> <li>海贼王</li> </ul> </li> </ul> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
七.举例演示常用表单伪类选择器
实例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> /* 选择每个启用的input元素 */ input:enabled{ background-color: red; } /* 选择每个被禁用input标签 */ input:disabled{ background-color: green; } input:required{ background-color: yellow; } input:checked{ background: greenyellow; } /* 选择不包含required属性的input标签覆盖了disabled和enabled */ input:optional{ background: greenyellow; } </style> </head> <body> <h2>举例演示常用表单伪类选择器</h2> <form action="register.php" method="post"> <p> <label for="username">姓名:</label> <input type="text" name="username" id="username" placeholder="请输入姓名" disabled=""/><br /> </p> <p> <label for="password">密码:</label> <input type="password" name="password" id="password" placeholder="请输入不得少于6位密码" required /><br /> </p> <p> <label for="mail">邮箱:</label> <input type="email" name="mail" id="mail" placeholder="123456@qq.com"/><br /> </p> <label for="address">住址:</label> <select name="address"> <optgroup label="江苏"> <option value="南通">南通</option> <option value="无锡">无锡</option> <option value="南京" selected="">南京</option> </optgroup> <optgroup label="江西"> <option value="南昌">南昌</option> <option value="景德镇">景德镇</option> </optgroup> </select><br /> <label for="man">性别:</label> <input type="radio" name="sex" id="man" checked=""/><label for="man">男</label> <input type="radio" name="sex" id="woman" /><label for="woman">女</label><br /> <label for="">爱好:</label> <input type="checkbox" name="hoppy" id="book" checked="" /><label for="book">看书</label> <input type="checkbox" name="hoppy" id="basketball" /><label for="basketball">篮球</label> <input type="checkbox" name="hoppy" id="code" /><label for="code">敲代码</label> <input type="checkbox" name="hoppy" id="game" disabled=""/><label for="game">打游戏</label><br /> <button>提交</button> </form> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例