HTML 样式表

样式代码

样式代码与属性代码区别样式代码必须带单位属性不需要多个样式代码之间用分号隔开同一个样式里面用空格多个属性之间用空格隔开举例

1.背景样式

.r

	{

		background-image:url(../../../HTML%20%20%E8%AF%BE%E4%BB%B6/n0.jpg);

		background-size:200px 300px;

		background-color:red;

		background-repeat:no-repeat;  /*  background-repeat:x-repeat;  横向平铺 */

		background-position: left 100px top 100px;   /* 注意  */

	}

2.居中：

1.           <center><div>此标签h5中移除 现在并不重要</div></center>

2.*  /*整体居中*/

	{

		margin:0px auto; padding:0;

		}

　　3.控制字体的样式

.l

		{

			font-family:隶书;/*如果浏览器中有安装的字体种类 可以直接写  也可以选*/

			font-style:italic;/* 倾斜  字体样式*/

			font-size:14px;/*网络正常用 14  其次12  和16  多人一起做项目时先统一*/

			color:red;

			font-weight:bold;

			}


特殊字符 如艺术字 需要做成图片插进去

　　4.text样式

                      .g

			{

				text-align:center;/*水平居中*/

				vertical-align:middle;/*垂直居中；垂直居中时，时在行高的中间，所以经常配合行高一起出现*/

				line-height:80px;

				/* 以上两个样式共同 控制  内容在   行的中间位置*/

				text-decoration:line-through;/*下划线 上划线  和none（取消链接下面的横杠）*/

				text-indent:3px; /*首行缩进（此处首行缩进3像素）  经常和p标签一起用*/

				text-height:90px;/*文本高度*/

			}

5. margin 外边距 padding内边距

#wai{

			width:300px;

			height:300px;

			background-color:#F00;

			}

		#nei{

			float:left;

注意float	        width:190px;

			height:160px;

			background-color:#30F;

			margin:20px 30px 20px 30px;

			padding:40px 0px 0px 10px;

			}

		#li{

			width:100px;

			height:100px;

			background-color:#0F0;

			margin:20px 0px 0px 20px;

<div id="wai">

        	<div id="nei">

            	<div id="li"></div>

            </div>

        </div>


效果图：

边距与边界：设边距之后内部的是原来的

Float left；

Margin：10px；《边距》上下左右都是10像素

Margine: 2px 5px 6px 7px；外边距注意使用空格分隔不是分号是实现了左和上起作用因为默认在左上角实现如果在右下角实现效果则只有右下实现效果

Padding ：2px 5px 6px 7px；内边距相对于 div 内的div 确定内边距只要加了边距就会默认增加边距的像素 [修改方法只需要把原来的图形减去相应的内边距]

-------------------------------------------------------------------------------------------------------------------------------------------------

1.边框border

	.er

	{

		border-bottom:200px red solid;

		border-right:#093 200px solid;

		border-left:#000 200px solid;

		border-top: #C0C 200px solid;

		width:0px;     div的宽度和高度

		height:0px;

		}

</style>

</head>

<body>

<div class="er"></div>


效果图

2.列表方块：

1.list-style: none

2.list-style:circle

3.list-style-image:url

4list-style-position:outside;

5.list-style-position:inside;

3.格式与布局

position：

①position absolute：绝对定位相对于浏览器或相对于父级绝对定位如果相对于父级的话那么他的父级也要绝对定位举例：

position 移动后原来位置可以再次写入东西 relative 移动后原来位置不能再写东西

		.em

		{

			background-color:#F00;

			width:200px;

			height:200px;

			position:absolute;

			top:100px;

       			left:50px;	
top和left只有和position在一起时才起作用 同样  right  bottom；

		}

</style>

</head>

<body>

<div class="em"></div>


效果图

如果把absolute 换成fixed 则相对于 浏览器定位   不随界面变化而变化  无论滚动条怎么变化   图片相对于屏幕位置不变
如果把  absolute换成relative  则相对于  图片原来位置定位

4.流

float:left ;

		.re

		{

			float:left;

			}

</style>

</head>

<body>

<div class="re">1<img src="../../../HTML  课件/n0.jpg" height="100" width="100"></div>

<div class="re">2<img src="../../../HTML  课件/n0.jpg" height="100" width="100"></div>

<div class="re">3<img src="../../../HTML  课件/n0.jpg" height="100" width="100"></div>

<div class="re">4<img src="../../../HTML  课件/n0.jpg" height="100" width="100"></div>

<div class="re">5<img src="../../../HTML  课件/n0.jpg" height="100" width="100"></div>

<div class="re">6<img src="../../../HTML  课件/n0.jpg" height="100" width="100"></div>

<div class="re">7<img src="../../../HTML  课件/n0.jpg" height="100" width="100"></div>

<div class="re">8<img src="../../../HTML  课件/n0.jpg" height="100" width="100"></div>


使用后  排列的图片或其他悬浮于 屏幕上方    可以当作 不占位置   在写内容的时候  将会沉在 之前内容的下面
再接着写内容的时候要记着清流 就是写一个div标签<div style="clear:both"> </div>

z-index （必须同级别才能使用）

#d3{ width:900px; height:300px; background-color:#F00; position:absolute; z-index:2}

#d4{ width:200px; height:200px; background-color:#33F; position:absolute; z-index:3}


都是 position   通过调节z-index 数值大小来调节  覆盖方式

隐藏和显示

1.display 隐藏 none 显示 block[把空间和内容一起隐藏后边的内容自动填充过去]

#d6{width:100px; height:100px; background-color:#666; display:block;border-radius:20px;box-shadow:0 0 100px white;}


                                                                          圆角              阴影边    坐标  宽度  颜色

2.display ：inlineblock

主要用于 span a div 标签改变标签边框大小（普通方法没法改）

		#s1{ width:100px; height:100px; background-color:#F00; display:inline-block}

		</style>

    </head>

  	<body>

    <span id="s1">测试文字</span>

3.visiblity 隐藏 hidden[只把内容隐藏原来空间保留不能重新写入不能自动填充]

.overflow overflow：hidden；超出部分隐藏 overflow：scroll；超出部分设置滚动条；

   #d7{ width:100px; height:100px; overflow:hidden}

    </head>

  	<body>

    <div id="d7">蝴蝶兰的安静喝点兰的安静喝点兰的安静喝点兰的安静喝点兰的安静喝点啊哈大话大大话艾克大的按时</div>


自动换行 超出部分 隐藏掉

5透明圆角阴影

 .ert

			{

	background-color:#3F6;

	width:200px;

	height:200px;

圆角     border-radius:20px;

           
阴影边框处  	box-shadow:0 0 200px #000000;

                            0 0表示刚好在图形的下方出现
                           200px 表示阴影粗细
 透明度 	opacity:0.5;-moz-opacity:0.5;filter:alpha(opacity=50)}

		</style>

    </head>

  	<body>

    <div class="ert"></div><br />

　　鼠标悬浮

<style type="text/css">

a:link

{

    color:black;

    text-decoration:none;}

a:visited

{

    color:black;

    text-decoration:none;}

a:hover

{

    color:red;

    text-decoration:underline;}

a:active

{

    color:orange;

    text-decoration:underline;}

.a1:link

{

    color:#6F3;

    text-decoration:none;

    }

    .a1:visited

{

    color:#6F3;

    text-decoration:none;

    }

.a1:hover

{

    color:red;

    text-decoration:underline;

    }

.a1:active

{

    color:orange;

    text-decoration:underline;

    }

</style>

鼠标悬浮

只有在写了 position时 right left top bottom 才能单独使用；

流 float

清流 clear box

Z-index 调位置同一等级下

Display ：none 隐藏用来隐藏和显示元素隐藏了位置也随之隐藏

Display：block 显示

Display ：inlineblock 用来调整大小（span元素）

Visiblity：hidden 隐藏了但是位置保留

Overflow：hidden 超出部分隐藏；

Overflow：scrolly 超出部分出现滚动条

透明度 opacity

Border-radius 圆角

Box-shadow：0,0，5px，white

巴特西

HTML 样式表

最新文章

热门文章