静态资源Css基础语法
生活随笔
收集整理的這篇文章主要介紹了
静态资源Css基础语法
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1.css的引入方式
<1>內聯樣式
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>引入方式1</title> </head> <body><!--內聯樣式--><h1 style="color: red; font-size: 20px">Hello World</h1><h1>CSS</h1> </body> </html><2>內部樣式
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>引入方式2</title><!--內部樣式--><style>div{color: red;font-size: 20px;}</style> </head> <body><div>div1</div><div>div2</div> </body> </html><3>外部樣式【多個網頁需要使用相同的樣式時，推薦使用這種方式】
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>外部樣式[引入]</title> <!-- rel是關聯的意思，關聯的是一個樣式表(stylesheet)--><link rel="stylesheet" href="../css/2.css"> </head> <body> <div>div1</div> <div>div2</div> </body> </html>2.注釋
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>/*為div標簽添加樣式*/div {/*color: red;*/}</style> </head> <body> <!--div標簽--> <div>div</div> </body> </html>3.基本選擇器
【包含全局選擇器、元素選擇器、類選擇器、id選擇器等】
<html lang="en"> <head><meta charset="UTF-8"><title>基本選擇器</title><style>/*全局選擇器【常用于去外邊距】*//** {*//* background-color: aquamarine;*//* margin:0;*//* padding:0;*//*}*//*元素選擇器*/div {color: red;}/*類選擇器*/.cls {/*margin: 0;*/color: blue;}/*id選擇器*/#d4 {color: green;}#d5 {color: pink;}</style> </head> <body> <div>div1</div><div class="cls">div2</div> <div class="cls">div3</div> <h5 class="cls">aaa</h5><div id="d4">div4</div> <div id="d5">div5</div> </body> </html>7.屬性選擇器
【通過指定的屬性名和屬性值進行選擇】
<html lang="en"> <head><meta charset="UTF-8"><title>屬性選擇器</title><style>/*范圍越大，則優先級越小，type有具體值則先執行*/[type] {color: blue;}[type=password] {color: chocolate;}[type=text] {color: pink;}</style> </head> <body>用戶名：<input type="text"/><br/>密碼：<input type="password"/><br/>郵箱：<input type="email"/><br/> </body> </html>8.偽類選擇器
【通過對操作狀態進行選擇(未訪問、懸停、訪問中、訪問后)】
<html lang="en"> <head><meta charset="UTF-8"><title>偽類選擇器</title><style>a {text-decoration: none;}/*對標簽的狀態進行選擇【偽類選擇器】*//*未訪問的狀態*/a:link {color: black;}/*已訪問的狀態*/a:visited {color: red;}/*鼠標懸浮的狀態*/a:hover {color: blue;}/*已選擇的鏈接狀態【正在訪問】*/a:active {color: green;}/*注意: a:hover必須在css定義中的 a:link 和 a:visited之后，才能生效!a:active必須在 css 定義中的 a: hover之后才能生效!偽類名稱對大小寫不敏感。*/</style> </head> <body> <a href="http://www.baidu.com" target="_blank">百度一下</a> </body> </html>9.組合選擇器
【組合幾種選擇器進行選擇】
<html lang="en"> <head><meta charset="UTF-8"><title>組合選擇器</title><style>/*后代選擇器*/.top li {color: red;}.center li {color: blue;}/*分組選擇器*/span,#p1 {color: green;}</style> </head> <body> <div class="top"><ol><li>aa</li><li>bb</li></ol> </div> <div class="center"><ul><li>aa</li><li>bb</li></ul> </div><span>span</span> <p id="p1">段落1</p> <p>段落2</p> </body> </html>10.瀏覽器開發者模式圖解
總結
以上是生活随笔為你收集整理的静态资源Css基础语法的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 调整电脑默认PDF阅读器(调整电脑默认p
- 下一篇： 一拖股份是什么概念股？洛阳一拖只生产拖拉