【转载】技术分析之CSS+div

技术分析之CSS+div

王丽君csdn 2016-04-24 22:38:44 468 收藏 1
分类专栏： WEB
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013034286/article/details/51236507

收起

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:属性值;…}

5. CSS与HTML的结合方式

• 行内样式：

• 直接在html的元素上使用style的属性编写CSS：

• 例如：

• 内部样式：

• 在html的标签中使用

• 外部样式：
• 将CSS定义成一个.css的文件，在html中将该文件引入到html中

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 – 相对定位
  ————————————————
  版权声明：本文为CSDN博主「王丽君csdn」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
  原文链接：https://blog.csdn.net/wlj323/article/details/51236507