css
CSS 概述:
1、Html 可以对内容进行装饰,但是装饰功能有限
2、CSS 可以设置更丰富的显示样式
层叠样式表 —- 装饰的样式可以叠加使用
可以实现比 html 更强大的装饰功能
3、Html —— 主要存储内容 ———- 演员
Css ——– 主要对内容进行装饰 —– 化妆师
HTML 与 CSS 是不同的模块实现:
HTML 怎么引入 CSS 呢?
方案1:直接在HTML 开标签中使用 style 属性,编写 CSS 代码
方案2:将CSS代码单独抽取,存储在一个标签中
<style>
css代码
</style>
方案3:
1、将CSS单独抽取为一个文件
2、 当前 html 引入该文件
格式:<link rel ="stylesheet" href="css文件路径"/>
rel 属性必须,格式固定
秉着高内聚低耦合的编码原则:
CSS 引入最好使用方案3,但是学习阶段,使用方案2
CSS代码书写格式:
1、过滤器 {
键1:值1;
键2:值2;
……
}
2、键与对应的值太多,使用什么就讲解什么
CSS一般结合HTML标签使用:
1、最常用的两个标签 div span
2、div特点:
A、自带换行
B、div区域,当前行的空余部分也包含
3、span 特点:
A、不会换行
B、所占区域刚好包含当前内容
拓展:
HTML 中换行的称之为 块级元素
不换行的称之为行内元素
CSS 的过滤器:
* css 为某些标签添加样式,要从html文档中筛选过滤这些标签,而过滤实现,就是通过过滤器完成的
* 常见过滤器:
1、标签名
标签名 {}
2、类名
.类名 {}
3、id过滤器
#id {}
注意:id 具有唯一性,不能重复
过滤器是可以嵌套使用的,又称之为层级过滤器 */
div font {
color: red;
}
CSS样式学习:
* 1、设置边框与尺寸
* border: 像素 实心 颜色;
* width:值; — 值可以使百分比,也可以是绝对值,但是必须得有单位
* height:值; — 和 width 区别,不能使用百分比
* 2、块级与行内元素转换
* display:
* 取值:
* block —- 块级显示
* inline — 行内显示
* none —– 不显示,隐藏
* 3、设置超链接的显示样式
* text-decoration:none;
* 设置超链接文本没有下划线
浮动:
1、div的默认实现是换行
* 2、需求:同一行内显示
* 浮动实现
* 属性 :
* float: left right —- 左浮动或右浮动
* 注:
* 如果浮动的div 在同一行内,剩余空间超出最后一个div 的宽度时,
* 最后一个div 换行
*
* 3、有的浮动 有的不浮动
* 现象:浮动的和不浮动的 div 重叠了
* 原因:
* 1、页面分成两部分 天花板 和 地板
* 客户从上往下看
* 2、浮动的排列在天花板上
* 不浮动的排列在地板上
* 3、最后效果
* 产生重叠
* 4、 需求:不要重叠 第三个 div 另起一行排列
* 实现:
* d3中使用属性:
* clear:both —– 清除浮动影响
* 原理:
* 将 d1 d2 从天花板上拽到地板上,再排列 d3
盒子模型:
A、CSS 中,一些组件可以看做是盒子:
* body —- 大盒子
* div —– 小盒子
*
* 盒子之间的关系:
* 嵌套
* 平级
*
* B、盒子位置设置 —– margin-
* 不同的盒子之间可以设置间距
* 1、会设置左间距与上间距即可
* 2、明确右间距和下间距可能设置无效
*
* C、盒子内元素设置与盒子边框的位置 —— padding-
* 1、设置元素与上边框和左边框的间距
* 2、明确与右边框和下边框的间距设置可能不生效