一、简介
CSS(cascading style sheet)层叠样式表。html是用来展示数据,搭建页面的一个整体骨架的,而css就是用对html进行修饰的,对页面进行美化,HTML的属性也可以对数据内容进行修饰,但功能远不如css强大,css是专门用来做样式的语言,它的一个很明显的特点就是能够实现样式与html标签分离,并且能够重用。
所谓层叠样式表,可以这样理解:就是对同一个元素,css可能在不同的地方都定义了属性,那这些属性如果有相同的该怎么办?那就用层叠,优先级高的放上面,有相同的属性就会被上面的属性覆盖,当然不同的属性就直接作用上去了。
特点:
1、Css语法:Selector{Property:value}选择器{属性:值},多个属性用分号“;”分开
2、同一值如果有空格必须用引号引起来
2、命名不要以数字开头
二、引入css的三种方式
内嵌样式:在元素上标注style属性:style=“color:red”
内部样式:在head标签内<style type=”text/css”>
</style>
外部样式:引入外部的css文件:<link rel=”stylesheet” type=”text/css” href=”css的url”/>
优先级:内嵌样式>内部样式>外部样式;还有一种:@import url ,但是不常用
三、css选择器
基本选择器:
元素选择器:div{}
Class选择器:.name{} class=””
Id选择器:#name{} id=””
优先级:id>class>元素
层叠选择器:
div p span{}
不留空格表示同时拥有这几个属性的元素:div.top.selected{}
属性选择器:
div[name=”go”]{}
伪元素选择器
a:link{color:green}没访问过的显示
a:visited{color:yellow}访问过
a:hover{color:black}鼠标放上去没点击
a:active{color:red}点击时的显示
(a标签记住顺序lvha)
组合选择器:
h1,h2,h3{}
div+css盒子模型
标签按是否独占一行可以分为块级标签和行内标签,div属于块级标签,无论div大小都会独占一行。
在盒子模型中一切皆盒子,所有元素都可以看成是以上模型,蓝色是内容区域
padding:内边距,也叫内填充,它是元素中可以展现内容的区域相对于边界的距离,即相当于排版中的留白,padding里面一般是没有内容的。padding值的设置可以单独设置:padding-left、padding-right、padding-top、padding-bottom,也可以简写如padding:1px 2px 3px 4px(顺序为顺时针:上右下左),三个值时如padding:1px 2px 3px;代表上1px、右2px、下3px、左2px,两个值时如padding:1px 2px代表上下1px、左右2px
margin:外边距,即边界相对于父元素的距离;值的设置规律和padding一样
border:边界或者边框;它的值也可以分开写或者简写,常用的简写方式border:1px solid red;代表边框宽1px,实线,红色
盒子模型主要掌握几个属性
float漂浮:left左漂、right右漂,漂浮元素会从当前文档流中抽出,漂浮在下一个元素上面,表现为漂浮元素覆盖当前元素,漂浮只相对于下一个元素而言,对其他元素无效。
#div1{
width:50px;
height:50px;
background:green;
float:left;
}
#div2{
width:100px;
height:100px;
background:red;
}
#div3{
width:100px;
height:100px;
background:yellow;
float:left;
}
<div id="div1"></div>
<div id="div2"></div>
<div id="div3">漂浮只相对于下一个元素而言,对其它元素无效</div>
clear:left/right/both清空漂浮,表示当前元素前面不允许有某种漂浮元素,both表示不允许有两者
#div1{
width:50px;
height:50px;
background:green;
float:left;
}
#div2{
width:100px;
height:100px;
background:red;
clear:left;
}
<div id="div1"></div>
<div id="div2"></div>
box-sizing:此属性表示为盒子设置的width和height值是哪个值;content-box:内容盒子,这是默认值,表示设置的宽和高为中间可以写内容的区域,整个盒子的尺寸为设置值+padding+border+margin;border-box:边界盒子,表示设置的宽和高值为边界的大小,整个盒子的尺寸为设置值+margin
应用盒子模型布局例子
<!DOCTYPE html>
<html>
<head>
<title>css html</title>
<style type="text/css">
body{
margin:0px;
}
#maincontent{
width:100%;
height:500px;
/*margin:100px 0px 0px 200px;会将窗口整个向右下角平移,导致有一部分内容无法显示*/
padding:100px 0px 0px 200px;
border:1px solid yellow;
box-sizing: border-box;/*默认为content-box盒子,尺寸是body的100+padding+border+margin ; border-box尺寸:border以外+margin*/
}
#top{
width:100%;
height:100px;
position:absolute;
margin:-100px 0px 0px -200px;
background-color:blue;
}
#left{
width:200px;
height:500px;
position:absolute;
margin-left:-200px;
background:grey;
}
</style>
</head>
<body>
<div id="maincontent">
<div id="top"></div>
<div id="left"></div>
</div>
</body>
</html>