`

div+css的基础简介及应用(一)——CSS的应用

阅读更多

1.div本身相当于一个容器,可以在当中内嵌table、文本和其它HTML代码,也可以将div内嵌至table中;

2.有需要的地方可以直接定义css,通过style引入即可;

例:

<html>
<head>
	<meta http-equiv="Content-Type" content="text/css; charset=utf-8" />
	<title>div+css</title>
	<h4>
		<div style="width: 300px; height: 100px; color: blue">div中直接写CSS样式</div>
	</h4>
</head>

<body>
	
</body>
</html>

  

3.对外部CSS文件的引用:

css样式可以定义在一个外部的.css文件中,该文件称作CSS样式文件,即层叠样式表单文件

例:

(1)定义外部css文件

@charset "UTF-8";

/* .样式名在HTML中通过class引用*/
.table {
	background-image: bg.jpg;
	width: 100px;
	height: 100px;
}

/* #样式名在HTML中通id引用*/
#text {
	background: blue;
	color: red;
}

 (2)引用外部文件

<html>
<head>
	<meta http-equiv="Content-Type" content="text/css; charset=UTF-8" />
	<title>引用外部CSS文件</title>
	<link href= test02.css type= text/css rel= stylesheet />
</head>

<body>
	<div id="text">引用在外部css文件中定义的#样式</div>
	<div class="table">引用在外部css文件中定义的.样式</div>
</body>
</html>

 

0
0
分享到:
评论

相关推荐

    DIV+CSS教程——第一天XHTML_CSS基础知识

    DIV+CSS教程——第一天XHTML_CSS基础知识

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

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

    div+css div+css精通CSS

    标题与描述中提到的“div+css div+css精通CSS”这一主题,主要涉及的是网页设计与布局的核心技术——利用HTML中的div元素结合CSS样式表进行网页内容的组织与美化。接下来,我们将深入探讨这一主题所包含的关键知识点...

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

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

    ASP.NET源码——网页选项卡(div+CSS).zip

    在这个"ASP.NET源码——网页选项卡(div+CSS).zip"压缩包中,我们主要关注的是如何在ASP.NET中实现基于div和CSS的网页选项卡功能。 选项卡是网页设计中常用的一种交互元素,它帮助用户在有限的空间内组织和展示多个...

    变幻之美Div+CSS网页布局揭秘(案例实战篇).

    《变幻之美Div+CSS网页布局揭秘(案例实战篇)》是一本专为初学者和有一定基础的网页开发者设计的教程,旨在通过实例教学,深入浅出地解析如何使用Div+CSS进行网页布局。这本书的核心内容涵盖了HTML基础、CSS选择器、...

    DIV+CSS招聘网设计

    【标题】"DIV+CSS招聘网设计"涉及的是网页布局技术的一种常见应用,它通过结合两种重要的HTML元素——`&lt;div&gt;`(division)和CSS(层叠样式表)来实现美观且功能丰富的招聘网站设计。在现代网页开发中,这种技术被...

    10款精美的div+css登录及后台管理模板

    本资源包——"10款精美的Div+CSS登录及后台管理模板",提供了多种不同风格和功能的登录页面以及后台管理界面,为开发者和设计师节省了大量时间和精力。 首先,登录模板是任何Web应用的第一道门面,它需要简洁、直观...

    一款div+css做的网站

    这款网站的构建采用了经典的前端布局技术——div+css,这是一种在网页设计中广泛使用的方法,旨在实现结构与表现的分离,提高页面的可维护性和可扩展性。Div(Division)是HTML中的一个容器元素,常用于组织和划分...

    div+css布局实例淘宝网分析

    ### div+css布局实例——淘宝网首页分析 #### 一、引言 随着互联网技术的不断发展,网站设计已经从简单的图文混排发展到了更加注重用户体验和交互性的阶段。在这个过程中,div+css布局作为一种灵活且高效的网页...

    10天学会DIV+CSS简明教程

    本教程——"10天学会DIV+CSS简明教程"是一个精心设计的课程,旨在帮助初学者在短时间内掌握这一核心技能。 在第一天,通常会介绍`HTML`基础,因为`DIV`元素是`HTML`的一部分,它是用来分隔网页内容的容器。学习者会...

    完整的DIV+CSS的企业站模板+官方需要300元

    【描述】"完整的DIV+CSS的企业站模板" 提及的是一个包含了所有必要元素的网站构建框架,使用了现代网页设计的主流技术——Div(层)和CSS(层叠样式表)。Div是HTML中的一个容器元素,用于组织页面内容,而CSS则用来...

    32套DIV+CSS商业网站模板

    这些模板并非简单的PS切图转换,而是采用先进的网页布局技术——DIV+CSS,使得网页设计更加灵活,代码结构更加清晰,易于维护和扩展。 一、DIV+CSS布局的优势 1. 响应式设计:DIV+CSS使得网页设计能够适应不同设备...

    经典全套DIV+CSS实例

    【标题】"经典全套DIV+CSS实例"涵盖了网页设计领域中的核心知识点——使用HTML的`div`元素结合CSS(层叠样式表)进行布局和样式设计。这一实例集旨在教授如何构建高效、灵活且响应式的网站页面,尤其适用于首页设计...

    十天学会div+css(ppt)

    【标题】"十天学会div+css(ppt)"是一份专为初学者设计的教程,旨在帮助用户在短短十天内掌握网页布局的核心技术——HTML的div元素与CSS(层叠样式表)的使用。这份教程通过理论讲解与实践操作相结合的方式,系统地...

    2天驾驭DIV+CSS 2.02版

    ### 2天驾驭DIV+CSS 2.02版 —— 必须了解的基础知识点 #### 1.1 你必须知道的知识 ##### 1.1.1 [知识一] DIV+CSS 的叫法是不准确的 在网页设计与开发领域,“DIV+CSS”这一术语被广泛使用,但它实际上是一个简化...

    div+css学习ppt及实例

    本压缩包包含的是一份详尽的`div+css`学习资料,旨在帮助初学者和进阶者深入理解和掌握网页布局的核心技术——`div`和`css`。通过这份资料,你可以系统地学习如何利用`div`元素进行网页结构划分,以及如何使用`css`...

    DIV+CSS布局实例

    一、`DIV+CSS`布局简介 `DIV`是HTML中的一个块级元素,常用于作为容器,组织网页内容。而`CSS`(层叠样式表)则负责控制网页的样式和布局。`DIV+CSS`布局的核心思想是将结构(HTML)和表现(CSS)分离,使页面更...

    div+css pdf 教程

    《div+css pdf 教程》是一份专为初学者设计的教程,旨在帮助学习者掌握网页布局的核心技术——div和CSS。这份教程通过PDF格式提供了详细的指导,使得学习过程更加方便,无论何时何地,只要有PDF阅读器,都能轻松学习...

    DIV+CSS入门教程

    然而,“DIV+CSS”这一称谓忽略了布局的核心——xHTML与CSS的结合。xHTML代表了网页的结构,而CSS则负责网页的表现样式,两者相辅相成,共同构成了网页的完整布局。因此,正确的表述应为“xHTML+CSS”。 #### 知识...

Global site tag (gtag.js) - Google Analytics