蓝鸥Web开发:初识div + css引入方式
来源:互联网 发布:数据上报系统 源码 编辑:程序博客网 时间:2024/06/04 19:44
蓝鸥Web开发:初识div + css引入方式
零基础学习HTML5—html+css基础【蓝鸥出品】
web的第一节课就是学习什么是div。
div是我们最常用的标签,没有之一。在HTML的标签中,每一个标签都是有语音的,div的语义就是无意义。
茶哥儿没有那你们开涮,就是这个样子的,div在我们的开发中经常用来划分区域,进行分快处理分块开发。看了下图你就能明白了。
图片就是以我们简书网的首页为例,这么多元素的页面如果先用div划分大区域的话就是下边的样式,这样看来是不是就很简单了呢?
ok,上代码来看看如何操作div(htm+css):
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Document</title></head><body>
<div style="width: 200px;height: 200px;background-color: red;"> 我是一个div </div></body></html>
之前已经说过html和css的关系了(好基友,一辈子),如果单纯写一个div我们是看不到任何东西的(并不是不存在),代码中我们通过加入css样式(div标签中style属性里边写的就是css样式)从而改变了div的大小和背景色,于是我们就看到他了,这里我们使用的是css的行间样式表。
这里我们做个设想:body里边有100个div,要分别赋予宽200px,高200px,背景色是红色。
我勒个去,这是个多么可怕的需求,我们难道要写100个div,再写100变style吗?当然了,如果我们只能使用行间样式表那么肯定是要付出汗水与努力了,然而,我们还有另外两种完美的解决方案:内部样式表&外部样式表。
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: red;
}
</style></head><body>
<div>我是一个div</div></body></html>
这个就是内部样式表了,我们在head标签内添加了style标签,在style标签中书写css样式,但是为了找准我们给哪个标签添加让样式,所以我们使用了选择器:div{},这个叫做标签名选择器,会为相同的标签添加这个样式。ok再来看看外部样式表怎么写:
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css/index.css">></head><body>
<div>我是一个div</div></body></html>
这段代码是html文档的,我们在head标签中添加了link标签用来导入外部文件,在这里我们导入了外部的“index.css”文件,看到这里就明白了吧,所谓的外部样式表就是将样式写入到了外部的css文件中,然后通过link导入html文档。来看看index.css:
div {
width: 200px;
height: 200px;
background-color: red;
}
外部样式表与内部样式表写法上是一致的,不同的是引入方式。
如果有一个div,同时有三种样式表为其赋予颜色这个时候div应该用哪个呢?想知道吗,接着看下边的总结。
总结:
div用于分割屏幕,常用语分块开发中;
行间样式表:sytle标签写在标签内部;
内部样式表:style标签写在head标签内;
外部样式表:没有style标签,使用link标签引入css文档;
如果一个标签同时有三种样式表为其赋予样式,行间样式表优先级最高,内部样式表与外部样式表同等级,如何选用样式取决于二者的引入顺序。
- 蓝鸥Web开发:初识div + css引入方式
- 蓝鸥Web开发:盒子模型之padding的引入与用法
- 05-DIV+CSS-引入
- css_day5---初识div+css
- 初识div&css 20160304
- css的引入方式
- CSS引入方式
- css的引入方式
- 01、css引入方式
- css的引入方式
- css引入方式
- CSS引入方式汇总
- 引入css的方式
- CSS 引入的方式
- css引入方式
- CSS-引入方式,选择器
- CSS的引入方式
- CSS的引入方式
- 蓝桥杯ALGO_06(安慰奶牛)
- Oracle 中 table 函数的应用
- 图片切割
- Angualr2 之 angular模块
- 内部类
- 蓝鸥Web开发:初识div + css引入方式
- JXTA 2: 具有高性能、海量伸缩性的 P2P 网络
- 最简单mysql5.6忘记密码处理方式
- STM32F429的LTDC和DMA2D
- 关于boundService使用方法
- Unity3D-使用custom font字体以及重叠问题
- sqoop总结
- iOS Socket编程
- linux学习笔记--host命令