作为后台人员你需要知道的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