DIV+CSS简单技术入门

最新推荐文章于 2024-06-11 20:23:35 发布

最新推荐文章于 2024-06-11 20:23:35 发布 · 160 阅读

文章标签：

#DIV+CSS技术 #盒子模型 #浮动技术 #CSS基本的常用属性 #CSS引入html方式

Html+CSS+HTML5 专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍了HTML中div的使用及CSS样式的引入方式，包括直接在标签处定义样式、在HTML头部定义样式、外部样式引用。还涵盖了CSS样式的常用属性，如文本、字体、背景、列表和边框的设置。并通过实例展示了如何设置页面背景、文本样式、字体、列表样式以及盒子模型应用，最后讲解了浮动技术和清除浮动的方法。

一: div

相当于table,只是div定义表格时没有表格的标签多,减轻浏览器的解析压力 ,

定义简单的div表格 ,div的宽度默认是100%,所以在定义div的时候需要设置宽度和高度

 <div>这是一个div的表格</div>

二: css样式引入html的方式

1),直接在标签处定义css

例子:设置div的宽度和高度

  <div style="width:200px;height:200px">这是一个div的表格</div>

2),在html的<head> </head>标签之间

<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=gbk"/>

<style type="text/css">
<!--设置id的属性-->
#tupian{
border:1px #cc0000 solid ;
width:300px;
height:200px;
}
</style>
</head>

<body>
<div id="tupian"> 图片</div>
</body>
</html>

3),外部样式,定义一个css文件

将样式写在css文件中,通过在head标签中写样式引用

<link href="css的文件名.css"  type="text/css"  rel="stylesheet" />

三:CSS样式常用的属性(为了方便演示,将所有的css样式写在html的标签中)

文本,字体,背景,列表,边框

背景:

background设置所有的背景 #000000 url('') repeat-x|repeat-y|no-repeat| x y;
background-color设置背景颜色: #000000;
background-image设置背景图片 :url('');
background-repeat 背景平铺 :repeat-x|repeat-y|no-repeat
background-position设置图片的显示的位置: x y

设置页面的背景,平铺方式,显示图片的中间,背景颜色

<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=gbk"/>

<style type="text/css">

#tupian{
border:1px #cc0000 solid ;
width:300px;
height:200px;
background:url('grace.jpg') repeat-x  0 -50  #889890;
}
</style>
</head>

<body>
<div id="tupian"> 图片</div>
</body>
</html>

文本;

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:默认，实心圆；circle:空心圆；square:实心方块；
list-style-image	将图象设置为列表项标志
list-style-position	设置列表中列表项标志的位置 
inside:列表项目标记放置在文本以内，且环绕文本根据标记对齐。 <li>标签里面
outside:默认。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。<li>标签外面

四: css的盒子模型;

盒子模型的概念;padding内间距 ;margin外间距 ;border边框;

在实际开发中尽量少用padding;margin可以代替padding

padding内间距:

padding	定义元素的内边距。padding 属性接受长度值或百分比值，但不允许使用负值。
padding:10px;  表示元素各个方向的内边距都是10像素；
padding:10px  20px;  表示元素上下的内边距都是10像素、左右的内边距都是10像素；
padding:10px 10%  0.25em  2ex;  从上面开始按照顺时针方向分别设置各个方向的内边距，可以采用不同的计量单位；
padding-left	定义元素左边的内边距
padding-right	定义元素右边的内边距
padding-top	定义元素上边的内边距
padding-bottom	定义元素下边的内边距

margin外间距

margin	定义元素的外边距。margin属性接受长度值或百分比值，但不允许使用负值。
margin:10px;  表示元素各个方向的外边距都是10像素；
margin:10px  20px;  表示元素上下的外边距都是10像素、左右的内边距都是10像素；
margin:10px 10%  0.25em  2ex;  从上面开始按照顺时针方向分别设置各个方向的外边距，可以采用不同的计量单位；
margin-top	设置元素的上外边距。
margin-bottom	设置元素的下外边距。
margin-left	设置元素的左外边距。
margin-right	设置元素的右外边距。

border边框

border	简写属性，用于把针对四个边的属性设置在一个声明。
border-style	用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
border-width	简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
border-color	简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。
border-top/border-bottom/border-left/ border-right	这四个属性分别单独设置一个边的属性，可以在后面接上style/width/color来设置一个边的一种属性，如：border-top-color用来设置上边框的颜色

盒子模型的简单应用:padding和margin

<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=gbk"/>

<style type="text/css">
#tupian{
border:1px #cc0000 solid ;
width:300px;
height:200px;
 background:url('grace.jpg') repeat-x  0 -50  #889890;
}

 #bg{
   border:10px  #cc0000 solid;
   width:400px;
   height:400px;
   margin-top:50px;
   margin-left:10px;
   
 }
 
 #divbg{
  border:10px  #0000ff solid;
  width:300px;
  height:300px;
  margin-left:10px;
  margin-top:10px;
  padding-left:15px;
  padding-top:15px;
  
 }
</style>
</head>

<body>
<div id="tupian"> 图片</div>
<div id="bg"> 
		  <div id="divbg"> 边框模型 </div>
	</div>
</body>
</html>

五:浮动技术

div可以左右浮动,float默认是不浮动的

  float:left;
    float:right;
    float:none;

clear清除浮动,both清除左右两边的浮动,left左边的,right右边的,none不清除浮动

 clear:left;
clear:right
clear;both;
clear:none;