(一)初识div+css

  关于div+css,一直以来都是听其名,而不知其为何。今天看了半天的视频,终于对此略有了解,感觉挺好的,相比之前的table布局页面,div+css就是一把页面布局利器!!

  div全称division(分割、分开、部门),css全称Cascading style sheet(层叠式样式表)

  网页的布局分为三个时期:table布局,table+css布局(过渡时期),div+css布局(当前主流)

  相对于div+css布局,table布局的缺点:1、显示样式和数据绑定在一起;2、布局的灵活度不高;

                     3、大量的<table>标签,造成代码冗余;4、带宽较大;5、搜索引擎不喜欢

                 优点: 1、理解比较简单;2、不同浏览器,显示结果相同;3、显示数据效果很好

简单描述了div+css之后,那么如何使用它们呢?

  使用css,需要小了解css的常用选择器:

  1、类选择器:定义格式(.class1{属性1:值; 属性2:值;})

    引用格式:<div class="class1"> </div>

  2、id选择器:定义格式(#id1{属性1:值; 属性2:值;})

    引用格式:<div id="id1"> </div>

  3、html元素选择器:定义格式(元素{属性1:值; 属性2:值;})

    引用格式:<元素></元素>

  4、通配符选择器:定义格式(*{属性1:值; 属性2:值;})

    应用于页面内的所有内容

  5、父子选择器:定义格式(.class1 span{属性1:值; 属性2:值;}或.id1 span{属性1:值; 属性2:值;})

   <div class="class1"或者id="id1">不<span>抛弃</span>不<span>放弃</span></div>

    注意:父子选择器不能有太多级数

  选择器的优先级:id选择器>类选择器>html元素选择器>通配符选择器

构造了css之后,那么如何在html文件中进行引用呢?

  html中引用css有三种方式:

  1、外部样式表:

  <head>

  <link rel="stylesheet" type="text/css" href="名字1.css"/>

  <link rel="stylesheet" type="text/css" href="名字2.css"/>

  <link rel="stylesheet" type="text/css" href="名字3.css"/>

  </head>

  2、内部样式表

  <head>

  <style type="text/css">

  body{属性1:值; 属性2:值;}

  p{属性1:值; 属性2:值;}

  </style>

  </head>

  3、内联样式表

  <p style="属性1:值; 属性2:值"></p>

  优先级:内联样式表>内部样式表>外部样式表

css文件中,若多个选择器有相同的属性值,如何操作呢,或者一个css文件如何引入另一个css文件呢?

  1、若一个css文件中的多个选择器有相同的属性值

  .class1,#id1,p{属性1:值; 属性2:值;}  /*相同属性进行合并*/

  2、一个css文件引入另一个css文件

  @import url()  /*将多个css文件导入到一个css文件中,如今通常使用link方法*/

  css的使用基本就是这些了,关于属性的设置还有很多内容,由于刚开始学习,知道的属性少之又少,看来这部分主要靠查阅帮助文档进行熟记了。。

                     

时间: 2024-08-24 18:06:32

(一)初识div+css的相关文章

深度理解div+css布局嵌套盒子

1. 网页布局概述 网页布局的概念是把即将出现在网页中的所有元素进行定位,而CSS网页排版技术有别于传统的网页排版方法,它将页面首先在整体上使用<div>标记进行分块,然后对每个快进行CSS定位以及设置显示效果,最后在每个块中添加相应的内容.利用CSS排版方法更容易地控制页面每个元素的效果,更新也更容易,甚至页面的拓扑结构也可以通过修改相应的CSS属性来重新定位.  2. 盒子模型 盒子模型是CSS控制页面元素的一个重要概念,只有掌握了盒子模型,才能让CSS很好地控制页面上每一个元素,达到我们

现在主流网站为什么都用div+css布局而不是用table

由于刚刚接触前端,一直觉得table布局在代码上看起来比div+css更整洁,div+css布局的页面,一堆的<div><div><div>...</div></div></div>看起来都让人犯密集恐惧症,那么为什么现在的主流网站还都乐此不疲呢?为什么div+css反而成了一种主流布局方式呢?一直对此不解.这篇文章好像是解决了我的问题,先摘录过来,以便查阅. 以下内容摘自:http://www.divcss5.com/wenji/w

div+css感悟

div+css感觉很简单,可是真正做起来一些小细节把握不好,这个网页的布局也是完成不了的.今天学习了一些技巧方法现在分享下: 即一个原则,网页由一个个的大盒子组成,一个个的大盒子里面装着一个个的小盒子.先衡量好大盒子的尺寸,才好确定小盒子的大小. 大盒子包含小盒子,大的盒子必须又小的盒子组成,一个模块不能只有小盒子,要由大盒子来包装.所以先设定大盒子的宽度,高度可以设置,也可以不设置,再设置小盒子的具体信息. 1.现在的网页布局都是采用盒子模型,即网页由一个个div来构成的,div包含着很多di

&lt;转载&gt;div+css布局教程之div+css常见布局结构定义

在使用div+css布局时,首先应该根据网页内容进行结构设计,仔细分析和规划你的页面结构,你可能得到类似这样的几块: 页面层容器.页面头部.标志和站点名称.站点导航(主菜单).主页面内容.子菜单.搜索框.页脚(版权和有关法律声明). 通常采用DIV元素来将这些结构定义出来,类似这样: <div id="Container"></div> 页面层容器 <div id="header"></div> 页面头部 <di

&lt;转载&gt;DIV+CSS position定位方法总结

如何学习DIV+CSS布局之position属性 如果用position来布局页面,父级元素的position属性必须为relative,而定位于父级内部某个位置的元素,最好用 absolute. 任何元素的默认position的属性值均是static,静态.这节课主要讲讲relative(相对)以及absolute(绝对). [DIV+CSS布局之position属性:absolute] 意思是:他的意思是绝对定位,他默认参照浏览器的左上角,配合TOP.RIGHT.BOTTOM.LEFT(下面

&lt;转载&gt;Div+Css布局教程(-)CSS必备知识

目录: 1.Div+Css布局教程(-)CSS必备知识 注:本教程要求对html和css有基础了解. 一.CSS布局属性 Width:设置对象的宽度(width:45px). Height:设置对象的高度(Height:45px;). Background:设置对象的背景颜色.背景图像. 1.背景颜色 background:#09F; 2.背景图像 background:url(file:///C|/Users/Administrator/Desktop/huipu.jpg) repeat-x;

DIV+CSS的好处和意义

DIV+CSS的好处和意义 http://www.ijavascript.cn/jiaocheng/div-css-sense-435.html 业界越来越关注DIV+CSS的标准化设计,大到各大门户网站,小到不计其数的个人网站,在Div+CSS标准化的影响下,网页设计人员已经把这一要求作为行业标准.那么什么是Div+CSS标准?Div+CSS的标准化设计到底有什么好处? Div 全称 division 意为“区分”使用 DIV 的方法跟使用其他 tag 的方法一样. 如果单独使用 DIV 而不

DIV+CSS虚线边框|CSS虚线下划线及虚线列表教程

DIV CSS虚线教程篇包括讲解常常出现的各种样式的DIV虚线案例CSS教程. 本节为大家介绍常见的CSS 虚线及DIV教程.CSS虚线下划线.列表虚线统统搞定. 目录 CSS虚线边框 CSS超链接虚线下划线 列表型CSS虚线下划线 CSS定义一条水平虚线 1.CSS边框虚线   -   TOP 这里通过边框属性的虚线边框border控制虚线.以下设置的css 高度(css height)和css 宽度(css width)为350像素是为了便于观看演示 其它意思.一.四边为虚线边框border

DIV CSS Sprites精灵 CSS图像拼合 CSS背景贴图定位教程案例

div css sprites精灵-CSS图像拼合 CSS贴图定位网页背景素材图片拼合定位布局技术教程篇与css sprites实例篇 css sprites拼合背景图片素材实现布局效果截图 一.什么是css sprites   -   TOP css sprites直译过来就是CSS精灵.通常被解释为“CSS图像拼合”或“CSS贴图定位”.其实就是通过将多个图片融合到一张图里面,然后通过CSS background背景定位技术技巧布局网页背景.这样做的好处也是显而易见的,因为图片多的话,会增加