前言----- 继续努力
使用css完成首页页面的优化
什么是css?
就是对html进行美化,好比化妆前后的差距。
HTML的块级标签
<div></div>标签:默认独占一行,跟同级兄弟块竖直排列
<span></span>标签:默认同在一行,跟同级兄弟块横向排列
块级标签只有结合css样式才有意义!修饰div标签一般用style属性并使用样式,不赞成用align属性
css的语法格式
最好写在<head></head>标签下
<style type="html/css" rel="stylesheet">
类别选择器{
}
</style>
css的类别选择器
元素选择器:span{width:100px; height:50px}
ID选择器:span{width:100px; height:50px}
类选择器:
<span class="ss" id="sq"></span>
<style type="text/css" rel="stylesheet">
<!-- 类选择器-->
.ss{
width:100px;
height:50px;
}
<!-- id选择器-->
#sq{
width:100px;
height:50px;
}
<!-- 元素选择器-->
span{
width:100px;
height:50px;
}
</style>
css的其他选择器
属性选择器:
<a href="#" title="aas"></a>
<style type="text/css" rel="stylesheet">
a[title]{ } <!--包含title属性时-->
a[title='aas']{ }<!--属性值等于aas时-->
a[href][title]{ }<!--包含两个属性时-->
a[href][title='aas']{ }<!--包含两个属性,并且一个属性值等于aas-->
</style>
后代选择器:如下
子元素选择器:如下
<h1>
This is
<em>儿子</em>
<strong>
<em>孙子</em>
</strong>
</h1>
<style type="text/css" rel="stylesheet">
<!--中间以空格隔开 后代选择器-->
h1 em{color:red;}<!--儿子、孙子全部变红-->
<!--中间以 > 隔开 子元素选择器-->
h1 > em{color:red; }<!--只有儿子变红,孙子没变-->
</style>
伪类选择器:
<style type="css/html">
a:link{color:red;} <!--未访问的链接-->
a:hover{color:#00FF00;} <!--鼠标移动到链接上-->
a:visited{color:#FF00FF;} <!--已访问的链接-->
a:active{color:#0000FF;} <!--选定的链接-->
</style>
css的引入
行内嵌入式:
<span style="width:100px; height:50px;"></span>
嵌入式:
<html>
<head>
<style type="text/css" rel="stylesheet">
span{
width:100px;
height:50px;
}
</style>
</head>
<body>
<span>哈哈哈</span>
</body>
</html>
链接式:
<link href="./css/my.css" rel="stylesheet">
导入样式:
<style type="text/css" rel="stylesheet">
@import url(./css/my.css)
</style>
样式优先级:遵循就近原则(以修饰的标签为基准)行内样式>id选择器>类选择器>元素选择器
css的块级标签的浮动
属性float:使块级元素脱离文档流进行浮动
(left:向左浮动;right:向右浮动;)
浮动原理:脱离文档流之外,不占用文档流的空间
属性clear:清除浮动
both:两边都不允许浮动
left:左边不允许浮动
right:右边不允许浮动
css属性display
display: none/不显示
display:block/作为块级元素显示,相当于<div>标签,
display:inline-block/作为行内块元素,相当于<span>标签
display:inline/默认,作为内联元素,元素前后没有换行符,没有宽和高的效果
使用div+css进行注册页面的优化
盒模型
margin:外边距(可以为负值)
margin-top:上外边距;margin-bottom:下外边距;margin-left:左外边距;margin-right:右外边距;
margin:10px; 上下左右都是10px
margin:10px 20px 上下10px,左右20px
margin:10px 20px 30px; 上10px,右20px,下30px,左20px
margin:10px 20px 30px 40px; 顺序上右下左
padding:内边距(同上)
border:边框
border-width:边框宽度
border-color:边框颜色
border-style:边框样式(实线solid)
盒模型定位
属性position:定位属性
absolute:绝对定位(top、right、bottom、left),以包含框最外层的包含框为基准进行偏移
relative:相对定位,相对于原来标准流的位置进行定位
fixed:固定定位,以浏览器为窗口进行定位
(盒子在标准流的定位:行内元素水平方向:margin-left+margin-right;块级元素竖直方向:margin-top 和 margin-bottom哪个值大取哪个;盒模型嵌套:子块的margin以父块的内容为参考)