<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="index.css">
<style>
/*内嵌css样式*/
div{
width: 100px;
height: 100px;
background: red;
}
</style>
</head>
<body>
<!--css Cascading Style Sheet 层叠样式表——修饰、美化网页，化妆师
CSS优先级，即是指CSS样式在浏览器中被解析的先后顺序。
行间样式 > 内嵌css样式 > 外链css样式（在style之前引入）
-->
<!--行间样式-->
<div style="width: 100px;height: 100px;background: bisque"></div>
<div></div>
<div></div>
</body>
</html>
2.0 电影页小测试
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
display: inline-block;
}
.box{
width: 273px;
}
img{
width: 135px;
height: 184px;
}
</style>
</head>
<body>
<h1>小马宝莉大电影 My Little Pony: The Movie <span>(2017)</span></h1>
<div>
<img src="https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2512418397.webp">
</div>
<div class="box">
<span>导演:</span><a href="javascript:void(0);">森·西森</a><br/>
<span>编剧:</span><a href="javascript:void(0);">莫汉·麦卡锡 / 萧丽塔 / 迈克尔·沃格尔 / 乔·巴拉里尼 / 劳伦·浮士德</a><br/>
<span>主演:</span><a href="javascript:void(0);">奥卓·阿杜巴 / 艾米莉·布朗特 / 阿什莉·鲍尔 / 克里斯汀·肯诺恩斯 / 泰雅·迪格斯 / 更多...</a><br/>
<span>类型:</span><a href="javascript:void(0);">喜剧 / 动画 / 冒险</a><br/>
<span>官方网站:</span><a href="javascript:void(0);"> www.mylittlepony.movie</a><br/>
<span>制片国家/地区:</span><a href="javascript:void(0);"> 美国 / 加拿大.movie</a><br/>
</div>
</body>
</html>
3.0 选择器
01 . 基本选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* *通配符选择器 匹配任何元素 */
*{
margin: 0;
padding: 0;
}
/*元素选择器 选择相同的元素对相同的元素设置一种css样式选中页面中所有的此元素*/
div{
width: 100px;
height: 100px;
background: red;
}
/* id选择器 给标签设置一个id属性，在写样式时，在id名字前面加个 # */
#box{
width: 150px;
height: 150px;
background: bisque;
}
/* class选择器 给标签设置一个class属性，在写样式时，在class名字前面加个.一般给具有相同属性的元素设置同一个class */
.box{
width: 120px;
height: 120px;
background: blueviolet;
}
</style>
</head>
<body>
<!-- id > class > tagName(标签名) > * -->
<div id="box" class="box"></div>
<div></div>
<div class="box"></div>
<div class="box"></div>
<!--<span>1111</span><br/>-->
<!--<span>11111</span><br/>-->
<!--<span>1111</span><br/>-->
<!--<span>1111</span><br/>-->
<!--<p class="box"></p>-->
<!--<p class="box"></p>-->
<!--<p class="box"></p>-->
</body>
</html>
02. 复杂选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 群组选择器 对几个有相同属性的选择器进行样式设置 两个选择器之间必须用逗号隔开*/
/*div,p{*/
/*width: 120px;*/
/*height: 120px;*/
/*background: bisque;*/
/*}*/
/*p{*/
/*width: 120px;*/
/*height: 120px;*/
/*background: bisque;*/
/*}*/
div{
width: 100px;
height: 100px;
background: bisque;
}
/* ~ 兄弟选择器 操作的对象是该元素下的所有兄弟元素*/
/*div ~ p{*/
/*width: 100px;*/
/*height: 100px;*/
/*background: blueviolet;*/
/*}*/
/* > 子代选择器 选择某个元素下面的子元素*/
/*div > div{*/
/*width: 50px;*/
/*height: 50px;*/
/*background: blue;*/
/*}*/
/* + 相邻选择器操作的对象是该元素的同级元素选择div相邻的下一个兄弟元素选择到紧随目标元素后的第一个元素*/
div + p{
width: 100px;
background: blueviolet;
height: 100px;
}
</style>
</head>
<body>
<p>1</p>
<p>2</p>
<div>1</div>
<p>hah</p>
<div>2
<div>div1
</div>
</div>
<div>3</div>
<span></span>
<p>4</p>
<p>5</p>
</body>
</html>
03. 后代选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
li{
/*去掉li标签前面的东西*/
/*list-style: none;*/
width: 50px;
height: 50px;
background: bisque;
}
div ol li{
list-style: none;
}
</style>
</head>
<body>
<div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ol>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
04 .伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*LoVe HAte*/
a:link{/*link 未被点击的链接*/
color: red;
}
a:visited{/*已被点击的链接*/
color: blueviolet;
}
a:hover{/*鼠标悬停其上的元素 这个一定要掌握*/
color: yellowgreen;
}
a:active{/*鼠标已经再其上按下但是还没有释放的元素*/
color: aqua;
}
div{
width: 100px;
height: 100px;
background: bisque;
}
div:hover{ /*改变的是div本身*/
background: blueviolet;
/*cursor: pointer;*//*手指*/
/*cursor: help;*//*帮助*/
/*cursor: wait;*//*等待*/
cursor: default;/*默认*/
}
/*div:hover p{ !*改变的是p*!*/
/*width: 50px;*/
/*height: 50px;*/
/*background: blue;*/
/*}*/
a:link,a:visited,a:hover,a:active{
color: blue;
cursor: pointer;
/*去掉下划线*/
text-decoration: none;
}
</style>
</head>
<body>
<div>
<p></p>
</div>
<a href="http://www.baidu.com">去百度</a>
</body>
</html>
05. 复杂选择器的优先级
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*p.wrap{
width: 100px;
height: 100px;
background: bisque;
}*/
li{
list-style: none;
width: 50px;
height: 50px;
background: blueviolet;
}
#box .box ul.box1 li{/*122*/
background: blue;
}
#box #box1 li.wrap1{ /*211*/
background: yellowgreen;
}
</style>
</head>
<body>
<!--
复杂后代选择器
1.先比id(最高位) class（中间位） tagName（个数位）
1 2 3
2.id选择器个数不相等，id越多，优先级越高
3.id选择器个数相同,则看class,class多的优先级高
4.class个数相等，就看tagName个数
-->
<div id="box">
<div class="box" id="box1">
<ul class="box1">
<li class="wrap1">1</li>
<li>2</li>
<li class="wrap2">3</li>
<li id="wrap">4</li>
</ul>
</div>
</div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--<div class="wrap">1</div>-->
<!--<p class="wrap">2</p>-->
</body>
</html>
06. 小测验 ，学生表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
table{
width: 200px;
height: 200px;
border-collapse: collapse;
/*
collapse 边框合并，如果相邻的话，共用一个框
separate 默认值，边框分开，不合并
*/
}
tr{
/*文字水平居中*/
text-align: center;
}
</style>
</head>
<body>
<table border="1">
<caption><b>学员信息表</b></caption>
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>班级</th>
</tr>
</thead>
<tbody>
<tr>
<td>01</td>
<td rowspan="2">01</td>
<td>01</td>
</tr>
<tr>
<td>01</td>
<!--<td>01</td>-->
<td>01</td>
</tr>
<tr>
<td colspan="2">01</td>
<!--<td>01</td>-->
<td>01</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>01</td>
<td>01</td>
<td>01</td>
</tr>
</tfoot>
</table>
</body>
</html>
网友评论