<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>样式表</title>
<link href="Untitled-2.css" rel="stylesheet" type="text/css" />
</head>
<body>
<a href="http://www.360.com">360官网</a>
<P>春来了！</P><br />
<p>春天花会开</p>
<div class=""></div><br />
css，（cascding style sheets）层叠样式表，作用是美化HTML网页<br />
/*注释区域*/注释语法用法<br />
样式表的基本概念<br />
一、样式表分类<br />
1、内联式样式表<br />
和HTML联合显示，控制精确，但是可用性差，冗余太多<br />
<div style="background:#0F0">51899789</div><br />
2、内嵌样式表<br />
作为一个独立的区域内嵌在网页里，必须写在head标签里面<br />
<!--<style type="text/css">
p//格式对p标签起作用
{
样式；
}
</style>
-->
3、外部样式表<br />
新建一个css文件，用来放置样式表。如果在html文件中调用样式表，需要在HTML文件中点击右键-css样式-附加样式表，一般用link链接方式<br />
有些标签默认边距，一般写样式代码的时候都会先去除（也可以设置其他样式），如下<br />
<!--<style type="text/css">
*{
margin:0px;
padding:0px;
}
</style> -->
（二）选择器<br />
1、标签选择器，用标签名作为选择器<br />
<!--<style type="text/css">
p
{
样式；
}
</style> -->
<p>夏天来了</p>
<p>夏天太热了</p>
2、class选择器。都是以“.”开头。<br />
class是相同属性的放在一起<br />
<!--.aa//定义一个名字叫aa的样式表
{//定义aa里面具体的样式属性
width:300px;
height:200px;
border:1px solid #009;
} -->
<div class="aa" id="a1"><!--用class选择器调用aa样式表，调用id叫a1的样式表 -->1</div><br />
<div class="aa" id="a2" ><p><!--用class选择器调用aa样式表，调用id叫a2的样式表，重叠aa类里面p的样式 -->2</p></div><br />
<div class="aa" id="a3"><!--用class选择器调用aa样式表 ，调用id叫a3的样式表-->3</div><br />
<div class="aa" id="a4"><!--用class选择器调用aa样式表 ，调用id叫a4的样式表-->4</div><br />
<div class="aa" id="a5"><!--用class选择器调用aa样式表 ，调用id叫a5的样式表-->5</div><br />
3、ID选择器。以“#”开头<br />
id具有唯一性，尽量只用一个标签引用<br />
调用形式：<!--<div id="样式名"> --><br />
<div id="a1">1</div><!--调用id叫a1的样式表 -->
4、复合选择器<br />
（1）使用，隔开表示并列<br />
<!--<style type="text/css">
p,span //标签p、span两者同样的样式
{
样式；
}
</style> -->
<span style="background-color:#360">夏天<br />
太热了</span><br />
<!--span标签叠打了与p标签一样的样式 -->
<p>夏天<br />
太热了</p>
（2）用空格隔开，表示后代<br />
<!--<style type="text/css">
.aa p //标签p、span两者同样的样式
{
样式；
}
</style> -->
<div class="aa"><p>夏天来了</p></div>
<div class="aa"><p>夏天太热了</p></div><!--样式p叠加了class aa里面的属性 -->
（3）筛选“.”。跟其他的p标签不一样<br />
<p class="aa">夏天<br />
天太热了
</p>
<p class="bb">
<span style="background:#06C" style="size:150">夏天<br />
天太热了
</span>
</p>
三、样式表属性<br />
四、超链接样式：l v h a<br /><br />
a:link/*链接前链接的样式*/<br />
a:visited/*链接后链接的样式*/<br />
a:hover/*鼠标悬浮时链接的样式*/<br />
a:active/*鼠标点击时时链接的样式*/<br />
<a href="http://www.baidu.com">百度一下</a>
</body>
</html>
css外部样式表，及样式表的属性
@charset "utf-8";
/* CSS Document */
p,span/*针对所有的p标签*/
{
font-size:36px;/*字体大小*/
color:#F00;/*文字大小*/
background:#FF0/*背景颜色*/
}
x
{
font-size:10px;
color:#000;
background-color:#9F6;
}
.aa
{
width:300px;
height:200px;
border:1px solid #009;
}
p.bb
{
font-size:14px;
color:#CCF;
background:#666;
}
.aa p
{
background-size:24px;
background-color:#960;
}
#a1
{
background:#0F3;
}
#a2
{
background: #903;
}
#a3
{
background: #90C;
}
#a4
{
background: #6FF;
}
#a5
{
background: #96F;
}
a
{
font-size:36px;
}
a:link/*链接前链接的样式*/
{
text-decoration:none;
color:black;
}
a:visited/*链接后链接的样式*/
{
text-decoration:none;
color:black;
}
a:hover/*鼠标悬浮时链接的样式*/
{
text-decoration:underline;
color:red;
}
a:active/*鼠标点击时时链接的样式*/
{
text-decoration:underline;
color:orange;
}
/*(1)背景与前景*/
background-color:#060;/*背景色，样式表中优先级别高*/
background-image:url(0519/n0.jpg);/*设置背景图（默认）*/
background-attachment:fixed;/*背景是固定的，不随字体滚动*/
background-attachment:scroll;/*背景随字体滚动*/
background-repeat:no-repeat;/*no-repeat不平铺，repeat平铺，repeat-x横向平铺，repeat-y纵向平铺*/
background-position:center;/*背景图居中，设置此项的时候，repeat必须为no-repeat*/
background-position:right top;/*背景图放在右上角*/
background-position:left 100xp top200xp;/*背景图放在离左边100像素，离上边200像素。也可以设为负值*/
/*字体*/
font-family:Georgia, "Times New Roman", Times, serif;/*字体，常用微软雅黑，宋体。*/
font-size:16px;/*字体的大小，可以用“em”，2.5em即默认字体的2.5倍还可以用百分数*/
font-weight:bold;/*bold是加粗，normal是正常*/
font-style:italic;/*倾斜normal是正常*/
color:#000;/*颜色*/
text-decoration:underline;/*下划线，overline是上划线，linethrough是删除线，none是去掉下划线*/
text-align:center;/*（水平对齐）居中对齐，left是左对齐，right是右对齐*/
vertical-align:middle;/*（垂直对齐）居中对齐，top是顶部对齐，bottom是底部对齐，一般设置行高后使用*/
text-indent:28px;/*首行缩进*/
line-height:24px;/*行高，一般为1.5~2倍字体大小*/
display:none;/*none，不显示，inline-block显示为块，不自动换行，宽高可设置；block显示为块，自动换行；inline效果同span标签，不自动换行，宽高不可*/
visibility:hidden;/*可视性，hidden，隐藏但是占用空间；visible，显示*/
/*边界边框*/
/*border(表格边框，样式等)、margin（表外间距），padding（内容与单元格间距），后两者一般设置为0*/
border:5px solid #009;/*四边框：5像素、实线，蓝色（相当于下面三行）*/
border-width:5px;/**/
border-style:solid;/**/
border-color:#999;/**/
border-top:5px solid blue;/*上边框：5像素宽，实线，蓝色*/
border-bottom:5px solid blue;/*下边框：同上*/
border-left:5px solid blue;/*左边框：同上*/
border-right:5px solid blue;/*右边框：同上*/
margin:10px;/*四边外边框宽度为10像素。auto，居中*/
margin-top:10px;/*上边外边框宽度为10像素；其他三边边框类似*/
margin:20px 0px 20px 0px;/*上-右-下-左，四边外边框顺时针顺序*/
padding:10px;/*内容与边框的四边距离10像素*/
padding-top:10px;/*内容与边框的上边距为10像素，其他三边间距类似*/
padding:20px 0px 20px 0px;/*上-右-下-左，内容与边框的四边间距顺时针顺序*/
/*列表与方块*/
/*width、height、（top、bottom、left、right）只有在绝对坐标情况下才使用*/
list-style:none;/*取消序号*/
list-style:circle;/*序号变为圆圈，样式相当于无序*/
list-style-image:url(图片地址);/*图片做序号*/
list-style-position:outside;/*序号在内容外*/
list-style-position:inside;/*序号跟内容在一起*/
时间： 2024-12-18 18:12:15