、
1. css是层叠样式表（CascadingStyle Sheets）用来定义网页的显示效果。它将网页内容和显示样式进行分离，提高了显示功能。
2. <div>:在html中用于封装区域的标签，是在网页中是换行
3. html常见区域便签分两种：
a) 行内标签：用于封装行中一部分，结束后没有换行。比如<a>,<input>,<span>
b) 块级便签：便签结束后，有换行。比如<table>，<dl>，<div>
c) 段落标签：换段，前后有空格且换行。比如<p>
CSS的基本使用方式
1. CSS基本代码格式：选择器名称{属性名：属性值；属性名：属性值；……..}
2. css的加载优先级：由上到下，由外到内。优先级由低到高。
3. CSS的注释：以/*开头，*/符号结尾。注释之间不可以嵌套。
4. style属性方式：在HTML便签中的属性是样式表，可以将多样式进行封装，与HTML进行结合。属性和值之间是用冒号进行关联，不是=。属性与属性之间是用分号分开。结尾处最好用分号结尾。值与值之间是用空格隔开。
比如：<div style=”color:red”;font-size:7;background-color:#FF0000>
5. 颜色的三原色是红绿蓝。颜色代码表示最高三个FF，最低表示是00，两个代表一个颜色。比如：style background-color:#FF0000；
6. <style>标签方式：（内嵌方式）是用来封装css样式的标签。要作用与某种标签的样式，要用大括号来进行封装。它提高了css代码的复用性。
例如：<style type=”text/css”>
div{color:red;backfound-color:#00ff00;}
</style>
7. CSS文件两种方式：是将HTML中的css样式表抽离成一个css单个文件，这种方式的好处是增强css的后期维护性。这种方式最常见。
a) 导入方式： 当在HTML中使用外部css文件，在<style>标签内（没有大括号），
调用格式例子是： <style type=”text/css”>
@import url(“css文件路径和名称”)
</style>
注意：css文件里可以写样式表，也可以写@import url(“文件路径和名称”) 。
建议：在HTML中调用外部css时放在html的<head>中，这种方式更有阅读性。
b) 链接方式： 在head中调用HTML标签link方式：
例如是：<link rel=”stylesheet” href=” css文件路径和名称”/>
css的选择器
1. 选择器：就是指定要作用的标签，那个标签的名称就是选择器。
2. 对于选择器，就是样式要作用的标签，分三种：
a) HTML标签选择器。可以通过标签名中的style属性来确定
b) class选择器。可以对标签进行分类，通过标签中的属性class完成
| 在标签中定义class属性并赋值。通过 标签名.class值 对该标签进行样式设置。 例： 相同标签设置不同样式的时候，用class进行区分。 css定义：p.pclass_1 {color:#FF0000;} css定义：p.pclass_2 {color:#0000FF;} 标签使用：<p class=”pclass_1”>P标签样式</p> 标签使用：<p class=”pclass_2”>P标签样式</p>
不同标签进行相同设置的时候，用class进行统一定义。 css定义：.classname {color:#00FF00;} 标签使用：<p class=”classname”>P标签样式</p> 标签使用：<div class=”classname”>DIV标签样式</div> |
a) id选择器。可以对标签进行唯一性标示，通过标签中的属性id完成。
| 与class选择器类似，但格式不同，选择器的名称为：#id值。 例： css定义：#pid { color:#0000FF;} 标签使用：<p id=”pid”>P标签样式</p> 注：多个标签同样可以定义相同的id值，但是对于JavaScript对标签元素的获取就会出错。所以形成习惯，确保id值的唯一性对于以后的数据库设计也很有好处。 |
注意：每一个标签都定义了class属性和id属性。用于对标签进行标识，方便对标签进行操作。在定义的标签中，多个标签的class属性值可以相同，而id值要唯一，因为Javascript中经常用。
2. 选择器的优先级：标签选择器<类选择器<id选择器<style属性。
注意：id和class的的顺序无关，不管什么顺序，还是以id最后加载。
3. 伪元素选择器:先定义前后状态，再定义悬停和活动状态。
a) :link未点击前状态
b) :visited访问后状态
c) :hover悬停状态
d) :active活动状态
记法：l v h a或者简易为是女哈。
注意：超链接是最常见的这种用法，其他标签同样可以使用。
div+css布局的几种模型
1. 一个简单的盒子模型的常见属性
a) padding：length 内边距。
b) margin：auto|length 外边距。
c) border：边框线。常用取值是：
a) solid:实线边框
b) dotted:虚线边框
c) doublie:双线边框
一个简单的盒子模型代码如下：
| 对于div标签css的定义如下： div{ border:#99FF00 5px solid; width:80px; padding:20px 30px 50px 80px; margin:0px; } body{ padding:0px; margin:0px; } 图形如下：
|
2. 漂浮盒子模型的常见属性：
a) float：none|left|right布局属性,该属性的值指出了对象是否及如何浮动。取值
a) none:默认值，对象不要漂浮
b) left:文本流向对象的右边
c) right:文本流向对象的左边
b) clear：none|left|right|both布局属性，该属性的值表示不允许有浮动对象的边。
a) none : 默认值。允许两边都可以有浮动对象
b) left : 不允许左边有浮动对象
c) right : 不允许右边有浮动对象
d) both : 不允许有浮动对象
浮动盒子模型代码如下：
| CSS的定义如下： </head> <style type="text/css"> div{ border:#CCFF00 1px solid; padding:50px; width:100px; } #div_1{ background:#996600; margin:0px; float:left } #div_2{ background:#336699; margin:0px; /*float: left;*/ } #div_3{ background:#660066; margin:0px; clear: right } </style> HTML的三个盒子标签定义： <body> <div id="div_1">盒子模型1</div> <div id="div_2">盒子模型2</div> <div id="div_3">盒子模型3</div> </body> 图形如下：
|
3. 定位盒子模型的常见属性：
position: static | absolute | fixed|relative定位属性，检索对象的定位方式。取值
a) static : 默认值。无特殊定位，对象遵循HTML定位规则
b) absolute : 将对象从文档流中拖出，使用 left ， right ， top ， bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象，则依据 body 对象。而其层叠通过 z-index 属性定义
c) fixed : 未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范
d) relative :对象不可层叠，但将依据left ， right ， top ， bottom 等属性在正常文档流中偏移位置。
示例：div { position:relative; top:-3px }
常用的两个取值：
1. absolute值的使用条件一：
a) 当没有父对象时，默认是body。
代码如下：
| CSS的代码： <style type="text/css"> div{ border:#00FF00 1px solid; padding:20px; width:200px; } #div_1{ background:#990000; margin:0px; } #div_2{ background:#330099; margin:0px; position:absolute; left:250px; } #div_3{ background:#FF6600; margin:0px; } </style> </head> HTML的代码 <body> <div id="div_1">盒子模型1</div> <div id="div_2">盒子模型2</div> <div id="div_3">盒子模型3</div> </body> 图形如下：
|
b) 当有父对象时，相对的是父对象的浮动
代码如下：
| <style type="text/css"> div{ border:#00FF00 1px solid; padding:20px; width:200px; } #div_0{ position:relative; margin:50px; } #div_1{ background:#990000;
} #div_2{ background:#330099; position:absolute; left:250px; } #div_3{ background:#FF6600; } </style> </head>
<body> <div id="div_0">/*父类对象*/ <div id="div_1">盒子模型1</div> <div id="div_2">盒子模型2</div> <div id="div_3">盒子模型3</div> </div> </body> 图形如下：
|
2. 使用relative的值的使用。当把#div_2的position值由absolute改为relative时：
| 图形如下：
|
2249
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
