`
zhoujiangzi
  • 浏览: 92752 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

DIV+CSS学习(一)

阅读更多

     今天在别的地方看到一个DIV+CSS的学习教程,感觉还不错,于是自己也跟着学习然后记录下,便于以后查看。

    在过去的页面中,我们经常会使用表格来进行布局,而使用CSS排版后,会使网页代码简洁,表现和内容相分离,维护方便,能兼容更多的浏览器,也能在移动设备上更好的进行浏览操作。

 A. CSS的样式加载可以有以下四种方式

1. 外部样式

    如: <link href="other.css" rel="stylesheet" type="text/css"/>,这样就可以将other.css资源文件加载到当前页面中,这样的好处时other.css文件可以被多个页面使用,能够很好的重用。

2.内部样式

   如:

    

<style type="text/css">
h2{
  color:red;
}
</style>
   该样式写在head标签内部,只能供当前页面使用,不能在其他页面进行使用。

 

3.行内样式

   如:

<p style="color:red;">Hello,World!!</p>
    该样式只能作用于当前的标签,所以一般不建议使用。

 

4.导入样式

  如:

@import url("global.css");

  这个一般是在css文件中导入其他的css文件,就跟我们在写jsp页面时,用include标签导入其他页面类似。

 B.css的优先级问题

    1.id的优先级高于class

       即当我们写 #cssIdname这样的样式和.cssclassName时,#cssIdname会生效

     2.后面的样式会覆盖前面的样式

     3. 指定的样式高于覆盖样式

     4.行内样式高于其他

 

分享到:
评论

相关推荐

    html+div+css+js学习.zip

    html+div+css+js学习html+div+css+js学习html+div+css+js学习 html+div+css+js学习html+div+css+js学习html+div+css+js学习 html+div+css+js学习html+div+css+js学习html+div+css+js学习 html+div+css+js学习...

    经典DIV+CSS模板 经典DIV+CSS模板

    "div+css模板"则表示这是一个可以直接应用或参考的预设设计。 **压缩包子文件的文件名称列表** 1. `style.css`:这通常是一个外部样式表文件,用于定义HTML文档的样式。它可能包含了各种CSS选择器、规则和样式,...

    简单设计DIV+CSS模板

    本篇将围绕"简单设计Div+CSS模板"这一主题,深入探讨Div+CSS的基础概念、网页布局原理以及实例解析,帮助读者掌握这一技能,提升网页设计水平。 首先,Div+CSS的核心在于将内容(HTML)与样式(CSS)分离。Div,...

    DIV+CSS学习文档

    【DIV+CSS学习文档】 网页设计与开发领域中,`DIV+CSS`是一种常见的布局技术,它极大地提升了网页的可维护性和效率。本学习文档旨在深入解析`DIV+CSS`的核心概念,帮助初学者理解并掌握这一技术。 一、什么是DIV?...

    div+CSS购物网站模板

    这些模板可以作为初学者学习和模仿的对象,通过分析和修改它们,可以加深对Div+CSS的理解,提升网页设计技能。同时,也可以借鉴模板中的优秀实践,如高效的布局技巧、响应式设计策略等,为自己的项目提供灵感。 ...

    DIV+CSS学习资料(一)

    标题 "DIV+CSS学习资料(一)" 暗示了这是一个关于网页设计中使用HTML的DIV元素和CSS样式表的初级学习资源集合。在这个压缩包中,我们有四个文件,都是围绕着这个主题,旨在帮助初学者掌握基础的DIV+CSS布局技巧。 ...

    div+css手册

    《div+css手册》是一本深入探讨网页布局技术的重要参考资料,尤其对于网页设计者和前端开发者来说,它具有极高的学习价值。这个手册的核心聚焦在HTML中的`div`元素和CSS(层叠样式表)的结合使用上,旨在帮助读者...

    韩顺平《轻松搞定网页设计HTML+CSS+JAVASCRIPT》之DIV+CSS学习笔记

    "韩顺平《轻松搞定网页设计HTML+CSS+JAVASCRIPT》之DIV+CSS学习笔记" 本资源主要讲解了 DIV+CSS 的概念和应用, DIV 是 HTML 文档中用来提供结构和背景的元素,而 CSS 是一种用来表现 HTML 或 XML 等文件式样的...

    DIV+CSS简单登录界面模板

    在网页设计领域,`DIV+CSS`是一种广泛使用的布局技术,它通过定义不同的`Div`(Division,分块)元素并应用相应的`CSS`(Cascading Style Sheets,层叠样式表)样式来构建页面结构和外观。标题提到的“DIV+CSS简单...

    div+css布局大全

    9. **性能优化**:合理的div+css布局也应考虑性能,如减少CSS选择器的复杂性、优化图片和字体资源、使用适当的布局方法等,以提升页面加载速度和用户交互体验。 10. **浏览器兼容性**:尽管现代浏览器对CSS的支持...

    整站模板DIV+CSS 源码DIV+CSS 

    这些文件和目录组合在一起,构成了一个完整的网站结构,体现了Div+CSS在实际项目中的应用。学习和分析这些源代码,可以帮助我们理解如何利用Div进行网页布局,以及如何用CSS美化和控制网页的显示效果。同时,也可以...

    div+css布局制作箭头步骤流程样式 - div+css教程

    在网页设计领域,`div+css`是一种常用的技术,用于实现页面布局和样式控制。`div`元素作为容器,能够包裹其他HTML元素,而CSS(层叠样式表)则负责定义这些元素的外观和位置。在本教程中,我们将深入探讨如何使用`...

    DIV+CSS.rar_DIV_css+div_div+css_html+div+css_web前端

    【标题】"DIV+CSS.rar" 是一个关于网页布局技术的压缩包,主要围绕着 `div` 和 `CSS` 进行讲解。`div` 是HTML中的一个块级元素,常用于网页布局,而 `CSS`(层叠样式表)则是用于控制网页元素样式和布局的重要工具。...

    div+csspdf版

    在IT行业中,网页设计是至关重要的一个领域,而"Div+CSS"是构建现代网页布局的基础。本资源包“div+csspdf版”显然聚焦于这个主题,包含了两个关键文件:`css2.0中文手册.chm`和`DIV+CSS布局大全.pdf`。这两个文件都...

    DIV+CSS教程—十天学会web标准div+css标准之路WORD版

    《DIV+CSS教程—十天学会web标准div+css标准之路》是一份全面且深入的教程,旨在帮助初学者在短时间内掌握网页布局的核心技术——DIV和CSS。此教程以Word文档的形式提供,易于阅读和打印,适合自学或者作为教学参考...

    160个DIV+CSS网页模板

    对于初学者来说,这是一个很好的学习资源,通过实际操作可以加深对Div+CSS的理解;对于经验丰富的开发者,这些模板可以作为快速设计网页的基础,节省开发时间。 总的来说,"160个DIV+CSS网页模板"是一份宝贵的教育...

    div+css页面布局,新手入门教材,2天学会div+css

    通过以上步骤,新手可以逐步学习并掌握div+css页面布局的基础知识,从而创建出符合设计要求的静态网页。随着经验的增长,还可以进一步探索更高级的布局技巧,如网格系统、Flexbox或Grid布局,以及更复杂的交互效果。

    div +cssdiv +cssdiv +cssdiv +cssdiv +cssdiv +css

    - doudizhu:这个文件名可能是“斗地主”游戏的名称,如果它是一个HTML、CSS或JavaScript文件,可能包含了一个游戏的源代码,我们可以从中学习游戏的前端实现技巧和交互设计。 总结来说,`div +css`是网页设计的...

    DIV+CSS案列源代码03

    通过研究这个案例,开发者可以学习到如何使用`DIV+CSS`进行网页布局,理解盒模型(content, padding, border, margin),掌握浮动布局、定位(static, relative, absolute, fixed)以及Flexbox或Grid布局等技巧。...

Global site tag (gtag.js) - Google Analytics