CSS
CSS的概述
什么是CSS:Cascading Style Sheets 层叠样式表.
CSS的作用:
CSS主要用来修饰HTML的显示.代码复用.将页面元素与样式进行分离.
HTML的DIV标签
HTML中有两个块标记:
<div></div><span></span>
“div+css”,div标签负责布局,负责结构,负责分块。css负责样式。
## CSS的使用 ##
语法:
选择器{属性1:属性值;属性2:属性值;..}
<style>
h2{
color:red;
font-size:100px;
}
</style>
CSS的引入方法
行内样式:
直接在html的元素上使用style的属性编写CSS:<span style="color:#00FF00 ;font-size: 100px;">黑马训练营</span>
内部样式:
在html的<head>标签中使用<style>标签来定义CSS<style>
span{
color:blue;
font-size: 200px;
}
</style>
外部样式:
将CSS定义成一个.css的文件,在html中将该文件引入到html中<link href="style.css" rel="stylesheet" type="text/css"/>
选择器
使用内部样式,外部样式来修饰,需要使用选择器,选择元素。- 元素选择器 div{}
- id选择器 #id属性值{}
- 类选择器 .class属性值{}
- * *{} 选择所有的元素
其他的选择器建议查询此网址
css的盒子模型
![![css盒子模型][2]](http://suyibkftp.oss-cn-qingdao.aliyuncs.com/%E5%8D%9A%E5%AE%A2%E6%96%87%E7%AB%A0%E5%9B%BE/%E5%89%8D%E7%AB%AF/css/css%E7%9B%92%E5%AD%90%E6%A8%A1%E5%9E%8B.png)
设置盒子的外边距:margin
- Margin-top //上
- Margin-right //右
- Margin-bottom //下
- Margin-left //左
设置盒子的内边距:padding
- Padding-top //上
- Padding-right //右
- Padding-bottom //下
- Padding-left //左
代码演示:
选择器{
border:1px solid blue; //边框
height: 600px; //高度
background: url(../img/regist_bg.jpg); //如何在一个声明中设置所有背景属性:
margin: 10px 0px; //外边框
padding: 10px 10px 10px 10px //内边框
}