目錄
- 什么是css
- 注釋
- CSS三種引入方式
- 基本選擇器
- 元素選擇器
- id選擇器
- 類選擇器
- 通用選擇器
- 組合選擇器
- 后代選擇器
- 兒子選擇器
- 弟弟選擇器
- 毗鄰選擇器
- 屬性選擇器
- 分組與嵌套
- 偽類選擇器
- 偽元素選擇器
- first-letter
- before
- after
- 選擇器優先級
什么是css
css： 層疊樣式表
css語法結構：
選擇器 {屬性1：屬性值1}
注釋
/*單行注釋*/
/*
多行注釋1
多行注釋2
*/
CSS三種引入方式
- 通過link標簽引入外部的css檔案（最正規用法）
<link rel="stylesheet" href="https://www.cnblogs.com/setcreed/p/01%20css簡介.css">
- 直接在html頁面上的head內通過style標簽直接書寫css代碼
<style>
h1 {
color: red;
}
</style>
- 行內標簽（直接在標簽內部通過style標簽寫）（不推薦使用）
<h1 style="color: yellow">文本資訊</h1>
基本選擇器
元素選擇器
/*讓所有的span標簽變成紅色*/
<style>
span {
color: red;
}
</style>
id選擇器
<style>
#d2 {
color: gold;
}
</style>
類選擇器
<style>
.c1 {
color: red;
}
</style>
通用選擇器
選擇所有
<style>
* {
color: orchid;
}
</style>
組合選擇器
后代選擇器
兒子選擇器
弟弟選擇器
毗鄰選擇器
屬性選擇器
- 找含有某個屬性名的標簽
- 找含有某個屬性名并且屬性值是什么的標簽
- 找p標簽 含有某個屬性名并且屬性值是什么 的標簽
- 任何的標簽都有自己的默認的屬性 id class
- 標簽支持自定義任何多的屬性（也就意味著可以讓標簽幫你攜帶一些額外的資料）
分組與嵌套
分組
嵌套
偽類選擇器
a標簽有四種狀態
- 沒有被點擊過
- 滑鼠懸浮在上面
- 點擊之后不松手
- 點擊之后 再回到原來的頁面
我們將input框滑鼠帶你進去之后的那個狀態叫做input獲取焦點，
滑鼠移出去之后的狀態叫做input框失去焦點
<style>
a:link { /*沒有點擊為紅色*/
color: red;
}
a:hover { /*滑鼠懸浮之后為藍色*/
color: blue;
}
a:active { /*點擊之后不放手為黃色*/
color: yellow;
}
a:visited { /*點擊之后回到原來的頁面 顯示為綠色*/
color: green;
}
</style>
偽元素選擇器
可以清除浮動帶來的負面影響，可以通過css添加文本內容
first-letter
常用的給首字母設定特殊樣式：
p:first-letter {
font-size: 48px;
color: red;
}
before
/*在每個<p>元素之前插入內容*/
p:before {
content:"*";
color:red;
}
after
/*在每個<p>元素之后插入內容*/
p:after {
content:"[?]";
color:blue;
}
選擇器優先級
-
選擇器相同的情況下， 引入方式不同
遵循就近原則， 誰離標簽更近，就聽誰的
-
選擇器不同的情況下
行內選擇器 > id選擇器 > 類選擇器 > 元素選擇器
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/106461.html
標籤：Html/Css
上一篇：html之form表單
下一篇：CSS尺寸樣式屬性