HTML 样式表
2016-05-21 22:07
537 查看
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>样式表</title>
<linkhref="Untitled-2.css"rel="stylesheet"type="text/css"/>
</head>
<body>
<ahref="http://www.360.com">360官网</a>
<P>春来了！</P><br/>
<p>春天花会开</p>
<divclass=""></div><br/>
css，（cascdingstylesheets）层叠样式表，作用是美化HTML网页<br/>
/*注释区域*/注释语法用法<br/>
样式表的基本概念<br/>
一、样式表分类<br/>
1、内联式样式表<br/>
和HTML联合显示，控制精确，但是可用性差，冗余太多<br/>
<divstyle="background:#0F0">51899789</div><br/>
2、内嵌样式表<br/>
作为一个独立的区域内嵌在网页里，必须写在head标签里面<br/>
<!--<styletype="text/css">
p//格式对p标签起作用
{
样式；
}
</style>
-->
3、外部样式表<br/>
新建一个css文件，用来放置样式表。如果在html文件中调用样式表，需要在HTML文件中点击右键-css样式-附加样式表，一般用link链接方式<br/>
有些标签默认边距，一般写样式代码的时候都会先去除（也可以设置其他样式），如下<br/>
<!--<styletype="text/css">
*{
margin:0px;
padding:0px;
}
</style>-->
（二）选择器<br/>
1、标签选择器，用标签名作为选择器<br/>
<!--<styletype="text/css">
p
{
样式；
}
</style>-->
<p>夏天来了</p>
<p>夏天太热了</p>
2、class选择器。都是以“.”开头。<br/>
class是相同属性的放在一起<br/>
<!--.aa//定义一个名字叫aa的样式表
{//定义aa里面具体的样式属性
width:300px;
height:200px;
border:1pxsolid#009;
}-->
<divclass="aa"id="a1"><!--用class选择器调用aa样式表，调用id叫a1的样式表-->1</div><br/>
<divclass="aa"id="a2"><p><!--用class选择器调用aa样式表，调用id叫a2的样式表，重叠aa类里面p的样式-->2</p></div><br/>
<divclass="aa"id="a3"><!--用class选择器调用aa样式表，调用id叫a3的样式表-->3</div><br/>
<divclass="aa"id="a4"><!--用class选择器调用aa样式表，调用id叫a4的样式表-->4</div><br/>
<divclass="aa"id="a5"><!--用class选择器调用aa样式表，调用id叫a5的样式表-->5</div><br/>
3、ID选择器。以“#”开头<br/>
id具有唯一性，尽量只用一个标签引用<br/>
调用形式：<!--<divid="样式名">--><br/>
<divid="a1">1</div><!--调用id叫a1的样式表-->
4、复合选择器<br/>
（1）使用，隔开表示并列<br/>
<!--<styletype="text/css">
p,span//标签p、span两者同样的样式
{
样式；
}
</style>-->
<spanstyle="background-color:#360">夏天<br/>
太热了</span><br/>
<!--span标签叠打了与p标签一样的样式-->
<p>夏天<br/>
太热了</p>
（2）用空格隔开，表示后代<br/>
<!--<styletype="text/css">
.aap//标签p、span两者同样的样式
{
样式；
}
</style>-->
<divclass="aa"><p>夏天来了</p></div>
<divclass="aa"><p>夏天太热了</p></div><!--样式p叠加了classaa里面的属性-->
（3）筛选“.”。跟其他的p标签不一样<br/>
<pclass="aa">夏天<br/>
天太热了
</p>
<pclass="bb">
<spanstyle="background:#06C"style="size:150">夏天<br/>
天太热了
</span>
</p>
三、样式表属性<br/>
四、超链接样式：lvha<br/><br/>
a:link/*链接前链接的样式*/<br/>
a:visited/*链接后链接的样式*/<br/>
a:hover/*鼠标悬浮时链接的样式*/<br/>
a:active/*鼠标点击时时链接的样式*/<br/>
<ahref="http://www.baidu.com">百度一下</a>
</body>
</html>
css外部样式表，及样式表的属性@charset"utf-8";
/*CSSDocument*/
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:1pxsolid#009;
}
p.bb
{
font-size:14px;
color:#CCF;
background:#666;
}
.aap
{
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:righttop;/*背景图放在右上角*/
background-position:left100xptop200xp;/*背景图放在离左边100像素，离上边200像素。也可以设为负值*/
/*字体*/
font-family:Georgia,"TimesNewRoman",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:5pxsolid#009;/*四边框：5像素、实线，蓝色（相当于下面三行）*/
border-width:5px;/**/
border-style:solid;/**/
border-color:#999;/**/
border-top:5pxsolidblue;/*上边框：5像素宽，实线，蓝色*/
border-bottom:5pxsolidblue;/*下边框：同上*/
border-left:5pxsolidblue;/*左边框：同上*/
border-right:5pxsolidblue;/*右边框：同上*/
margin:10px;/*四边外边框宽度为10像素。auto，居中*/
margin-top:10px;/*上边外边框宽度为10像素；其他三边边框类似*/
margin:20px0px20px0px;/*上-右-下-左，四边外边框顺时针顺序*/
padding:10px;/*内容与边框的四边距离10像素*/
padding-top:10px;/*内容与边框的上边距为10像素，其他三边间距类似*/
padding:20px0px20px0px;/*上-右-下-左，内容与边框的四边间距顺时针顺序*/
/*列表与方块*/
/*width、height、（top、bottom、left、right）只有在绝对坐标情况下才使用*/
list-style:none;/*取消序号*/
list-style:circle;/*序号变为圆圈，样式相当于无序*/
list-style-image:url(图片地址);/*图片做序号*/
list-style-position:outside;/*序号在内容外*/
list-style-position:inside;/*序号跟内容在一起*/
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 