作为后台人员你需要知道的CSS基本知识
其他
2018-06-12 14:07:19
阅读次数: 2
1.CSS简介
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 -- 清除两侧的浮动
扩展知识点
1. CSS的样式优先级
* 默认情况下：从上到下，由外到内，优先级是从低到高的。（注意：大多数的情况下），简单记：离HTML标签越近的样式优先级越高。
* stype属性方式 > ID选择器 > 类选择器 > 元素选择器
2. CSS的其他选择器
* 关联选择器
* 标签与标签之间存在关系
* 选择器之间使用空格隔开 例子：div font{ CSS代码 }
* 组合选择器
* 对多个不同的选择器进行相同的样式设定
* 多个选择器之间使用逗号隔开。 例子：#haha,.hehe{ CSS代码 }
2.CSS的盒子
1. 需要使用到CSS的盒子模型概念
* 设置盒子的外边距：margin
* Margin-top
* Margin-right
* Margin-bottom
* Margin-left
* 设置盒子的内边距：padding
* Padding-top
* Padding-right
* Padding-bottom
* Padding-left
2. DIV的定位
* 通过position 属性可以对DIV进行定位，
* static -- 默认值，不定位
* absolute -- 绝对定位
* relative -- 相对定位
转载自blog.csdn.net/u013046774/article/details/51255222