Cascading Style Sheets(级联样式表)
CSS是一种样式表语言，用于HTML文档的控制外观，定义布局。
HTML与CSS关系：
HTML是网页内容
CSS是网页样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.p1{
color: red;
font-size: 24px;
font-family: 楷体;
background-color: aquamarine;
}
</style>
</head>
<body>
<!--
css为html标签修饰外观
-->
<!--a href="">
<font color="red">
<b>百度</b>
</font>
</a>
-->
<!--a href="" style="color: red;font-size: 20px">百度</a-->
<a href="" class="p1">百度</a>
<a href="" class="p1">搜狐</a>
<a href="" class="p1">新浪</a>
<br />
<a class="p1">QQ浏览器</a>
</body>
</html>选择器优先级
<head>
<meta charset="utf-8" />
<title></title>
<style>
/*css注释
内嵌样式表
*/
.t1{
color: blue;
}
/*
类选择器
*/
a{
color: blue;
}
p{
color: red;
}
/*
通配选择器
*/
*{
font-size: 15px;
}
/*
id选择器 唯一的*/
#aid{
color: chocolate;
}
/*选择器优先级
匹配标签越多，优先级越低，重叠选中标签时，使用优先级高的样式，但低优先级与高优先级没有重叠的样式
也会添加上去
*/
</style>
</head>
<body>
<!--
行内样式表，只对所在标签进行修饰，优先级最大。
行内样式表>aid选择器>类选择器>标签选择器>通配选择器.
-->
<a href="" style="color: black;font-size: 20px;font-family: 楷体;" class="t1" >腾讯</a>
<a href="" id="aid">新浪</a>
<a href="" >微博</a>
<p>段落1</p>
<p>段落2</p>
</body>
</html>
css里的部分文本
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.p1{
color: #C6EB94;
font: size 20px;/* px是像素单位，css中的尺寸需要加单位*/
font-family: 楷体;
font-weight: 700;/*加粗*/
/*text-align: center; 文字水平对齐*/
font-style: italic;/*斜体文本*/
/* text-decoration: underline; 修饰文本下添加下划线*/
/*text-decoration: line-through; 修饰文本 添加删除线*/
/*line-height: 50px;控制行高*/
/*letter-spacing: 20px;控制字符单词间距*/
/*word-spacing: 20px;控制英文单词间距*/
text-indent: 2em;
/*text-indent: 2em; em当前文本中一个字符的大小的像素*/
}
a{
text-decoration: none;
}
/*
控制字符被鼠标指示后的浮动变化。
*/
a:hover{
text-decoration: underline;
color: #C6EB94;
}
</style>
</head>
<body>
<p class="p1">
列表属性可以放置，改变列表项标志，或者将图标作为列表项标志。
列表属性可以放置，改变列表项标志，或者将图标作为列表项标志。
列表属性可以放置，改变列表项标志，或者将图标作为列表项标志。
</p>
<a herf="">百度1</a>
<a herf="">百度2</a>
<a herf="">百度3</a>
<a herf="">百度4</a>
</body>
</html>段落背景和列表
1.段落背景：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
p{
background-color: aqua;
width: 900px;
height: 900px;
background-image: url(img/rw.png) ;/*添加背景图片*/
background-repeat:no-repeat;/*背景不重复*/
background-position: center ;/* 背景位置 水平（left center right ）垂直（top bottom ） */
}
</style>
</head>
<body>
<p>
段落标签
</p>
</body>
</html>2.列表：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/*
后代选择器 对某个父类标签下的子类进行修饰
*/
.u1 li{
color: aqua;
list-style-type: none;/*控制列表前的排序标志符号*/
list-style-image: url(img/rw1.png);/*在列表前的标志改为图标*/
list-style-position: inside;/*图标位置 是在列表里面还是列表外面（inside outside）*/
/*list-style: none outside url(img/rw1.png); 对列表项一种简写的修饰方式*/
}
</style>
</head>
<body>
<ul class="u1">
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ul>
<ul class="u2">
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ul>
</body>
</html>css伪类和图片透明度：
鼠标移入移出标签以及相应操作时，标签发生特殊变化。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
a{
color: aqua;
}
/*
当鼠标移动到选择器对应的标签时，自动切换到此样式表
*/
a:hover{
color: red;
font-size: 20px;
}
/*
当鼠标点击选择器对应的标签时，自动切换到此样式表
*/
a:active{
color: blue;
}
p:hover{
color: red;
background-color: aqua;
}
p:active{
color: blue;
}
.both:hover{
background-color: blue;
}
.both:active{
background-color: crimson;
}
/*当拥有输入功能的标签，获得鼠标焦点时，自动切换到此样表达式*/
input:focus{
background-color: aquamarine;
}
img{
opacity: 0.5;
}
img:hover{
opacity: 1;/*图片透明度范围为0-1.0*/
}
</style>
</head>
<a href="">百度</a>
<p>段落</p>
<input type="button" value="保存" class="both"/><br />
<input /><br />
<input /><br />
<input /><br />
<input /><br />
<img src="img/rw.png"/>
</body>
</html>块级，行级，行级块标签
1.块级标签：无论内容多少 都会独自占据一行的。
2.行级标签：只占自身大小的标签，不会占一行。
3.行级块标签：不占一行，又可以设置宽高.
div和span:
块级标签和行级标签中的两个纯净标签；
1.块级:div.
2.行级:span.
display:
可以修饰标签的类型
1.block：改为块级标签
2.inline：改为行级标签
3.inline-block：改为行级块标签
4.none：改为空标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
块级标签:可以设置宽高,主要用来进行网页的布局.例如 p h1-h6
其中div是一个纯洁的块级标签,没有任何附加样式，我们给它设置什么样式，它变为什么样式。
-->
<!--
display:特定条件下可以修饰标签的类型.
1.block：改为块级标签
2.inline：改为行级标签
3.inline-block：改为行级块标签
4.none：改为空标签
-->
<p style="background-color: chartreuse; ">aaa</p>
ppp
<h1 style="display: inline;">bbb</h1>
<div style="background-color: chartreuse; width: 200px;height: 200px; display: inline-block;">div是一个纯洁的块级标签</div>
<!--
行级标签:只占内容的大小，不会占一行，设置宽高也无效，例如a b s i
主要用来对网页上的文字进行修饰。
span是一个纯洁的行级标签，对网页上的文字进行选中，修饰。
-->
<a href="" style="width: 100px;height: 100px;">cccc</a>
<s style="display:block;">BBBB</s>
<span style="color: red; text-decoration: underline;">DDDD</span>
<!--
常用标签 div span a 表格 表单 列表
-->
<!--
行级块标签：不占一行，又可以设置宽高
-->
<img src="img/rw.png" width="50" height="50"/><br />
<input style="width:50px ; height:10px;"/>
</body>
</html>盒子模型：
盒子模型，每个标签都想一个盒子，网页布局其本质就是摆放盒子。 每个盒子分为了4个区域： 内容区：放内容的区域， 内边距：内容区到外边的距离， 边框：标签的最外层， 外边距：一个标签距离另一个标签之间的距离。
标签大小：内容区+内边距+外边距的大小。
设置内容区和内边距：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box{
background-color: aqua;
/*width和height仅仅只是设置内容区的大小，不是标签的大小
标签大小是内容区大小+内边距+外边距的大小。
*/
width: 100px;
height: 100px;
/* 设置内边距 padding- /padding */
/*padding:10px;*/
/*简化
padding: 5px 10px 15px 20px; 上 右 下 左
padding:10px 20px; 上下 左右
*/
}
.box1{
width: 65px;
height: 25px;
padding: 10px 25px;
background-color: greenyellow;
}
.box2{
width:270px;
height: 70px;
padding: 15px 65px;
background-color: red;
}
</style>
</head>
<body>
<!--
盒子模型，每个标签都想一个盒子，网页布局其本质就是摆放盒子。
每个盒子分为了4个区域：
内容区：放内容的区域，
内边距：内容区到外边的距离，
边框：标签的最外层，
外边距：一个标签距离另一个标签之间的距离。
-->
<div class="box">
A
</div>
<div class="box1">
新闻热点
</div>
<div class="box2">
<img src="img/ffyc.png" style="display: block;"/>
</div>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
/*去掉所有标签默认的外边距和内边距。*/
margin: 0px;
padding: 0px;
}
/*
body{
margin: 0px;默认会有8px的外边距，此处去除body标签默认外边距。
}
*/
.box{
background-color:aqua;
width: 180px;
height: 180px;
margin-top: auto;
}
.box1{
background-color:red;
width: 180px;
height: 180px;
/*
margin设置外边距。
margin-top: 10px;
margin-left: 10px;
*/
margin: 10px;
}
.box2{
background-color:greenyellow;
width: 180px;
height: 180px;
/*
auto设置距离为自动最大
左右都为auto时，标签只有居中，才会左右都最大。
上下的外边距不能设置为自动，设置自动时为0，
*/
margin-left: auto;
margin-right: auto;
margin-top: 10px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="box">
盒子模型
</div>
<div class="box1">
盒子模型1
</div>
<div class="box2">
盒子模型2
</div>
</body>
</html>文档流
文档中的标签在排列时所占用的位置。 将窗体自上而下分成一行行 ，并在每行中按从左至右的顺序排放标签，即为文档流。
网页布局就是打破默认的文档流。
浮动：
浮动会使标签脱离原来的文档流（默认的二维平面），悬浮起来。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.nav{
background-color: greenyellow;
padding: 10px 30px;
float: left;
}
</style>
</head>
<body>
<!--
浮动：浮动会使标签脱离原来的文档流（默认的二维平面），悬浮起来。
float:left/right/none;
浮动后的标签不会占用原来文档流中的位置，下面的标签就会上移，
跑到浮动标签的下面，影响后面网页的布局。
-->
<div class="nav">新闻首页</div>
<div class="nav">体育新闻</div>
<div class="nav">科技前沿</div>
<div class="nav">娱乐快报</div>
<div style="clear: left;"></div><!--清除浮动-->
<div>abcd</div>
</body>
</html>定位
定位的基本思想很简单，它允许你定义的标签相对于其正常位置，或者相对于父标签、另一个标签甚至浏览器窗口本身而出现的位置。
1.相对定位：
相对定位是一个非常容易掌握的概念. 相对于它的起点进行移动，移动后原来的位置还被占用。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box1{
background-color: red;
width: 100px;
height: 100px;
position: relative;/*开启相对定位，以自己为参照物，不脱离原来的文档流*/
left: 100px;
}
.box2{
background-color: blue;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="box1">div1</div>
<div class="box2">div2</div>
</body>
</html>2.绝对定位：
移动时的参照物：离他最近的 开启了定位的父级标签，如果所有父级标签都没开启定位，那么它以浏览器的边框为参照物。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box1{
background-color: red;
width: 100px;
height: 100px;
position: absolute;/*开启绝对定位，立即脱离原来的文档流*/
left:100px;
top: 100px;
/*
移动时的参照物：
离他最近的 开启了定位的父级标签，如果所有父级标签都没开启定位，
那么它以浏览器的边框为参照物。
一般情况下开启另一个标签的绝对定位，父类一般开启相对定位。
*/
}
.box2{
background-color: blue;
width: 100px;
height: 100px;
}
.main{
background-color: antiquewhite;
width: 200px;
height: 200px;
position: relative;
}
</style>
</head>
<body>
<div class="main">
div3
<div class="box1">div1</div>
</div>
<div class="box2">div2</div>
</body>
</html>
