首页 > 代码库 > html-css样式表
html-css样式表
一、CSS：Cascading Style Sheet—层叠样式表，其作用是美化HTML网页。
样式表分类：内联样式表、内嵌样式表、外部样式表
1、内联样式表
和HTML联合显示，控制精确，但是可重用性差，冗余多。
例如：<p style="font-size:14px;color:#000;">内联样式表</p>
红色部分即内联样式表，style即添加样式。
2、内嵌样式表
作为一个独立区域内嵌在网页里，必须写在head标签里面。
例如：<style type="text/css">
p //格式对P标签有作用 /*以标签名命名的样式表，对所有此类标签都会执行*/
{
样式
}
</style>
3、外部样式表
使用：新建一个CSS文件，用来放样式表。如果要在HTML文件中调用样式表，需要在HTML文件中点右键→CSS样式→附件样式表。一般用link连接方式。
★有些标签有默认的边距，一般写样式表代码的时候都会先去除，如下：
<style type="text/css">
* //对所有标签起作用 /*对所有标签去除边距和间距*/
{
margin:0px;
padding:0px;
}
</style>
二、选择器
1、标签选择器
<style type="text/css">
p--------------标签选择器 //对P标签起作用
{
样式
}
2、class类选择器。---都是以“.”开头。
<head>
<style type="text/css">
.main--------------------/*定义样式*/-----类选择器
{
height:42px;
width:100%;
text-align:center;
}
</style>
</head>
<body>
<div class="main">----------------调用class样式,可引用多次区别ID选择器
</div>
</body>
3、ID选择器。以“#”开头。
<head>
<style type="text/css">
#main--------------------/*定义样式*/-----ID选择器
{
height:42px;
width:100%;
text-align:center;
}
</style>
</head>
<body>
<div id="main">----------------调用class样式，仅可以引用一次，区别与class选择器
</div>
</body>
4、复合选择器
1）、用“，”隔开，表示并列
<style type="text/css">
p, span--------------对标签P和span两者都执行同样的样式
{
样式
}
</style>
2）、用空格隔开，表示后代。
<style type="text/css">
.main p----------------类标签→p标签//首先找到引用“main”的标签，对该标签中的P标签起作用
{
样式
}
</style>
3）、筛选“.”
<style type="text/css">
p.sp----------------p标签→类标签//首先找到p标签，对于p标签中引用了class="sp"的标签起作用，执行以下样式
{
样式
}
</style>
三、练习：
HTML：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>---------------内嵌样式表
*-------------------------------------对所有标签去除边距和间距
{
margin:0px;
padding:0px;
}
</style>
<link href="http://www.mamicode.com/yangshi1.css" rel="stylesheet" type="text/css" />-----------------------------引用外部样式表
</head>
<body>
<div>
<p style="font-size:24px; font-weight:bold; background-color:#FFC; color:#F00; text-align:center;">你好,欢迎浏览！</p>--------内联样式表
</div>
<div class="shi">------------------引用类选择器
<p>写一首诗</p>
<p class="shineirong">床前明月光</p>----------类选择器可多次引用
<p class="shineirong">哈哈哈哈哈</p>----------类选择器可多次引用
<p class="shineirong">哈哈哈哈哈</p>
<p class="shineirong">哈哈哈哈哈哈哈哈哈</p>
</div>
<div id="ge">-------------引用id选择器，只能引用一次
<p>唱一首歌</p>
</div>
<div id="wu">
<p>跳个舞</p>
</div>
<p><a href="http://www.baidu.com" target="_blank">百度</a>----------超链接
</p>
</body>
</html>
外部样式表：
@charset "utf-8";
/* CSS Document */
<style type="text/css">
p{---------------------------标签选择器
margin:0px;
padding:0px;
}
.shi{----------------------------类选择器
height:200px;
width:200px;
font-weight:bold;
color:#F03;
background-color:#CCC;
text-align:center;
}
#ge{--------------------------id选择器
margin:0px 290px 0px;
height:200px;
width:300px;
font-weight:bold;
color:#F03;
background-color:#0FF;
text-align:center;
line-height:200px;
}
.shineirong{
font-size:14px;
color:#30F;
font-weight:bold;
line-height:40px;
vertical-align:middle;
}
#wu{
height:auto;
width:auto;
font-size:24px;
font-weight:bold;
text-align:center;
margin:10px;
background:#0F0;
}
a:link{--------------------超链接样式，未点击，展示时样式
color:#000;
font-weight:bold;
font-size:35px;
text-decoration:none;
}
a:visited{----------------------访问完成时样式
color:#000;
}
a:hover{----------------------鼠标指向悬浮时样式
color:yellow;
}
a:active{-----------------------点击时样式
color:green;
}
</style>
html-css样式表