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="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

 

posted @ 2016-12-26 23:58  夜纸鸢  阅读(520)  评论(0编辑  收藏  举报