您的位置：首页 > Web前端 > CSS

技术分析之CSS+div

2016-04-24 22:38 423 查看

1. HTML的div和span的标签
* HTML中有两个块标记
* div和span标签都是在页面声明一块区域。
* 区别：div的块级元素，屁股上有换行。span标签是行内元素，默认一条水平线。

2. 什么是CSS？
* CSS指：Cascading Style Sheets-- 层叠样式表

3. CSS的作用？
* CSS主要用来修饰HTML的显示效果，提高代码复用性，将页面元素与样式显示进行分离，使的程序的耦合性降低。
* 可以解决html代码对样式定义的重复，提高了后期样式代码的可维护性，并增强了网页的显示效果功能
* HTML做使用标签来封装数据
* CSS作用在HTML的标签上，使用CSS来设置网页的显示的效果

4. CSS的使用规范？
* 规范如下：选择器{属性1:属性值;属性2:属性值;..}
<style>
h2{
color:red;
font-size:100px;
}
</style>

5. CSS与HTML的结合方式
* 行内样式：
* 直接在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="main.css" rel="stylesheet" type="text/css"/>

6. CSS的基本选择器
* 选择器的作用：CSS的选择器为了更能精确的找到某个元素来设计的，简单记：告诉CSS的代码作用在哪个标签上。
* 选择器的种类
* 元素选择器
-- 使用标签名作为选择器
* 类选择器
-- 在HTML的标签上使用class属性，使用.class名称作为选择器（解决：不同标签具有相同的样式。）
* ID选择器
-- 在HTML的标签上使用id属性，使用#id名称作为选择器（注意：id属性需要人为的设置成唯一值）

7. CSS的悬浮
* CSS的float属性可以产生悬浮的效果，取值如下
* float属性中常用取值
* left
-- 悬浮到左边
* right
-- 悬浮到右边

* 使用clear属性清除浮动
* left
-- 清除左侧浮动
* right
-- 清除右侧浮动

* both-- 清除两侧的浮动

8. CSS的样式优先级
* 默认情况下：从上到下，由外到内，优先级是从低到高的。（注意：大多数的情况下），简单记：离HTML标签越近的样式优先级越高。
* stype属性方式 > ID选择器 > 类选择器 > 元素选择器

9. CSS的其他选择器
* 关联选择器
* 标签与标签之间存在关系
* 选择器之间使用空格隔开
例子：div font{ CSS代码 }

* 组合选择器
* 对多个不同的选择器进行相同的样式设定

* 多个选择器之间使用逗号隔开。例子：#haha,.hehe{ CSS代码 }

10. CSS的盒子模型概念
* 设置盒子的外边距：margin
* argin-top
* Margin-right
* Margin-bottom
* Margin-left
* 设置盒子的内边距：padding
* Padding-top
* Padding-right
* Padding-bottom
* Padding-left

11. DIV的定位
* 通过position 属性可以对DIV进行定位，
* static -- 默认值，不定位
* absolute -- 绝对定位
* relative -- 相对定位

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css div

相关文章推荐

新的分享

章节导航