【JavaWeb】CSS_css的語法和三種使用方式
阿新 • • 發佈：2019-01-24
1.css全稱：cacading style sheet（層疊樣式表）
2.作用：對html標籤進行操作（標籤中文字內容進行設定），美化頁面
CSS語法
1.語法格式：屬性：屬性值；2.css屬性(property)：給標籤設定 “字型，顏色，背景······” 3.css屬性值(value)：給屬性指定 “字型大小，字型顏色，背景圖片······”
CSS的三種使用方式
1.行內樣式：
（1）在每個html標籤裡都會有 style 屬性，例如：<a href="" style="font-size:24px;color:#F00">超連結</a><br/>
（2）格式：<a href="" style="在style裡指定css屬性">超連結</a><br/>
（3）使用這種方式的弊端：①標籤和樣式混合在一起，不利於維護
②書寫過程麻煩，且不美觀
2.內部樣式：
（1）位置：在<head></head>標籤體中有<style></style> 標籤
（2）書寫樣式：
<style type="text/css">
標籤名稱{
/*css中的註釋*/
font-size:24px;
color:#F00;
}
</style>
注：css中style標籤體內的註釋和Java相同，也為“/* */”
方式2例子：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css體驗</title>
<style type="text/css">
a{
/*css中的註釋*/
/*
font-size:24px;
color:#F00;
*/
}
</style>
</head>3.外部樣式：
（1）位置：在<head></head>標籤體中 <link /> 標籤
（2）作用：匯入外部的css檔案，使用該標籤匯入
（3）標籤格式：<link href="連結外部的css檔案" rel="stylesheet" />
（4）優點：開發中使用的大多為此方式，css樣式和html標籤分離開來，有利於維護
方式3例子：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css體驗</title>
<!--使用link標籤匯入外部 css檔案-->
<link href="07.css" rel="stylesheet" />
</head>
<body>
<a href="">超連結</a><br/>
<a href="">超連結</a><br/>
<a href="">超連結</a><br/>
<a href="">超連結</a>
</body>
</html>
匯入的css檔案：
@charset "utf-8";
/* CSS Document */
a{
font-size:24px;
color:#0F0 ;
}