當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

CSS结构的基础认知

發布時間：2023/11/29 CSS 52 豆豆

生活随笔收集整理的這篇文章主要介紹了 CSS结构的基础认知小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

css的屬性值與html的屬性值用法不相上下，但是css主要分為內聯樣式表和外聯樣式表。

內聯樣式表用法：在html文件中的《head》頭文件中添加<style></style>標簽，在標簽內添加所需的屬性值，例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
</style>
</head>

外聯樣式表用法：在同一項目的目錄下創建css為拓展名的文件，在文件編寫所需屬性和個人style，在HTML內編寫代碼：<link rel="stylesheet" href="文件名" />進行調用。

CSS樣式表規則中class標記和超鏈接的用法：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
p.first{text-indent: 0.5in;}
p.second{text-indent: 1.0in;}
.main01{font-size: 10pt;color: red;}
#01{font-size: 10pt;color: yellow;}
#02{font-size: 12pt;color: blue;}

//屬性：link鏈接本身;visited被訪問過時;hover指向時;a:link{font-size: 10pt;color: blue;text-decoration: none;}a:visited{font-size: 13pt;color: gray;text-decoration: underline;}a:hover{font-size: 16pt;color: red;text-decoration: overline;}</style> </head> <body>//<標記 class="類名"></標記>//直接用class定義段落的縮進大小<p class="first">這個段落縮進0.5in</p><p class="second">這個段落縮進1.0in</p>//<標記 class="類名"></標記>//調用.main01定義段落和單元格的屬性<p calss=".main01"></p><td calss="main01"></td>//<標記 id="id名"><font id="01">php是世界上最好的語言</font><font id="02">php是世界上最好的語言</font><a href="http://www.baidu.com">first</a>《style中的屬性一一對應body中class和超鏈接的用法》

這是一些關于css的屬性注釋：
/文本對齊/
h1{text-align:center}
/文本縮進/
h1{text-indent: 50px;}
/行高/
body{line-height: 120%;}
/字間距/
body{letter-spacing: 0.1cm;}
/文本裝飾/
h3{text-decoration: underline;}
/垂直對齊/
<p>平方值:3<font style="vertical-align:super">2</font></p>
/文本變換/
p{txet-transform:capitalize}

轉載于:https://blog.51cto.com/13881481/2151580

總結

以上是生活随笔為你收集整理的CSS结构的基础认知的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：做梦梦到猫抓老鼠是什么征兆
下一篇： vCenter 升级错误 VCSServ