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[只把内容隐藏 原来空间保留 不能重新写入 不能自动填充]
4.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
