<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ margin: 0; padding: 0; } li:nth-child(odd){ color: black; } li:nth-child(even){ color: black; } div#box1{ background-image: url(jd1.png); width: 80px; height: 80px; } div#box1 p{ width: 220px; height: 350px; display: none; background-image: url(jd.png); } /* #p2{ font-size: 40px; } */ </style> </head> <body> <h1>作业一</h1> <ul> <li id="li1">css 文字阴影(css3) text-shadow: 水平位置 垂直位置 模糊距离 阴影颜色</li> <li id="li2">层叠性:含义 多种css样式叠加,浏览器处理冲突的一种能力;2 原则 一般情况下，若出现样式冲突，会按照CSS书写的顺序 以最后的为准,样式不冲突，不会层叠</li> <li id="li3">继承性:一般文本颜色和字号,font-开头的属性,text-开头的属性、line-开头的,color可以被继承</li> <li id="li4">优先级:id选择器>class选择器>标签选择器</li> <li id="li5">注意特殊情况:* 行内样式优先 * css定义了一个命令!important,该命令赋予最大的优先级* 继承样式权重为0* 权重相同,css遵循就近原则，谁靠近元素的样式具有最大的优先级</li> <li id="li6">总结:1 首先观看选择器是否直接选中作用的元素还是通过继承影响作用的元素</li> <li id="li7">2 假如不是继承则按照权重的计算公式（id选择器个数 class选择器个数 标签选择器个数），假如三个选择器个数都一样，则就近原则（排在最后的优先级最大）</li> <li id="li8">3 假如都是继承的,谁描述的近(结构层级)就听谁的,当描述结构层级一样，则依次比较id选择器数量 class选择器数量 标签选择器数量,假如三种选择器数量也一样，就近原则(位置就近)</li> </ul> <h1>作业二</h1> <div id="box1"> <p> </p> </div> <br/> <h1>作业三</h1> <select name="" id="sel"> <option value="">---请选择标签文字的字号大小---</option> <option value="10px">设置字号：10px</option> <option value="20px">设置字号：20px</option> <option value="30px">设置字号：30px</option> <option value="40px">设置字号：40px</option> </select> <p id="p2">p标签文字大小</p> <h1>作业四</h1> <script type="text/javascript"> // 作业三：设置p标签文字的字号大小 /* var sel = document.getElementsByTagName("select")[0]; var p2 = document.getElementById("p2"); console.log(p2.font-size); sel.onchange = function(){ document.body.style.font-size = sel.value;*/ } //作业二 var box1 =document.getElementById("box1"); var p1 = document.getElementsByTagName("p")[0]; box1.onmouseover = function(){ p1.style.display = "block"; } box1.onmouseout = function(){ p1.style.display = "none"; } //作业一 var li1 =document.getElementById("li1"); var li2 =document.getElementById("li2"); var li3 =document.getElementById("li3"); var li4 =document.getElementById("li4"); var li5 =document.getElementById("li5"); var li6 =document.getElementById("li6"); var li7 =document.getElementById("li7"); var li8 =document.getElementById("li8"); li1.onmouseover = function(){ li1.style.color = "red"; } li1.onmouseout = function(){ li1.style.color = "black"; } li2.onmouseover = function(){ li2.style.color = "green"; } li2.onmouseout = function(){ li2.style.color = "black"; } li3.onmouseover = function(){ li3.style.color = "red"; } li3.onmouseout = function(){ li3.style.color = "black"; } li4.onmouseover = function(){ li4.style.color = "green"; } li4.onmouseout = function(){ li4.style.color = "black"; } li5.onmouseover = function(){ li5.style.color = "red"; } li5.onmouseout = function(){ li5.style.color = "black"; } li6.onmouseover = function(){ li6.style.color = "green"; } li6.onmouseout = function(){ li6.style.color = "black"; } li7.onmouseover = function(){ li7.style.color = "red"; } li7.onmouseout = function(){ li7.style.color = "black"; } li8.onmouseover = function(){ li8.style.color = "green"; } li8.onmouseout = function(){ li8.style.color = "black"; } </script> </body> </html>