推荐书籍：码出高效: Java 开发手册
2.2 层次选择器
idea里代码规范是按：ctrl +alt+L快捷键
注释快捷键：ctrl+/
1.后代选择器:在某个元素的后面 祖爷爷 爷爷 爸爸 你
<style>
/*p{*/
/* background: #02ff00;*/
/*}*/
/* 后代选择器 */
body p{
background: red;
}
</style>
2.子选择器: 只有一代 ，儿子
/* 子选择器*/
body>p{
background: #3cbda6;
}
3.相邻兄弟选择器：同辈（对下相邻）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*p{*/
/* background: #02ff00;*/
/*}*/
/* 后代选择器 */
/* body p{*/
/* background: red;*/
/* }*/
/* 子选择器*/
/* body>p{*/
/* background: #3cbda6;*/
/* }*/
/* 兄弟选择器 :只有一个，相邻（向下）*/
.active + p {
background: #a13d30;
}
</style>
</head>
<body>
<p>p0</p>
<p class="active">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>
<p>p4</p>
</li>
<li>
<p>p5</p>
</li>
<li>
<p>p6</p>
</li>
</ul>
<p class="active">p7</p>
<p>p8</p>
</body>
</html>
结果图：
4.通用选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*p{*/
/* background: #02ff00;*/
/*}*/
/* 后代选择器 */
/* body p{*/
/* background: red;*/
/* }*/
/* 子选择器*/
/* body>p{*/
/* background: #3cbda6;*/
/* }*/
/* 兄弟选择器 :只有一个，相邻（向下）*/
/* .active + p {*/
/* background: #a13d30;*/
/* }*/
/*通用兄弟选择器，当前选中元素的向下的所有兄弟元素*/
.active~p{
background: green;
}
</style>
</head>
<body>
<p>p0</p>
<p class="active">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>
<p>p4</p>
</li>
<li>
<p>p5</p>
</li>
<li>
<p>p6</p>
</li>
</ul>
<p class="active">p7</p>
<p>p8</p>
</body>
</html>
结果图：
2.3结构 伪类选择器
伪类：是加了条件
<!--避免使用id class选择器-->
<style>
/* ul的第一个子元素*/
ul li:first-child{
background: green;
}
/* ul的最后一个子元素*/
ul li:last-child{
background: red;
}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--避免使用id class选择器-->
<style>
/* ul的第一个子元素*/
ul li:first-child{
background: green;
}
/* ul的最后一个子元素*/
ul li:last-child{
background: red;
}
/*选中p1:定位到父元素，选择当前的第一个元素
定位当前元素的同类元素的第一个当第一个元素不是p标签修改这里面p:nth-child(1)的数字即可
选择当前P元素的负级元素，选中父级元素的第一个子元素，并且是当前元素才生效
这个按顺序选，会被其它元素影响
*/
p:nth-child(2){
background: aqua;
}
/*选择父元素下的P的第二个元素，按照类型选 不会被其它的标签影响*/
p:nth-of-type(2){
background:yellow;
}
</style>
</head>
<body>
<!-- <h1>h1</h1>-->
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
</body>
</html>
2.4属性选择器（常用）
id + class 结合
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 后代选择器-->
<style>
.demo a{
float:left;
display: block;
height: 50px;
width: 50px;
border-radius: 10px;
background: #2700ff;
text-align: center;
color:gray;
/*去掉下划线*/
text-decoration: none;
/* 外边距*/
margin-right: 5px;
/*粗体 字体的大小/行高*/
font: bold 20px/50px Arial;
}
/* 属性名， 属性名 = 属性值（正则）
= 是绝对等于
*= 是包含这个元素
^=以这个元素开头
$ 以这个元素结尾
*/
/* 存在ID属性的元素 a[]{}*/
/* a[id]{*/
/* background: yellow;*/
/* }*/
/*id=first的元素*/
/* a[id=first]{*/
/* background: yellow;*/
/* }*/
/* class中有links的元素*/
/* a[class*="links"]{*/
/* background: yellow;*/
/* }*/
/*!* 选择href中以http开头的元素*!*/
/* a[href^=http]{*/
/* background: yellow;*/
/* }*/
a[href$=doc]{
background: yellow;
}
</style>
</head>
<body>
<p class="demo">
<a href="http://www.baidu.com" class="links item first" id="first">1</a>
<!-- target="_blank"在新页面打卡-->
<a href="http://blog.kuangstudy.com"class="links item active" target="_blank" title="test">2</a>
<a href="images/123.html" class="links item ">3</a>
<a href="images/123.png" class="links item">4</a>
<a href="images/123.jpg" class="links item">5</a>
<a href="abc"class="links item">6</a>
<a href="/a.pdf"class="links item">7</a>
<a href="/abc.pdf"class="links item">8</a>
<a href="abc.doc"class="links item">9</a>
<a href="abcd.doc"class="links item last">10</a>
</p>
</body>
</html>
=
*=
^=
$=
3.美化网页元素
3.1 为什么要美化元素
1.有效的传递页面信息
2.美化网页，页面漂亮，才能吸引客户
3.凸显页面的主题
4.提高用户体验
span标签：重点要突出的字，使用span 套起来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#title1{
font-size: 50px;
}
</style>
</head>
<body>
欢迎学习 <span id="title1">Java</span>
</body>
</html>
结果图：
3.2 字体样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
font-family:字体
font-size: 字体大小
font-weight:字体粗细
color: 字体颜色
-->
<style>
body{
font-family: "Arial Black",楷体;
color: brown;
}
h1{
font-size: 50px;
}
.p1{
font-weight:lighter ;
}
</style>
</head>
<body>
<h1>故事介绍</h1>
<p class="p1">
昔日*工程师卫三穿成星际失学儿童，靠着捡垃圾变废为宝，终于赶在开学季攒了一笔钱，立刻要去报名上学。
</p>
<p>
卫·文静·贫穷·工程师：“……”
</p>
<p>
When I wake up in the morning，
You are all I see;
</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 字体风格
oblique ：斜体
bolder：加粗
12px：大小
-->
<style>
p{
font:oblique bolder 12px "楷体";
}
</style>
</head>
<body>
<p>
昔日*工程师卫三穿成星际失学儿童，靠着捡垃圾变废为宝，终于赶在开学季攒了一笔钱，
</p>
</body>
</html>
3.3 文本样式
1.颜色 color rgb rgba
2.文本对齐的方式 text-align = center
3.首行缩进 text-indent:2em
4.行高 line-height 单行文字上下居中：line height = height
5.装饰（如下划线） text-decoration
6.文本图片水平对齐：vertical-align:middle
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
颜色表示：
单词
RGB：0-F
RGBA A: 0~1 A:是透明度设置
text-align:文本排版 居中 居左 居右
text-indent: 2em 段落 首行缩进两个字母
行高 和 块的高度一致 就可以上下居中:
height: 300px;
line-height: 300px;
text-decoration: underline 下划线
text-decoration: line-through; 中划线
text-decoration: overline; 上划线
-->
<style>
h1{
color: rgba(0,255,255,0.9);
text-align: center;
}
.p1{
text-indent: 2em;
}
.p3{
background: #2700ff;
height: 300px;
line-height: 300px;
}
.l1{
text-decoration: underline;
}
.l2{
text-decoration: line-through;
}
.l3{
text-decoration: overline;
}
/*a（标签）超链接去下划线*/
a{
text-decoration: none;
}
</style>
</head>
<body>
<!--a 标签默认有下划线-->
<a href="">111234</a>
<p class="l1">1234567</p>
<p class="l2">1234567</p>
<p class="l3">1234567</p>
<h1>故事介绍</h1>
<p class="p1">
昔日*工程师卫三穿成星际失学儿童，靠着捡垃圾变废为宝，终于赶在开学季攒了一笔钱，立刻要去报名上学。
</p>
<p>
卫·文静·贫穷·工程师：“……”她打算将来成为一个机甲师，据说特别赚钱，还和自己本行息息相关，成了一名机甲单兵
</p>
<p class="p3">
When I wake up in the morning，
You are all I see;
</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
水平对齐要有参照物 如a 与 b
-->
<style>
img,span{
vertical-align: middle;
}
</style>
</head>
<body>
<p>
<img src="data:images/7.jpg" alt="">
<span> abcnnnnnnxxnnnnnxn</span>
</p>
</body>
</html>
3.4阴影
/*text-shadow:阴影颜色 水平偏移 垂直偏移 阴影半径*/
#price{
text-shadow: #3cc7f5 10px -10px 2px;
}
3.5超链接伪类
正常情况下，a,a:hover
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*默认的颜色*/
a{
/* 除掉下滑线*/
text-decoration: none;
color: #000000;
}
/* 鼠标悬浮的状态*/
a:hover{
color: orange;
font-size: 50px;
}
/*鼠标按住未释放的状态*/
a:active{
color: green;
}
a:visited{
color: gray;
}
/*text-shadow:阴影颜色 水平偏移 垂直偏移 阴影半径*/
#price{
text-shadow: #3cc7f5 10px -10px 2px;
}
</style>
</head>
<body>
<a href="#">
<img src="data:images/11.jpg" alt="">
</a>
<p>
<a href="#">码出高效:Java开发手册</a>
</p>
<p>
<a href="">作者：孤近老师</a>
</p>
<p id="price">
￥99
</p>
</body>
</html>
3.6列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表样式</title>
<link href="css/style.css"rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="nav">
<h2 class="title">全部商品分类</h2>
<ul>
<li><a href="#">图书</a> <a href="#">音像</a> <a href="#">数字商品</a></li>
<li><a href="#">家用电器</a> <a href="#">手机</a> <a href="#">数码</a></li>
<li><a href="#">电脑</a> <a href="#">办公</a></li>
<li><a href="#">家居</a> <a href="#">家装</a> <a href="#">厨具</a></li>
<li><a href="#">服饰鞋帽</a> <a href="#">个护化妆</a></li>
<li><a href="#">礼品箱包</a> <a href="#">钟表</a> <a href="#">珠宝</a></li>
<li><a href="#">食品饮料</a> <a href="#">保健食品</a></li>
<li><a href="#">彩票</a> <a href="#">旅行</a> <a href="#">充值</a> <a href="#">票务</a></li>
</ul>
</div>
</body>
</html>
#nav{
width:300px;
background: grey;
}
.title{
font-size:18px;
font-weight: bold;
/*text-indent: 1em; 行间距缩进*/
text-indent: 1em;
line-height: 30px;
background: red;
}
/*ul li*/
/*ul{*/
/* background: grey;*/
/*}*/
ul li{
height: 30px;
/*list-style: none; 把每行前面的小点去掉
list-style: circle;把每行前面的实心小点变成空心
list-style: decimal;变成有序列表 数字
list-style: square;变成正方形
*/
list-style: none;
text-indent: 1em;
}
a{
text-decoration: none;
font-size: 14px;
color: #000;
}
a:hover{
color: orange;
text-decoration: underline;
}
修改加了图片的表格：
#nav{
width:300px;
background: grey;
}
.title{
font-size:18px;
font-weight: bold;
/*text-indent: 1em; 行间距缩进*/
text-indent: 1em;
line-height: 30px;
/*颜色 图片 图片位置 平铺方式*/
background: red url("../images/3.jpg") 200px 10px no-repeat;
}
/*ul li*/
/*ul{*/
/* background: grey;*/
/*}*/
ul li{
height: 30px;
/*list-style: none; 把每行前面的小点去掉
list-style: circle;把每行前面的实心小点变成空心
list-style: decimal;变成有序列表 数字
list-style: square;变成正方形
*/
list-style: none;
text-indent: 1em;
background-image: url("../images/2.jpg") ;
background-repeat: no-repeat;
background-position: 200px 2px;
}
a{
text-decoration: none;
font-size: 14px;
color: #000;
}
a:hover{
color: orange;
text-decoration: underline;
}
3.7背景
背景颜色
背景图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 1000px;
height:1200px;
/*border: 1px solid red;第一个为边框的粗细 第二个边框的样式 颜色*/
border: 1px solid red;
background-image: url("images/12.jpg");
/* 默认是全部平铺的*/
}
/*background-repeat: repeat-x;水平平铺*/
.div1{
background-repeat: repeat-x;
}
/* background-repeat: repeat-y;垂直平铺*/
.div2{
background-repeat: repeat-y;
}
.div3{
background-repeat: no-repeat;
}
</style>
</head>
<body>
<!--div默认为空标签 可以在里面放东西-->
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>
网站：Grabient
3.8渐变
<style>
body{
background-color: #FFFFFF;
background: linear-gradient(19deg,#21D4FD 0%, #97ff21 100%);
}
4盒子模型
4.1什么是盒子
margin:外边距
padding:内边距
border:边框
4.2边框
1.边框的粗细
2.边框的样式
3.边框的颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h1,u1,li,a,body{
/*body 总有一个默认的外边距margin = 0 padding: 0 常见操作;
text-decoration: none; */
margin: 0;
padding: 0;
text-decoration: none;
}
/*border: 粗细 样式 颜色*/
#box{
/*border: 粗细 样式 颜色*/
width: 300px;
border:1px solid red ;
}
h2{
font-size: 16px;
background-color: #3cbda6;
line-height: 30px;
color: white;
}
/* form标签选择器*/
form{
background: #3cbda6;
}
div:nth-of-type(1) input{
border: 3px solid black;
}
/*dashed 虚线*/
div:nth-of-type(2) input{
border: 2px dashed #4d0b8c;
}
div:nth-of-type(3) input{
border: 2px dashed #008c27;
}
</style>
</head>
<body>
<div id="box">
<h2>会员登录</h2>
<form action="#">
<div>
<span>用户名:</span>
<input type="text">
</div>
<div>
<span>密码:</span>
<input type="text">
</div>
<div>
<span>邮箱:</span>
<input type="text">
</div>
</form>
</div>
</body>
</html>
4.3内外边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 外边距的妙用：居中元素-->
<style>
/*border: 粗细 样式 颜色*/
#box{
/*border: 粗细 样式 颜色*/
width: 300px;
border:1px solid red ;
/*margin: 0 auto; 上下为0 左右自动对齐 margin 里面有四个元素 上下左右 写两个就代表前一个是上下 后一个是左右*/
margin: 0 auto;
}
/*
顺时针旋转
margin:0 上下左右
margin: 0 1px 0代表上下 1px 代表左右
margin: 0 1px 2px 3px 上右下左
*/
h2{
font-size: 16px;
background-color: #3cbda6;
line-height: 30px;
color: white;
margin:0 1px 2px 3px;
}
/* form标签选择器*/
form{
background: #3cbda6;
}
input{
border: 1px solid black;
}
div:nth-of-type(1){
padding: 10px 2px;
}
</style>
</head>
<body>
<div id="box">
<h2>会员登录</h2>
<form action="#">
<div>
<span>用户名:</span>
<input type="text">
</div>
<div>
<span>密码:</span>
<input type="text">
</div>
<div>
<span>邮箱:</span>
<input type="text">
</div>
</form>
</div>
</body>
</html>
盒子的计算方式：你的元素到底多大？
margin + border + padding + 内容宽度