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="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>
?
轉載于:https://www.cnblogs.com/jingzhenhua/p/5813379.html
總結
以上是生活随笔為你收集整理的html-css样式表的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Graph（2014辽宁ACM省赛）
- 下一篇： 五种I/O模型