属性选择器
<!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: #b5c1cd;
text-align:center;
color:greenyellow;
text-decoration: none;
margin-right: 5px;
font:bold 20px/50px Arial;
}
/*属性名=属性值（正则 ）
= 绝对等于
*= 包含这个元素
^= 以这个开头
$= 以这个结尾
*/
/*存在id属性的元素 a[id]{}
(属性名) a[id]{
color:red;
}
(属性名=属性值) a[id=first]{
background: indianred;
}
*/
/*class中有links的元素
a[class*=links] {
background: #a24fff;
}
*/
/* 选中href中以http开头的元素
a[href^=http]{
background: aqua;
}
*/
/*href以pdf结尾
a[href$=pdf]{
background: seagreen;
}
*/
</style>
</head>
<body>
<p class="demo">
<a href="http://www.baidu.com" class="links item first" id="first">1</a>
<a href="" class="links item active" target="_blank" title="test">2</a>
<a href="image/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.1、为什么要美化网页
1.有效传递页面信息
2.美化网页，页面漂亮，才能吸引用户
3.凸显页面的主题
4.提高用户的体验
span标签：重点要突出的字，使用span套起来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
#title1{
font-size: 50px;
}
</style>
<body>
欢迎学习<span id="title1">java</span>
</body>
</html>
3.2.字体样式
<style>
/*斜体 更细 大小 字体*/
p{
font: obliqe lighter 16px 楷体;
}
</style>
3.3.文本样式
1.颜色 color rgb rgba
2.文本对齐方式 text-align=center
3.首行缩进 text-indent:2em
4.行高 line-height
5.装饰 text-decoration (上中下划线)
6.文本图片水平对齐：vertical-align:middle
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
#title1{
font-size: 50px;
}
body{
font-family: 楷体;
}
h1{
font-size: 50px;
color: #a24fff;
}
.p1{
font-weight: bold;
}
.l1{
text-decoration: underline;
}
.l2{
text-decoration: line-through;
}
.l3{
text-decoration: overline;
}
</style>
<body>
<p class="l1">1111111</p>
<p class="l2">2222222</p>
<p class="l3">3333333</p>
欢迎学习<span id="title1">java</span>
<h1>心是净土，滋生万物</h1>
<p class="p1">倘若你的生命足够的纯洁，我们的心便可以滋生花，滋生草，滋生万物，小花招展着微笑，小草深情对视，从你的心开始成为净土的那一刻，就意味着你一定会有丰富的生命。</p>
<p>我一直在修行的路上，慢慢清空杂念，清空杂质，生命方才犹如水晶般清莹，我内在的力量总会越来越强大，总有一天，我会站在那一座属于我的高台，去眺望属于我的碧海蓝天。</p>
<p>心，是无比美丽的爱的结晶，生命来到这个世界上，是带着父母的爱来的，每个人的心之所以有力量，是因为父母注入了爱的力量</p>。
<p>我们的心，像一座城堡，华丽无比，又强大无比，心，是美丽的亭台楼阁，是支撑我们生命的支柱，在每一刻，宽容盛放，爱盛放，温暖盛放，温柔盛放。</p>
<p>每一个生命之所以美丽，是因为有着温柔无比的心，我爱着这个世界，所以不管风雨有多大，我都会迎面向你走来，不管岁月有多忧伤，我总是盛满温情，等待着陪你走一程。</p>
<p>心，能滋生万物，是因为内在的力量，它向阳，追光，积极，绽放，于是成为了光，我们的心灵，十分的渺小，却有着强大的力量，这就是爱的奇迹。</p>
<p>无论过去，现在还是未来，我都一直在专注自己的起心动念，过去的我有多痛苦，我就集中精力想着，过去一定会过去的，在有一天，我的杂念将制止，我将注入力量，获得的是生命的力量。</p>
<p>修行，看似简单，却是一生的事，心灵，看似渺小，却是生命的支撑，当我们不断修行，内在一定有一处栖息地，是属于你的净土，让智慧之花开放，让灵性之草成长，让心灵的阳光一直照耀，所以我们要一直走下去，在未来的远方，遇见更好的自己。</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="images/img.png" alt="">
<span>asdsadsfsdfdfsvdsdfs</span>
</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
/*颜色：
单词
RGB 0~F
RGBA-->
text-align排版
text-indent缩进
height:300px;
line-height:300px;行高和块的高度一致，就可以上下居中
*/
h1{
color:#a24fff;
text-align: center;
}
p{
text-indent: 2em;
}
.p3{
background: #3748ff;
height: 300px;
line-height:300px;
}
</style>
<body>
欢迎学习<span class="title1">java</span>
<h1>心是净土，滋生万物</h1>
<p class="p1">倘若你的生命足够的纯洁，我们的心便可以滋生花，滋生草，滋生万物，小花招展着微笑，小草深情对视，从你的心开始成为净土的那一刻，就意味着你一定会有丰富的生命。</p>
<p>我一直在修行的路上，慢慢清空杂念，清空杂质，生命方才犹如水晶般清莹，我内在的力量总会越来越强大，总有一天，我会站在那一座属于我的高台，去眺望属于我的碧海蓝天。</p>
<p class="p3">心，是无比美丽的爱的结晶，生命来到这个世界上，是带着父母的爱来的，每个人的心之所以有力量，是因为父母注入了爱的力量</p>。
<p>我们的心，像一座城堡，华丽无比，又强大无比，心，是美丽的亭台楼阁，是支撑我们生命的支柱，在每一刻，宽容盛放，爱盛放，温暖盛放，温柔盛放。</p>
<p>每一个生命之所以美丽，是因为有着温柔无比的心，我爱着这个世界，所以不管风雨有多大，我都会迎面向你走来，不管岁月有多忧伤，我总是盛满温情，等待着陪你走一程。</p>
<p>心，能滋生万物，是因为内在的力量，它向阳，追光，积极，绽放，于是成为了光，我们的心灵，十分的渺小，却有着强大的力量，这就是爱的奇迹。</p>
<p>无论过去，现在还是未来，我都一直在专注自己的起心动念，过去的我有多痛苦，我就集中精力想着，过去一定会过去的，在有一天，我的杂念将制止，我将注入力量，获得的是生命的力量。</p>
<p>修行，看似简单，却是一生的事，心灵，看似渺小，却是生命的支撑，当我们不断修行，内在一定有一处栖息地，是属于你的净土，让智慧之花开放，让灵性之草成长，让心灵的阳光一直照耀，所以我们要一直走下去，在未来的远方，遇见更好的自己。</p>
</body>
</html>
3.4.阴影
text-shadow:阴影颜色，水平偏移，垂直偏移，阴影半径
3.5超链接伪类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*默认的颜色*/
a{
text-decoration:none;
color: #000000;
}
/*鼠标悬浮的颜色*/
a:hover{
color: orange;
}
/*鼠标按住未释放的颜色*/
a:active{
color:green;
}
/*text-shadow:阴影颜色，水平偏移，垂直偏移，阴影半径*/
#price{
text-shadow: #37ff66 10px 3px 2px;
}
</style>
</head>
<body>
<a href="#">
<img src="images/R-C.jfif" alt="">
</a>
<p>
<a href="#">码出高效：java开发手册</a>
</p>
<p>
<a href="">作者：123</a>
</p>
<p id="price">
$99
</p>
</body>
</html>
3.6.列表
#nav{
width:300px;
background: #b5c1cd;
}
.title{
font-size:18px;
font-weight: bold;
text-indent: 1em;
line-height:50px;
background: red;
}
/*ul li*/
/*
list-style:none 去掉圆点
list-style:circle 空心圆
list-style:square 正方形
*/
ul li{
height:30px;
list-style:none;
text-indent:1em;
background:#37ff66 ;
}
a{
text-decoration:none;
font-size: 14px;
color:#000;
}
a:hover{
color:orange;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="style.css" 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></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>
</ul>
</div>
</body>
</html>
3.7.背景
背景颜色
/* 设置渐变颜色*/
background-image:linear-gradient(角度，颜色 占比，颜色 占比)
背景图片
<style>
div{
width: 1000px;
height: 700px;
border: 1px solid red; /*solid 实线*/
background-image:url("images/图片.jfif");/*默认是全部平铺的*/
}
.div1{
background-repeat:repeat-x;
}
.div2{
background-repeat:repeat-y;
}
.div3{
background-repeat: no-repeat;
}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 1000px;
height: 700px;
border: 1px solid red;
background-image:url("images/图片.jfif");/*默认是全部平铺的*/
}
.div1{
background-repeat:repeat-x;
}
.div2{
background-repeat:repeat-y;
}
.div3{
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>
盒子模型
4.1.什么是盒子模型
margin:外边距
padding：内边距
border：边框
4.2.边框
1.边框的粗细
2.边框的样式
3.边框的颜色
<!DOCTYPE html>标签：repeat,Day03,text,color,nbsp,background,font From： https://www.cnblogs.com/xclxcl/p/16756653.html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*body总有一个默认的外边距 需要margin：0，常见操作*/
h1,ul,li,a,body{
margin: 0;
}
h2{
font-size: 16px;
background-color:red ;
line-height: 30px;
margin: 0;
}
#box{
width:300px;
border:1px solid red;
}
form{
background: orange;
margin: 0;
}
div:nth-of-type(1) >input{
border:3px solid black;
}
div:nth-of-type(2) >input{
border:3px dashed #f8e5a4;
margin-top: 10px;
}
div:nth-of-type(3) >input{
border:3px solid #c396f5;
margin-top: 10px;
}
</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="email">
</div>
</form>
</div>
</body>
</html>