div+css入门:
1.CSS样式的三种用法:
a、直接定义在html标签里。使用style引入。
例:<div style="width:200px;height:200px;">这是第一种用法</div>
b、定义在本页面的<head></head>标签里面。
例:<html>
<head>
<style type="text/css">
.second{width:200px;height:200px;}
</style>
</head>
<body>
<div class="second">这是第二种用法</div>
</body>
</html>
c、定义成一个外部的CSS文件。
例:.three{width:200px;height:200px;}
存放在与html文件的同目录下面的style.css文件中。
然后在html文件引入这个CSS文件
<html>
<head>
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div class="three">这是第三种用法</div>
</body>
</html>
2.CSS基础属性
背景: background:#00CCFF url('1.jpg') no-repeat 0px -80px;
设置背景颜色
background-color:#00CCFF;
设置背景图片
background-image:url('1.jpg');
属性值 repeat 导致图像在水平垂直方向上都平铺,就像以往背景图像的通常做法一样。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复,no-repeat 则不允许图像在任何方向上平铺。
background-repeat:no-repeat;
设置背景图片在背景中的位置。
background-position:0px -80px;
文本: text-indent 缩进元素文本的首行
text-align 对齐元素中的文本
word-spacing 设置字间距
letter-spacing 设置字符间距
line-height 设置行高
color 设置文本颜色
字体:font-family 设置字体
font 简写属性,作用是把所有针对字体的属性设置在一个声明中。
font-size 设置字体大小,一般声明为px, 或者pt
font-weight 设置字体的粗细,normal是标准字体,bold是粗体
font-style 设置字体的风格,normal是标准字体,italic是斜体,oblique是倾斜
列表: list-style-type 设置列表项标志的类型 none:无标记;disc:默认,实心圆;x:空心圆;square:实心方块;
list-style-image 将图象设置为列表项标志
list-style-position 设置列表中列表项标志的位置 inside:列表项目标记放置在文本以内,且环绕文本根据标记对齐。 outside:默认。保持标记位于文本的左侧。列表项目标记放置在文本以外,且环绕文本不根据标记对齐。
list-style 简写属性,将所有用于列表的属性设置在一个声明中。
3.css框模型常用属性。
内边距: padding 定义元素的内边距。padding 属性接受长度值或百分比值,但不允许使用负值。
padding-left 定义元素左边的内边距
padding-right 定义元素右边的内边距
padding-top 定义元素上边的内边距
padding-bottom 定义元素下边的内边距
边框: border 简写属性,用于把针对四个边的属性设置在一个声明。
border-style 用于设置元素所有边框的样式,或者单独地为各边设置边框样式。
border-width 简写属性,用于为元素的所有边框设置宽度,或者单独地为各边边框设置宽度。
border-color 简写属性,设置元素的所有边框中可见部分的颜色,或为 4 个边分别设置颜色。
border-top/border-bottom/border-left/ border-right 这四个属性分别单独设置一个边的属性,可以在后面接上style/width/color来设置一个边的一种属性,如:border-top-color用来设置上边框的颜色。
外边距: margin 定义元素的外边距。margin属性接受长度值或百分比值,但不允许使用负值。
margin-top 设置元素的上外边距。
margin-bottom 设置元素的下外边距。
margin-left 设置元素的左外边距。
margin-right 设置元素的右外边距。
4.CSS浮动和清理
浮动:#div{Float:left/right/none}
清理:#div{clear:left/right/none}
left 在左侧不允许浮动元素
right 在右侧不允许浮动元素
both 在左右两侧均不允许浮动元素
none 默认。允许浮动元素出现在两侧。
相关推荐
《DIV+CSS入门教程》是一本专为初学者设计的电子书,旨在帮助读者快速掌握网页布局和样式设计的核心技术。在网页开发中,DIV(Division)和CSS(Cascading Style Sheets)是构建现代网页界面的重要工具。本书通过...
标题中的"DIV+CSS入门教程"指的是学习使用HTML中的DIV元素配合CSS(层叠样式表)进行网页布局的基础教程,适合初学者。通常,这种布局方式被称为“Div+CSS布局”,但实际上是不准确的术语。 在描述中提到,"DIV+CSS...
【DIV+CSS入门】是网页设计领域中的基础知识,它代表了两种主要的Web页面布局技术。在HTML(超文本标记语言)中,`<div>`元素是一个通用的容器,用于组织文档中的内容,而CSS(层叠样式表)则负责控制这些内容的样式...
《div+css入门教程》是一份专为初学者设计的学习资料,旨在帮助用户快速掌握网页布局与样式的最基本技能。这个教程可能包含了理论讲解、实例演示以及实践练习等多个部分,以确保学习者能够全面理解并熟练运用div和...
【div+css入门资料】 网页设计中,Div和CSS(Cascading Style Sheets)是构建高效、可维护、响应式布局的重要技术。Div是HTML中的一个元素,常用于定义页面上的区块,而CSS则用来控制这些区块的样式、布局和表现。...
### DIV+CSS入门教程知识点详解 #### 一、页面布局与规划 在网页设计与开发领域,`div+css`是一种流行的布局技术,它利用HTML的`div`元素结合CSS样式来实现网页的布局和样式控制。这种方法相较于传统的表格布局...
【div+css入门教程】 网页布局是Web开发中的核心部分,而`div+css`是实现这一目标的主要技术。Div(层)是HTML中的一个通用容器元素,它用于组织页面内容,而CSS(层叠样式表)则用来控制这些元素的外观和布局。本...
【div+css入门详细教程】 在网页设计领域,HTML(超文本标记语言)与CSS(层叠样式表)是构建网站布局和外观的基石。尤其是Div+CSS的组合,已经成为现代网页开发的标准实践,它极大地提高了网页的可维护性和可扩展...
《DIV+CSS入门布局教程详解》 在网页设计领域,Div+CSS布局是现代网页制作的标准方式,它能够实现高效、灵活的页面布局。本文主要针对初学者,旨在引导大家了解并掌握Div+CSS的基本原理和应用技巧。 首先,Div...
本资源"DIV+CSS入门例子"是针对初学者准备的一份极佳的学习材料,通过具体的实例帮助初学者快速掌握这两种技术的核心概念。 `DIV`(Division)在HTML中是一个通用容器元素,用于组织和分隔页面内容。它的主要作用是...
而`div+css.pdf` 可能是一本关于`div+css`入门的电子书,涵盖了基础概念、布局技巧、命名规则等内容,是初学者很好的参考资料。 学习并掌握`div+css`,不仅能帮助你创建美观的网页,还能提高开发效率。通过实践和...
DIV+CSS网站布局从入门到精通 源代码 朱印宏 邓艳超 编著 北京希望电子出版社 2011年1月 本教程介绍了商业类型的网页设计,以及目前流行的DIV+CSS标准布局方法和实战技法。通过对十个经典案例进行分析,分别从不同...
【DIV+CSS入门模板】是网页设计初学者的宝贵资源,它主要涵盖了使用HTML的`<div>`元素和CSS(层叠样式表)来构建网页布局的基础知识。在这个入门模板中,你将学习到如何利用这两种技术实现网页的上中(左右)下结构...