html部分
<!--
<span>
默认占一行
<div>
布局标签,默认占一行,配合css(层叠样式表)使用,用来美化html页面
css写在style标签里面
float:left
左浮动,因为div默认占一行,那么加了左浮点,就去掉了占一行,而且默认把标签左对齐
但是其实是不占位置的,就相当于浮在上面的,如果后面写了一个新的div,那么这个div默认是从行首开始显示
如果第一个浮动的div比较大,那么我们新写的div就会在浮动的div下面,就会被浮动的div遮住了
一行浮满了会自动跳到下一行
clear:left
清除浮点,还可以写both,right,相当于告诉浏览器,前面的float现在占空间了,我要重新在下一行显示了
height: 60px;
div的高度
width: 33%;
div的宽度
border-color: red;
div的边框颜色
border-style: solid;
div的边框类型
border: 1px solid red;
上面的边框,类型,颜色的缩写
color: white;
文字的颜色
font-size: xx-large;
文字的大小
text-decoration: none;
文字修饰,比如下划线
line-height: 50px;
设置字体行间的距离,不允许出现负数,一般用于div和文字之间的位置调整
一个字有默认的行高,就是一个字的开头和结尾就是行高,并且是垂直居中的,现在我们调整行高,调到和div一样大
因为字是垂直居中的,所以会自动调整到中间,这样就相当于在整个div垂直居中
padding-top :10px
padding-right :10px
padding-bottom :10px
padding-left :10px
上面是内边距,顺时针,直接padding:10,10,10,10也可以,是顺时针
就拿padding-top来说,我们如果在已经指定高度的div里写上padding-top 10px,那么就会增加10px的高度
而不是div里面的div下降了10px,因为一开始我们指定高度的div就算的上是一个隐形的固定的div了
如果这时候增加内边距,那么是相对于一开始那个隐形的div的
margin是外边距
要想改变di里的div,就必须在里面的div写上外边距,但是边距是相对的
如果我们在div里先写了一个div,那么就是相对就这个先写的di的外边距
元素选择器,就是那些标签,比如div span a 之类的
元素名称
{
属性名:属性值
}
ID选择器,ID在整个页面是唯一的
#id的名称
{
属性名:属性值
}
类选择器
.类的名称
{
属性名:属性值
}
属性选择器,修改都具有这个属性的标签的样式,多个属性可以用[][]
标签名称[标签的属性名=''] 单引号里面的是属性的内容,可以指定属性,也可以不加='',表示修改所有带title的
{
属性名:属性值
}
后代选择器,修改标签子标签内的所有后代,包括子子标签
标签 子标签
{
属性名:属性值
}
子元素选择器,只选择子代,不选择孙代
标签>子标签
{
属性名:属性值
}
伪类选择器,基本上用在a标签,就是点击了链接之后,链接变灰色
a:link{color:red} 没有访问链接的时候
a:visited{color:green} 已访问的链接,鼠标已经放开了
a:hover{color:blue} 鼠标移动到链接上
a:active{color:gold} 选定,鼠标还没有放开
上面这些应该都写在css里,然后在html页面写上
<link rel="stylesheet" href="css/_006_.css"/>
外部样式标签,可以把样式都写在里面
<style>
选择器
</style>
行内样式,会覆盖外部样式
<div style="color:green;font-size:60px"></div>
选择器的优先级
行内样式会覆盖外部样式
外部样式里id选择器会覆盖类选择器
就近原则
如果一个div标签出现2个类one和two
.two{}
.one{}
<div class="one two">
这时候two和one谁离的这个div近一点,就是哪个选择器
绝对定位
position:absulte
完成脱离了文档
top:10px
控制距离顶部的位置,其他的bottom,right,left
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/_006_.css"/>
<style>
/*选择器就近原则*/
.one
{
width: 400px;
height: 400px;
background-color: red;
clear: left;
}
.two
{
width: 500px;
height: 500px;
background-color: yellowgreen;
clear: left;
}
</style>
</head>
<body>
<!--样式选择示例-->
<div>xxxx</div>
<div>xxxx</div>
<span>一行</span>
<span>二行</span>
<div id="lover">holly shit<div>
<div class="fruit">苹果</div>
<div class="fruit">香蕉</div>
<div class="people">肥宅</div>
<a href="#" title="bbb">sss</a>
<a href="#" title="aaa">ggg</a>
<p>
我
<strong>
儿子
<em>
<strong>
孙子
</strong>
</em>
</strong>
</p>
<!--css的浮动-->
<!-- <div style="width: 200px; height: 200px; background-color: #000000;"></div>
<div style="width: 200px; height: 200px; background-color: goldenrod;float: left"></div>
<div style="width: 200px; height: 200px; background-color: burlywood;float: left"></div>
<div style="width: 400px; height: 400px; background-color: red;clear: left;"></div> -->
<!--test-->
<!--<div class="one two"></div>-->
<!--内外边距-->
<!-- <div style="border: 1px #008000 solid;width: 600px;height: 600px; ">
<div style="border: 1px #008000 solid;width: 200px;height: 200px;;"></div>
<div style="border: 1px #008000 solid;width: 200px;height: 200px; margin-top: 50px;"></div>
</div>-->
<!--绝对位置-->
<div style="border: 5px green solid;width: 200px;height: 200px;position: absolute; top: 200px;"></div>
</body>
</html>
css部分
/*元素选择器*/
div
{
color: red;
font-size: 50px;
}
span
{
font-size: 50px;
color: yellowgreen;
}
/*id选择器*/
#lover
{
font-size: 50px;
color: gold;
}
/*类选择器*/
.fruit
{
font-size: 50px;
color: green;
}
.people
{
font-size: 50px;
color: black;
}
/*属性选择器*/
a[title='aaa']
{
color: green;
text-decoration: none;
}
/*后代选择器*/
p strong
{
color: #9ACD32;
}