上节回顾：
day48 1.前情回顾 常用标签: 列表 有序列表 <ol> <li></li> </ol> 无序列表 <ul> <li></li> </ul> 标题列表 <dl> <dt>标题</dt> <dd>内容</dd> </dl> 表格 table <table border="1" cellspacing="5px" cellpadding="5px"> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>爱好</th> </tr> </thead> <tbody> <tr> <td rowspan="2">Alex</td> <td colspan="2">18</td> </tr> <tr> <td>18</td> <td>杠娘</td> </tr> </tbody> </table> form表单 input text file password number email submit reset button radio checkbox select(下拉框) optgroup (分组) 组名 label="组名" <optgroup label="第一组"> <option>第一项</option> <option>第二项</option> </optgroup> option selected multiple (多选下拉框) textarea label(联动效果) 通过for和input(id)建立联系 <label for="i1">男</label> <input type="checkbox" id="i1"> 属性: hidden disable readonly(text password) checked (默认选中)
今日内容
2.今日概要 CSS --> 穿衣服 要做的两件事: 1. 找到标签(选择器) 基本选择器: 1. 根据标签名去找标签(标签选择器) 2. ID选择器 (用#开头,用于给特定的标签设置样式) 3. class选择器 (用.开头, 用于大批量添加样式) 4. 标签.class名 (标签名和class名紧挨着,没有空格, 用于给带有class名的指定标签添加样式) 5. *所有标签(通常用于设置页面默认样式) 层级选择器 1. 后代选择器(子子孙孙去找, 从所有后代元素中找符合要求的) 2. 儿子选择器(只从直接子元素(儿子标签)里找) 3. 毗邻选择器(label+input,找到紧挨着某个标签的标签, 往下找) 4. 弟弟选择器(往后找同级的标签) 5. 组合选择器(减少重复代码,把几个查找标签的条件用","分隔 属性选择器 1. [egon] 2. [type="button"] 伪类选择器 1. hover CSS选择器优先级: 1. 继承优先级最低 (我如果没有设置自己的样式,默认我用祖先的样式) 2. 权重( 1.不讲道理的!important 2.内联(写在标签里的style属性) 1000 3.ID选择器 100 4.class选择器 10 5.标签选择器 1 6.继承的 ) 3.重名的样式,后加载的覆盖先加载的 2. 设置标签的样式 1. color 2. background-color 3. border 4. padding 内填充 5. margin 外边距 6. float 3. 浏览器调试相关 1. 查看HTML标签层级关系 2. 查看CSS属性 3. 查看伪类属性(:hover) 4. 查看CSS BOX模型
一、基本选择器
1、标签选择器
p {color: "red";}
<meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>基本选择器</title> <style> /*标签选择器*/ p { color:red; } </style> </head> <body> <!--我是HTML注释--> <p>我是一个p标签</p> </body> </html>
2、ID选择器
#i1 { background-color: red; }
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>基本选择器</title> <style> /*ID选择器 根据ID去找标签*/ #il { background-color: bisque; } </style> </head> <body> <!--我是HTML注释--> <div id="il">我是根据ID寻找标签</div> </body> </html>
3、类别选择器
/*类别选择器*/ .c1{ color: rebeccapurple; } /*标签名和类别名一起生效*/ p.c1{ background-color: gold; }
4、通用选择器
/*所有标签都变红*/
*{
color: indianred;
}
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>基本选择器</title> <style> /*!*标签选择器*!*/ /*p {*/ /*color:red;*/ /*}*/ /*!*ID选择器 根据ID去找标签*!*/ /*#il {*/ /*background-color: bisque;*/ /*}*/ /*类别选择器*/ .c1{ color: rebeccapurple; } /*标签名和类别名一起生效*/ p.c1{ background-color: gold; } /*所有标签都变红*/ *{ color: indianred; } </style> </head> <body> <!--我是HTML注释--> <p>我是一个p标签</p> <div id="il">我是根据ID寻找标签</div> <p class="c1">我是类别标签</p> <p id="il" class="c1"> 我是ID和类别</p> <p class="c1"> 标签名和类别名一起生效</p> </body> </html>
注意：
样式类名不要用数字开头（有的浏览器不认）。
标签中的class属性如果有多个，要用空格分隔。
二、层级选择器
1、后代选择器
/*div内部的a标签设置字体颜色*/
div a{
color: red;
}
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>层级选择器</title> <style> /*div内部的a标签设置字体颜色*/ div a{ color: red; } </style> </head> <body> <div> <a href="">我是div内部的a标签</a> <p> <a href="">我是div的孙子标签</a> <!--P标签不能包ul还有div--> </p> </div> </body> </html>
2、儿子选择器
/*选择所有父级是 <div> 元素的 <p> 元素*/ div>p{ color: red; }
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>层级选择器</title> <style> /*!*div内部的a标签设置字体颜色*!*/ /*div a{*/ /*color:green;*/ /*}*/ /*选择所有父级是 <div> 元素的 <p> 元素*/ div>p{ color: red; } </style> </head> <body> <div> <a href="">我是div内部的a标签</a> <p> <a >我是div的孙子标签</a> <!--P标签不能包ul还有div--> </p> </div> </body> </html>
3、毗邻选择器
/*毗邻选择器*/
/*选择所有紧接着<label>元素之后的<input>元素*/
label+input{
border:1px solid red;
}
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>层级选择器</title> <style> /*毗邻选择器*/ /*选择所有紧接着<label>元素之后的<input>元素*/ label+input{ border:1px solid red; } </style> </head> <body> <form action=""> <label for="">姓名</label> <input type="text" id="i1"><br> <label for="">密码</label> <input type="password" id="i2"><br> <label for="">邮箱</label> <input type="email" id="i3"><br> <input type="submit" value="提交"> </form> </body> </html>
4、弟弟选择器
/*弟弟选择器*/ p~ul{ color: gold; }
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>层级选择器</title> <style> /*弟弟选择器*/ p~ul{ color: gold; } </style> </head> <body> <!--弟弟选择器--> <a href="">这是一个a标签</a> <ul> <li>111</li> <li>222</li> <li>333</li> </ul> <p>这是一个P标签</p> <ul> <li>111</li> <li>222</li> <li>333</li> </ul> </body> </html>
5、组合标签
/*组合选择器 每个选择器都应用该样式*/ p>a,p~a{ color:green; } /*和基本选择器组合使用*/ p~a{ color: palegreen; } .c1{ color: rebeccapurple; }
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>层级选择器</title> <style> /*!*div内部的a标签设置字体颜色*!*/ /*div a{*/ /*color:green;*/ /*}*/ /*!*选择所有父级是 <div> 元素的 <p> 元素*!*/ /*div>p{*/ /*color: red;*/ /*}*/ /*!*毗邻选择器*!*/ /*!*选择所有紧接着<label>元素之后的<input>元素*!*/ /*label+input{*/ /*border:1px solid red;*/ /*}*/ /*!*弟弟选择器*!*/ /*p~ul{*/ /*color: gold;*/ /*}*/ /*组合选择器 每个选择器都应用该样式*/ p>a,p~a{ color:green; } /*和基本选择器组合使用*/ p~a{ color: palegreen; } .c1{ color: rebeccapurple; } </style> </head> <body> <!--后代选择器--> <div> <a href="">我是div内部的a标签</a> <!--儿子选择器--> <p> <a >我是div的孙子标签</a> <!--P标签不能包ul还有div--> </p> </div> <!--毗邻选择器--> <form action=""> <label for="">姓名</label> <input type="text" id="i1"><br> <label for="">密码</label> <input type="password" id="i2"><br> <label for="">邮箱</label> <input type="email" id="i3"><br> <input type="submit" value="提交"> </form> <!--弟弟选择器--> <a href="">这是一个a标签</a> <ul> <li>111</li> <li>222</li> <li>333</li> </ul> <p>这是一个P标签</p> <ul> <li>111</li> <li>222</li> <li>333</li> </ul> <!--组合标签--> <a class="c1" href="">我是div外面的a标签</a> <div class="c1">有C1的div标签</div> <a >我没有class的标签</a> </body>
三、属性选择器
/*用于选取带有指定属性的元素。*/ p[title] { color: red; } /*用于选取带有指定属性和值的元素。*/ p[title="213"] { color: green; } /*上面常用↑*/ /*用于选取属性值包含指定值的每个元素*/ div[class~="c2"] { color: red; } /*用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。*/ div[class|="c2"] { color: red; } /*匹配属性值以指定值开头的每个元素*/ div[class^="my"] { color: red; } /*匹配属性值以指定值结尾的每个元素*/ div[class$="s"] { color: red; } /*匹配属性值以指定值结尾的每个元素*/ div[class$="s"] { color: red; } /*匹配属性值包含指定值的每个元素*/ div[class*="sb"] { color: red; }
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>属性选择器</title> <style> [egon] { color: green; } [type="button"]{ background-color: royalblue; } </style> </head> <body> <div egon="green">我是绿色的egon</div> <div>我没有egon属性</div> <div type="button">花儿爱太阳</div> </body> </html>
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>属性选择器</title> <style> /*属性1*/ /*[egon] {*/ /*color: green;*/ /*}*/ /*属性2*/ [type="button"]{ background-color: royalblue; } /*属性3*/ /*[egon~="green"]{*/ /*color: palegreen;*/ /*}*/ /*属性4*/ [egon^="my"]{ color: gold; } /*属性5*/ /*[egon|='green']{*/ /*color: red;*/ /*}*/ /*属性6*/ /*[egon*='green']{*/ /*color: red;*/ /*} */ /*属性7*/ /*[egon$='green']{*/ /*color: red;*/ /*}*/ </style> </head> <body> <!--属性1--> <div egon="">我是绿色的egon</div> <div>我没有egon属性</div> <!--属性2--> <div type="button">花儿爱太阳</div> <!--属性3--> <div egon="green">engon3</div> <!--属性4--> <div egon="ggggg">egon4</div> <input egon="my-submit1" type="submit" value="提交"> <input egon="my-submit2" type="button" value="按钮"> </body> </html>
四、伪类选择器
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>伪类选择器</title> <style> /*a{*/ /*color: red;*/ /*opacity:0;*/ /*}*/ /*鼠标点上去就会有颜色变化*/ /*a:hover{*/ /*color:gold;*/ /*opacity: 1;*/ /*}*/ /*带有背景色的变化*/ /*div{*/ /*100px;*/ /*height: 100px;*/ /*background-color: palegreen;*/ /*}*/ /*div:hover{*/ /*background-color: gold;*/ /*}*/ /*链接的变化*/ a:link{ color: green; } input:focus{ border: 1px solid red; } </style> </head> <body> <a href="">我是a标签</a> <div >我是DIV标签</div> <a href="https://www.tmall.com/" target="_blank">点我去天猫</a><br> <a href="https://www.suning.com/" target="_blank">点我去苏宁</a><br> <a href="https://www.xxx.com/" target="_blank">点我去百度</a><br> <input type="text"> </body> </html>
before和after
/*在每个<p>元素之前插入内容*/ p:before { content:"hello"; color:red; display: block; } /*在每个<p>元素之后插入内容*/ p:after { content:"bye"; color:red; display: block; }
五、CSS优先级
1、cssj继承
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>CSS选择器优先级</title> <style> .c1{ color: green; } p{ color: red; } </style> </head> <body> <div class="c1" >我是爷爷 <div>这是儿子 <p>这是孙子</p> </div> </div> </body> </html>
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>CSS选择器优先级</title> <style> /*.c1{*/ /*color: green;*/ /*}*/ /*p{*/ /*color: red;*/ /*}*/ #d1{ color: gold; } .c1{ color: red; } div.c1{ color: gold; } #d1>#d2{ color: blue; } .c3{ color: palegreen; } /*不建议使用,特定情况可以使用*/ /*span {*/ /*color: aqua!important;*/ /*}*/ .c3{ color: papayawhip; } </style> <!--<link rel="stylesheet" href="my-style2.css">--> <!--<link rel="stylesheet" href="my-style1.css">--> </head> <body> <div class="c1" >我是爷爷 <div>这是儿子 <p>这是孙子</p> </div> </div> <div class="c1" id="d1" style="color: goldenrod"> <div class="c2" id="d2">id是d2的标签 <div class="c3"> div我是什么颜色的呢? </div> </div> </div> <div > <p><span class="c3">aaa</span></p> </div> </body> </html>
.c3 {
color: olivedrab;
}
.c3 {
color: sienna;
}
2、样式优先级
六、CSS的属性
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>css的属性</title> <style> p{ /*color: red;*/ /*color: #FFOOO0;*/ color: rgb(224,179,72); } </style> </head> <body> <p style="background-color: #336699; text-align: center">花儿爱太阳</p> <div style="background-color: aqua;height: 300px; text-align: right; line-height: 300px">海燕</div> <div style="background-color: pink; text-align: justify">Django is a high-level Python Web framework that encourages rapid development and clean, pragmatic design. Built by experienced developers, it takes care of much of the hassle of Web development, so you can focus on writing your app without needing to reinvent the wheel. It’s free and open source.</div> <a style="text-decoration:none" href="https://www.sadasda.com">我是a标签</a> </body> </html>
1、文本颜色
颜色属性被用来设置文字的颜色。 颜色是通过CSS最经常的指定： 十六进制值 - 如: ＃FF0000 一个RGB值 - 如: RGB(255,0,0) 颜色的名称 - 如: red
2、水平对齐
text-align 属性规定元素中的文本的水平对齐方式。
left 把文本排列到左边。默认值：由浏览器决定
right 把文本排列到右边
center 把文本排列到中间
justify 实现两端对齐文本效果
/* font-size: 10px; line-height: 200px; 文本行高 通俗的讲，文字高度加上文字上下的空白区域的高度 50%:基于字体大小的百分比 vertical-align:－4px 设置元素内容的垂直对齐方式 ,只对行内元素有效，对块级元素无效 text-decoration:none text-decoration 属性用来设置或删除文本的装饰。主要是用来删除链接的下划线 font-family: 'Lucida Bright' font-weight: lighter/bold/border/ font-style: oblique text-indent: 150px; 首行缩进150px letter-spacing: 10px; 字母间距 word-spacing: 20px; 单词间距 text-transform: capitalize/uppercase/lowercase ; 文本转换，用于所有字句变成大写或小写字母，或每个单词的首字母大写 */ 文本其他
3、背景属性
/*背景颜色*/background-color: red; /*背景图片*/ background-image: url('1.jpg');/* 背景重复 repeat(默认):背景图片平铺排满整个网页 repeat-x：背景图片只在水平方向上平铺 repeat-y：背景图片只在垂直方向上平铺 no-repeat：背景图片不平铺*/ background-repeat: no-repeat; /*背景位置*/ background-position: right top（20px 20px）;
支持简写
background:#ffffff url('1.png') no-repeat right top;
4、边框
边框属性
- border-width
- border-style
- border-color
#i1 { border- 2px; border-style: solid; border-color: red; }
通常使用简写方式：
#i1 { border: 2px solid red; }
单独设置
#i1 { border-top-style:dotted; border-right-style:solid; border-bottom-style:dotted; border-left-style:none; }
七、display属性
1、display="none"
隐藏标签
注意与visibility:hidden的区别：
visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失
2、display="block"
将内联标签设置为块级标签
3、display="inline"
块级标签设置为内联标签
4、display="inline-block"
行内块元素
CSS盒子模型
- margin: 用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。
- padding: 用于控制内容与边框之间的距离；
- Border(边框): 围绕在内边距和内容外的边框。
- Content(内容): 盒子的内容，显示文本和图像。
margin外边距
.margin-test { margin-top:100px; margin-bottom:100px; margin-right:50px; margin-left:50px; }
推荐使用简写：
.margin-test {
margin: 5px 10px 15px 20px;
}
顺序：上右下左
常见居中：
.mycenter {
margin: 0 auto;
}
padding内填充
.padding-test { padding-top: 5px; padding-right: 10px; padding-bottom: 15px; padding-left: 20px; }
推荐使用简写：
.padding-test {
padding: 5px 10px 15px 20px;
}
顺序：上右下左
补充：
- 提供一个，用于四边；
- 提供两个，第一个用于上－下，第二个用于左－右；
- 如果提供三个，第一个用于上，第二个用于左－右，第三个用于下；
- 提供四个参数值，将按上－右－下－左的顺序作用于四边；
抽屉作业：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>抽屉作业</title> <style> *{ padding: 0; margin: 0; } ul>li{ float: right; margin-left: 5px; } .header{ height: 30px; 100%; background-color: grey; } </style> </head> <body> <div class="header"> <ul type="none"> <li>vip</li> <li>注册</li> <li>登录</li> </ul> </div> </body> </html>
背景图片示例：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>背景图片示例</title> <style> .c1{ height: 500px; 500px; /*background-color: red;*/ /*background-image: url("激光.png") ;*/ /*background-repeat: no-repeat;*/ /*background-position: center center;*/ background:url("激光.png")no-repeat left bottom; } </style> </head> <body> <div class="c1"></div> </body> </html>
作业示例
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>抽屉作业示例</title> <style> *{ padding: 0; margin: 0; } body{ background-color: #eeeeee; } .head{ height: 5px; background-color: #336699; } .head-content{ 1016px; height: 45px; margin: 0 auto; } .head-content>a{ 121px; height: 23px; background: url("logo.png")no-repeat 0 0; float: left; margin-top: 11px; } .head-content ul>li{ float: left; line-height: 45px; margin-left: 10px; } .head-content ul>li>a{ padding: 11px; } a{ text-decoration: none; color: rgb(192, 205, 223); } .head-content ul>li>a:hover { color: white; background-color: rgb(57, 107, 179); } /*页面主体部分*/ .main-content{ 960px; height: 1000px; background-color: white; margin: 0 auto; } .content-left{ 630px; height: 1000px; background-color: deeppink; float: left; } .content-right{ 300px; height: 1000px; background-color: green; float: right; } </style> </head> <body> <!--从页面头部开始--> <div class="head"> <div class="head-content"> <a href=""></a> <ul type="none"> <li><a href="">全部</a></li> <li><a href="">随便</a></li> <li><a href="">图片</a></li> <li><a href="">43区</a></li> <li><a href="">挨踢1024</a></li> <li><a href="">单子</a></li> </ul> </div> </div> <!--页面头部结束--> <!--页面主题开始--> <div class="main"> <div class="main-content"> <!--主题内容左侧开始--> <div class="content-left"></div> <!--主题左侧结束--> <!--主题内容右侧开始--> <div class="content-right"></div> <!--主题内容右侧结束--> </div> </div> <!--主题页面结束--> </body>
背景色示例：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>背景色示例</title> </head> <body> <div style="background-color: green;height: 45px; 1000px"> <!--因为没内容,所以看不到a标签的背景图,让他浮动起来就可以看到了--> <a href="" style="background-image: url('logo.png');100px;height: 45px"></a> </div> </body> </html>
