<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
</head>
<body>
<h2>1.给下面的div、span、p加上css样式，观察三种元素的区别</h2>
div: 独占一行，标签可以把文档分割为独立的、不同的部分。<br>
span：并非独占一行，多个span会并排排列，直到一行排满才会换行，标签被用来组合文档中的行内元素。<br>
p：独占一行，但是元素会自动在其前后创建一些空白，是段落标签。<br><br>
元素的类型:<br>
块级元素: 默认情况下独占一行的元素, 如: div p h1~h6 br hr<br>
行内元素: 默认情况下, 多个行内元素可以处在同一行。如：span input font…<br><br>
CSS是层叠样式表（Cascading Style Sheets）用来定义网页的显示效果。<br>
组织网页结构主要有两种方式：<br>
表格嵌套表格 <br>
DIV+CSS <br><br>
<div>div111</div>
<div>div111</div>
<div>div111</div>
<span>span111</span>
<span>span111</span>
<span>span111</span>
<p>p1111</p>
<p>p1111</p>
<p>p1111</p>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<title>引入css的四种方式</title>
<h3>
覆盖：样式听仔细的那部分<br>
(2)通过style标签引入css样式<br>
在head标签内部, 可以提供一个style标签, 在style标签内部可以选中元素进行修饰!<br>
<xmp>
2.<style type="text/css">
div {
...
}
</style>
</xmp>
(3) 在style{}里面写@import url();<br>
注意：如果导入进来的样式与本页面定义的样式重复，以本页定义样式为准。
<xmp>
3.<style type="text/css">
@import url();
</style>
</xmp>
</h3>
<style type="text/css">
@import url("CSS02.css");
p {
border:1px solid red; <!--在一行内可以写多个 -->
font-family:"黑体";
font-size=60px;
}
</style>
<!-- 4.******************************************************************-->
<h3>
(4)通过链接引入外部的css文件<BR>
通过head标签下的link标签可以引入外部的css文件<BR>
这种方式是将所有的css代码放在一个独立的文件中进行统一管理, 真正的实现了html代码和css代码的分离.<BR>
注意：重复样式以最后链接进来的CSS样式为准。<BR>
<xmp>
4.<link rel="stylesheet" href="CSS02.css"type="text/css"/>
</xmp>
</h3>
<link rel="stylesheet" href="CSS02.css"type="text/css"/>
</head>
<!-- 1.******************************************************************-->
<body>
<h3>
(1)通过标签上的style属性引入css样式<br>
大多数标签都可以具有style属性, 可以通过style属性为当前标签设置样式<br>
这种方式设置样式不推荐大量使用, 会造成页面结构的混乱, 不利于后期的维护及扩展.<br>
<XMP>
1.<div style="border:3px solid #999; width=200px; height=300px; "> 我是一个div</div>
</XMP>
</h3>
<div style="border:3px solid #999; width=200px; height=300px; "> 我是一个div</div>
<!-- ******************************************************************-->
<div>div111</div>
<div>div111</div>
<div>div111</div>
<span>span111</span>
<span>span111</span>
<span>span111</span>
<p>p1111</p>
<p>p1111</p>
<p>p1111</p>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<title>基本选择器</title>
<style type="text/css">
<!-- 1.标签名(元素名)选择器
通过标签的名称选中指定名称的标签进行样式的修饰格式:
元素名{}, 如: span{
}
<span></span>
-->
div{
border:1px solid red;
}
<!--
2.类(class)选择器
通过标签上的class属性, 可以为标签设置所属的类, 所有class值相同的标签则为一类, 可以通过类选择器选中这一类的标签进行修饰.
格式: .类名{ css属性 }, 如: .c1{}
-->
.aaa{
background-color: #2255cc;
}
<!--
3.ID选择器
通过标签上的id属性, 可以为标签设置所属的编号, id值的特点是在整个html中是独一无二的. 可以通过id值选中想要修饰的标签
格式: #id值{ css属性 }, 如: #d1{}
-->
#abc{
background-color:#11cccc;
}
</style>
</head>
<body>
<div> 我是一个div</div>
<div class="aaa">div111</div>
<div>div111</div>
<div>div111</div>
<span class="aaa">span111</span>
<span>span111</span>
<span>span111</span>
<p class="aaa">p1111</p>
<p name="xxx" id="abc">p1111</p>
<p name="xxx" id="edg">p1111</p>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>扩展选择器</title>
<style type="text/css">
div,span,p{
border:1px solid red;
}
/*1.后代选择器： #div1 span
选择父选择器选中的元素中符合子选择器的子孙元素
结果：div1的所有span都变色
*/
#div1 span{
background-color: green;
}
/*2.子元素选择器 #div2>span
选择父选择器选中的元素中符合子选择器的子元素
结果：只有这个元素的前面两个子元素span变色，后面的孙元素span不变色
*/
#div2 > span {
background-color: pink;
}
/*3.复合选择器(分组选择器) p,div逗号隔开
对多个不同选择器进行相同样式设置的时候应用此选择器。
结果：div3里面的子元素span变色和div3里面的所有p标签变色
*/
#div3 > span ,#div3 p{
background-color: yellow;
}
/* 4.属性选择器 标签[属性][...]并且都要满足
属性选择器可以根据元素的属性及属性值来选择元素。
*/
/* 4.1结果 div4里面所有含x属性的标签变色 */
#div4 *[x]{
background-color: gray;
}
/* 4.2结果 div5里面所有含x属性且x属性等于zz的标签变色 */
#div5 *[x='zz']{
background-color: #6666FF;
}
/* 4.3结果 div6里面所有1.含x属性且x属性等于zz 2含y属性 两个条件都满足的标签变色 */
#div6 *[x='zz'][y]{
background-color: #9966CC;
}
/*5.兄弟选择器 span+p
如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器。
结果：div7里面的子元素div，div里面的子元素span，span的下一个兄弟p变色。即最后一个p标签变色
*/
#div7 > div > span + p{
background-color: #3399CC;
}
/*6.nth选择器 nth-child(num) last-child firs-child*/
/*6.1 结果：div8里的span子元素的第三个变色*/
#div8 > span:nth-child(3){
background-color: #6666FF;
}
/*6.2 结果：div8里的span子元素的最后一个变色*/
#div8 > span:last-child {
background-color:#33FF00;
}
/*
7.伪元素选择器 标签名:伪元素 类名:标签名 类名:伪元素 都可以。
HTML中预先定义好的一些选择器。称为伪元素。
a:link 超链接未点击状态。
a:visited 被访问后的状态。
a:hover 光标移到超链接上的状态（未点击）。
a:active 点击超链接时的状态。
*/
a:link{
font-size:50px;
text-decoration:none; <!-- 文本没有下划线-->
}
a:hover{
font-size:20px;
color:red;
}
a:active{
font-size:100px;
color:green;
}
a:visited{
font-size:50px;
color:gray;
}
</style>
</head>
<body>
<div id="div1">
<span>我是一个span</span>
<span>我是一个span</span>
<div>
<p>我是一个p</p>
<span>我是一个span</span>
<p>我是一个p</p>
</div>
</div>
<br/>
<div id="div2">
<span>我是一个span</span>
<span>我是一个span</span>
<div>
<p>我是一个p</p>
<span>我是一个span</span>
<p>我是一个p</p>
</div>
</div>
<br/>
<div id="div3">
<span>我是一个span</span>
<span>我是一个span</span>
<div>
<p>我是一个p</p>
<span>我是一个span</span>
<p>我是一个p</p>
</div>
</div>
<br/>
<div id="div4">
<span x="xx">我是一个span</span>
<span>我是一个span</span>
<div>
<p x="xx">我是一个p</p>
<span x="xx">我是一个span</span>
<p>我是一个p</p>
</div>
</div>
<div id="div5">
<span x="zz">我是一个span</span>
<span>我是一个span</span>
<div>
<p x="zz">我是一个p</p>
<span x="xx">我是一个span</span>
<p>我是一个p</p>
</div>
</div>
</div>
<div id="div6">
<span x="zz">我是一个span</span>
<span>我是一个span</span>
<div>
<p x="zz" y="zz">我是一个p</p>
<span x="xx">我是一个span</span>
<p>我是一个p</p>
</div>
</div>
<br/>
<div id="div7">
<span>我是一个span</span>
<span>我是一个span</span>
<div>
<p>我是一个p</p>
<span>我是一个span</span>
<p>我是一个p</p>
</div>
</div>
<br/>
<div id="div8">
<span>我是一个span</span>
<span>我是一个span</span>
<span>我是一个span</span>
<span>我是一个span</span>
<div>
<p>我是一个p</p>
<span>我是一个span</span>
<p>我是一个p</p>
</div>
<span>我是一个span</span>
</div>
<br/>
<a href="http://www.baidu.com">百度</a>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<xmp>
盒子模型
border – 边框
Border-style:定义边框样式
border-width：边框宽度
border-color：边框颜色
注意：如果边框样式设置为none，那么无论设置多少宽度真实值都为0，即不可见也不占用空间。
border: 5px solid green;
border-top:5px solid green;
border-bottom: 5px solid black;
border-left: 5px solid gray;
border-right: 5px solid yellow;
padding – 内边距 接受长度值或百分比值，但不允许使用负值。
padding-top：上内边距
padding-right：右内边距
padding-bottom：下内边距
padding-left：左内边距
padding-top: 20px;
padding-bottom: 20px;
padding-left: 20px;
padding-right: 20px;
padding: 10px 20px 40px 60px;/*上、右、下、左*/
padding: 20px 10px;/*上下、左右*/
padding: 20px;/*四个边距*/
margin – 外边距
元素外创建额外的“空白”。这个属性接受任何长度单位、百分数值甚至负值。
margin-top：上外边距
margin-right: 右外边距
margin-bottom: 下外边距
margin-left: 左外边距
margin-top: 20px;
margin-bottom: 20px;
margin-left: 20px;
margin-right: 20px;
margin: 10px 20px 40px 60px;/*上、右、下、左*/
margin: 20px 10px;/*上下、左右*/
margin: 20px;/*上下左右*/
</xmp>
<style type="text/css">
#div1 {
border:3px solid red;
width:200px;
height:300px;
}
#div2 {
border-left-width:5px; /* div2的左边框的宽度，可以分开写*/
border-left-style:solid; /* div2的左边框是实线 */
border-left-color:green; /* div2的左边框的颜色 */
border-right:3px solid green; /* div2的右边框，可以一起赋予属性*/
border-top:3px solid blue; /* div2的上边框*/
border-bottom:3px solid yellow;/* div2的下边框*/
width:100px;
height:100px;
padding: 20px 20px 40px 40px; /*div2的内容距离边框的内边距 */
margin:10px 20px; /* div2的边框距离div1的外边距*/
}
</style>
</head>
<body>
<xmp>
<div id="div1">我是div1
<div id="div2">我是div2</div>
</div>
|------------div1-----------|
| |margin 外边距 |
| ---------div2--------- |
| | | | |
| | padding内边距 | |
| | | | |
| | 我是div2 | |
| | | |
| | | |
| | | |
| |-----border边框----- | |
|------------div1-----------|
</xmp>
<div id="div1">我是div1
<div id="div2">我是div2</div>
</div>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<xmp>
CSS 有三种基本的定位机制：普通流、浮动和绝对定位。
1.文档流：默认是文档流定位，元素从上到下，从左到右
2.float浮动可以改变元素类型
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
left 元素向左浮动。
right 元素向右浮动。
none 默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit 规定应该从父元素继承 float 属性的值。
</xmp>
<style type="text/css">
div{ border:3px solid gray;
width:200px;
height:300px;
}
#div1 {
background-color:red;
float:left;
}
#div2 {
background-color:yellow;
float:left;
}
#div3{
background-color:green;
float:left;
}
#div4{
width:200px;
height:300px;
background-color:gray; /*它不再处于文档流中，所以它不占据空间，实际上覆盖住了框4，使框4从视图中消失。*/
clear:both; /*告诉哪里不允许有浮动clear ,所以结果div4是在没有左右浮动的下边出现*/
/*如果没有clear，这个样式在左边水底被压着，只有文字出现在下面*/
}
#span1{
width:200px;
height:300px;
border:3px solid green;
background-color:pink;
float:left;
}
</style>
</head>
<body>
<div id="div1">
div1
</div>
<div id="div2">
div2
</div>
<div id="div3">
div3
</div>
<span id="span1">
span1
</span>
<div id="div4">aaabbbcccddd</div>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<xmp> position:可以选择不同类型的定位，这会影响元素框生成的方式。
position 属性值的含义：
static 正常生成。
relative 相对定位
absolute 绝对定位
fixed 类似于绝对定位，不过其包含块是视窗本身。
相对定位 position:relative;
1.仅仅基于原来的位置进行改变.
2.元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
3.TOP bottom left right
在相对定位时，通过这些属性指定当前元素基于当前元素的初始位置的位移进行定位。
4.z-index
其实就是在底层和在顶层的感觉，z轴。
指定元素的堆叠顺序，数值越大离用户越近，数值越小离用户越远，此值可以为负数。
</xmp>
<title>相对定位</title>
<style type="text/css">
div{
border: 2px solid #999;
}
#div1{
width:300px;
height:500px;
}
#div2{
background-color: red;
width:100px;
height:100px;
}
#div3{
background-color: green;
width:100px;
height:100px;
position: relative; /* 相对定位 position:relative;*/
left:10px; /* 距离初始位置左边10px */
top:10px; /* 距离初始位置上边10px */
z-index:-100; /* 在底层-100 */
}
#div4{
background-color: yellow;
width:100px;
height:100px;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">div2</div>
<div id="div3">div3</div>
<div id="div4">div4</div>
</div>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<xmp> position:可以选择不同类型的定位，这会影响元素框生成的方式。
position 属性值的含义：
static 正常生成。
relative 相对定位
absolute 绝对定位
fixed 类似于绝对定位，不过其包含块是视窗本身。
绝对定位 position:absolute;
1.做了绝对定位的那块从文档流中消失，下一个就从消失的位置上布置，而不是从下面开始，然后被绝对定位的那块覆盖
2.找祖先中最近的有任何定位的做绝对定位，如果祖先无定位，以浏览器做定位。
3.TOP bottom left right
在绝对定位时，通过这些属性指定当前元素基于最近的有定位的祖先元素定位位置关系。
4.z-index
其实就是在底层和在顶层的感觉，z轴。
指定元素的堆叠顺序，数值越大离用户越近，数值越小离用户越远，此值可以为负数。
</xmp>
<style type="text/css">
div{
bolder:3px solid gray;
}
#div1{
width:100px;
height:100px;
background-color:green;
position:relative; /*找祖先中最近的有任何定位的做绝对定位，如果祖先无定位，以浏览器做定位*/
}
#div2{
width:100px;
height:100px;
background-color:red;
}
#div3{
width:100px;
height:100px;
background-color:yellow;
position:absolute; /*position:absolute 绝对定位 在绝对定位时，通过这些属性指定当前元素基于最近的有定位的祖先元素定位位置关系。 */
top:5px; /*距离最近的有定位的div1的顶端距离5px*/
left:5px; /*距离最近的有定位的div1的左边距离5px*/
}
#div4{
width:100px;
height:100px;
background-color:blue;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">div2</div>
<div id="div3">div3</div>
<div id="div4">div4</div>
</div>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<!--
display属性 -- 设置元素的显示方式
block: 块级元素的默认值
inline: 行内元素的默认值
inline-block: 既具备行内元素的特性(可以同行显示), 也具备块级元素的特性(可以设置宽高)
none: 用来隐藏一个元素, 这种方式的隐藏是真的隐藏了, 元素在原位置不再占用空间
visibility: hidden 这种方式也可以隐藏一个元素, 但是这种隐藏只是元素不显示了, 在原位置仍然占用空间（很少用到）
-->
<style type="text/css">
div{
border:3px solid gray;
}
#div1{
width:300px;
height:500px;
}
#div2{
width:100px;
height:100px;
background-color:red;
}
#div3{
width:100px;
height:100px;
background-color:yellow;
display: inline-block; /*display:inline-block行内块 既具备行内元素的特性(可以同行显示), 也具备块级元素的特性(可以设置宽高) */
/* 这个div设置行内块，下个div也设置行内块，两个div在一行显示 */
/*display:none;*/ /*display:none 用来隐藏一个元素, 这种方式的隐藏是真的隐藏了, 元素在原位置不再占用空间 */
/*visibility: hidden;*/ /*visibility: hidden; 用来隐藏一个元素, 元素仍然在原位置上占用空间但是不显示*/
}
#div4{p
width:100px;
height:100px;
background-color:blue;
display:inline-block; /*display:inline-block行内块 既具备行内元素的特性(可以同行显示), 也具备块级元素的特性(可以设置宽高) */
}
span{
background-color:red;
display:block; /*display:block; 块级元素的默认值 使span成块分部，而不是行内 */
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">div2</div>
<div id="div3">div3</div>
<div id="div4">div4</div>
</div>
<span>aaa</span>
<span>bbb</span>
<span>ccc</span>
</body>
</html>