首页 > 代码库 > CSS用法介绍
CSS用法介绍
什么是div?
div就是HTML一个普通标签，进行区域划分。特性：独占一行。肚子不能实现复杂效果。必须结合CSS样式进行渲染。
div是块级元素
作用：
div标签可以把文档分割为独立的、不同的部分。他可可以用作严格的组织工具，并且不使用任何格式与其关联。
什么是CSS?
Cascading Style Sheets层叠样式表。
【CSS】的概述；
CSS 通常称为CSS样式或者层叠样式表，主要用于设置HTML页面中的文本内容(字体、大小、对其方式等)、图片的外形(高度、边框样式、边距等)以及版面的布局等外观显示样式。
CSS可以使HTML页面更好看，CSS色系的搭配可以让用户更舒服，CSS+DIV布局更加灵活，更容易绘制出用户需要的结构。
【CSS的作用】
CSS主要用来修饰HTML的显示，代码复用，将页面元素与样式进行分离。
【CSS的使用】(语法&方法)
标记选择器是指用HTML标记名称作为选择器，按标记名称分类，为页面中某一类标记指定统一的CSS样式。
【元素选择器】
语法：
选择器(属性1：属性值；属性2：属性值；....)
eg: <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="http://www.mamicode.com/style.css" rel="stylesheet" type="text/css"/>
【CSS的基本选择器】
元素选择器：
div{
color:red
}
id选择器：
<style>
#d1{
color:red
}
</style>
<div id="d1">id选择器</div>
id通常都是唯一的。
类选择器：
HTML：
<div class="d1">类选择</div>
<div>选择</div>
<div class="d1">选择类</div>
CSS；
<style>
.d1{
color:green;
}
</style>
【CSS的悬浮】
float属性中常用取值；
left ：悬浮到左边
right ；悬浮到右边
使用clear属性清除浮动；
left ：清除左侧浮动
right ：清除右侧浮动
both ；清除两侧的浮动
【转换】；display
HTML提供丰富的标签，这些标签被定义成了不同的类型，一般分为；块标签和行内标签。
块标签： 以区域块方式出现。每个块标签肚子占据一整行或者多整行。 常见的块元素；<h1><div><ul>等。
行内元素； 不必在新的一行开始，同时也不强迫其他元素在新的一行显示。常见的行内元素；<span><a>等。
【CSS的其他选择器】
属性选择器：
选中带有某个属性的元素：
<style>
input[type="text"]{
background-color:yellow;
}
input[type="password"]{
background-color:green;
}
</style>
层级选择器；
ul li{
}
父选择器 子选择器{ }
<style>
#d1 div{
color:red;
}
</style>
伪类选择器； 主要用来描述超链接
<style>
a:link{
color:blue;
}
</style>
使用DIV+CSS对注册页面进行布局。更加灵活！
【DIV+CSS】
【CSS】的盒子模型
英文： border(边框)margin(外边框)padding(内边距)element(元素)
设置盒子的外边距 margin：
Margin-top
Margin-right
Margin-bottom
Margin-left
设置盒子的内边距；padding
Padding-top
Padding-right
Padding-bottom
Padding-left
CSS用法介绍