生活随笔
收集整理的這篇文章主要介紹了
前端基础之CSS_1
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
閱讀目錄
摘要
- CSS（層疊樣式表）的三種設置方法
- 基本選擇器
- 組合選擇器
- 屬性選擇器
- 分組與嵌套
- 偽類選擇器
- 偽元素選擇器
- 選擇器的優(yōu)先級
- 一些樣式的設置（字體、文本、背景、邊框）
- display屬性設置
01.CSS（層疊樣式表）的三種設置方法
- CSS又名層疊樣式表，它的作用就是給HTML網(wǎng)頁進一步裝飾，前面我們學習HTML結構的時候其實就是學習了HTML的一個大的骨架結構，后面學習的表form表單展現(xiàn)的形式是很low的，需要進一步對齊修飾設置，讓它變得更高大上起來，這就離不開CSS的知識。
層疊樣式表(英文全稱：Cascading Style
Sheets)是一種用來表現(xiàn)HTML（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等文件樣式的計算機語言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁，還可以配合各種腳本語言動態(tài)地對網(wǎng)頁各元素進行格式化。
CSS 能夠對網(wǎng)頁中元素位置的排版進行像素級精確控制，支持幾乎所有的字體字號樣式，擁有對網(wǎng)頁對象和模型樣式編輯的能力。 - 語法結構：選擇器 {屬性： 屬性值；屬性： 屬性值}
- 注釋形式：/這是注釋內容/
/*多行注釋內容1
多行注釋內容2
*/ - 三種設置方法： head里面style中寫css：
head里面link引入css文件：
在標簽內直接指定style：hello world!
我們在設置不同種類標簽內容的樣式的時候，需要知道我們修改的標簽的位置，接下來看看如何精確定位設置樣式的位置，才能設置其樣式。
02.基本選擇器
標簽通常同的屬性有：id和class類
- 標簽選擇器：根據(jù)標簽種類來設置該類標簽樣式
- id選擇器：每個標簽都可以設置一個id在唯一標識它，所以我們可以通過這個id來定位到該標簽位置，從而進行修改樣式操作，id前面注意要加上#
- 類選擇器：在標簽里面設置class=“c1”，c1是一個類的設置樣式，在style里定義的時候前面需要加點（.c1
{color：red}） - 通用選擇器：類似這種* {color： blue}，*代表所有標簽，意思就是所有都全部設置
--------------------------------------------------------------------注：如果你對python感興趣，我這有個學習Python基地，里面有很多學習資料，感興趣的
+Q群：
895817687
--------------------------------------------------------------------
<!DOCTYPE html
>
<html lang
="en">
<head
><meta charset
="UTF-8"><title
>CSS學習測試
</title
><style
>p
{color
: gold
}.c1
{color
: mediumturquoise
}* {color
: red
}</style
>
</head
>
<body
>
<p
>我要記住你的樣子
</p
>
<div
>像魚記住水的擁抱
</div
>
<span
>像云在天空中停靠
</span
>
<h3
class="c1">夜晚的來到
</h3
>
<p
id="p1">也不會忘了陽光的溫暖
</p
>
</body
>
（涉及查找優(yōu)先級的問題，在后面會談及。）
03.組合選擇器（span套span，不符合html5規(guī)則）
后代選擇器==>div span：div里面所有的span
<div
>01我要忘了你的樣子
<br
><span
>02像魚忘了海的味道
<br
><span
>03放下所有夢和煩惱
</span
></span
>
</div
>
- 兒子選擇器==>div>span：div里面兒子一層（第一層）所有的span
<style
>div
>span
{color
: deeppink
}</style
><div
>主div
<div
>主div的兒子
1<span
>主div的孫子
1</span
></div
><p
>主div的兒子
2<span
>主div的孫子
2</span
></p
>
</div
>
- 毗鄰選擇器==>div+span：div下面挨著的span
<style
>div
+span
{color
: deeppink
}
</style
><div
>主div
<p
>主div的兒子
2<span
>主div的孫子
2</span
></p
>
</div
>
<span
>div下面的第一個span
</span
>
<span
>div下面的第二個span
</span
>
- 弟弟選擇器==>div~span：與div同一級且下面所有的標簽
<style
>div
~span
{color
: deeppink
}</style
><div
>主div
<p
>主div的兒子
2<span
>主div的孫子
2</span
></p
>
</div
>
<span
>div下面的第一個span
</span
>
<span
>div下面的第二個span
</span
>
04.屬性選擇器
在標簽內自定義一個屬性，用于找到該標簽的作用。
<style
>[xxx
] {color
: deeppink
}</style
><p xxx
>自定義屬性xxx
</p
>
<p xxx
="1">自定義屬性
+值
1</p
>
<p xxx
="2">自定義屬性
+值
2</p
>
<p
id="xxx">我是打醬油的！
</p
>
<style
>[xxx
='1'] {color
: deeppink
}</style
><p xxx
>自定義屬性xxx
</p
>
<p xxx
="1">自定義屬性
+值
1</p
>
<p xxx
="2">自定義屬性
+值
2</p
>
<p
id="xxx">我是打醬油的！
</p
>
<style
>[xxx
='2'] {color
: deeppink
}</style
><span xxx
="2">我是span
,我的屬性里有xxx
</span
>
<p xxx
>自定義屬性xxx
</p
>
<p xxx
="1">自定義屬性
+值
1</p
>
<p xxx
="2">自定義屬性
+值
2</p
>
<p
id="xxx">我是打醬油的！
</p
>
05.分組與嵌套
分組：
<style
>div
,p
,span
{color
: red
}
</style
><div
>我是div
</div
>
<p
>我是一個p
</p
>
<span
>我是span
</span
>
<style
>div p
,span
{color
: red
}
</style
><div
>我是div
<p
>我是div里面的一個p
</p
><span
>我是div里面的span
</span
>
</div
>
<p
>我是一個p
</p
>
<span
>我是span
</span
>
div p嵌套關系，然后div和span是組合關系，所以：
06.偽類選擇器
a標簽的四種狀態(tài)：
<style
>a
{text
-decoration
: none
} /*去掉下劃線
*/a
:link
{color
: green
} /*鏈接什么都不干的時候顏色
*/a
:hover
{color
: red
} /*鼠標放在鏈接上面不做任何動作時候變的顏色
*/a
:active
{color
: blue
} /*鼠標點擊鏈接時候，鏈接的顏色
*/a
:visited
{color
: gray
} /*當這個鏈接已經(jīng)點擊過，將變成的顏色
*/</style
><p
><a href
="#我是下面" id="我是上面">點我跳到下面
</a
></p
>
<p
><a href
="http://www.t66y.com" target
="_blank">點我開啟新的人生篇章
(爬梯吧）
</a
></p
>
<p
><a href
="http://www.baidu.com" target
="_blank">百度一下
</a
></p
>
<p
><a href
="#我是上面" id="我是下面">點我跳到上面
</a
></p
>
- 獲取焦點：讓輸入框在選中時候，背景顏色變成自定義顏色
<style
>input:focus
{background
-color
: yellow
}</style
><form action
=""><label
for="a1">用戶
: <input type="text" id="a1" name
="username"></label
><label
for="a2">用戶
: <input type="password" id="a2" name
="password"></label
><input type="submit">
</form
>
<style
>p
:first
-letter
{color
: red
;font
-size
: 24px
}</style
><p
>我聞西方大士，
</p
>
<p
>為人了卻凡心。
</p
>
<p
>秋來明月照蓬門，
</p
>
<p
>香滿禪房幽徑。
</p
>
<p
>屈指靈山會后，
</p
>
<p
>居然紫竹成林。
</p
>
<p
>童男童女拜觀音，
</p
>
<p
>仆仆何嫌榮頓？
</p
>
<style
>p
:before
{content
: '△';color
: red
;font
-size
: 24px
}</style
><p
>萬物由道而生，循著道成長，而后又回歸于道。
</p
>
<p
>人可以毀滅，但不可以屈服。
</p
>
<p
>你要克服的是你的虛榮心，是你的炫耀 欲，你要對付的是時時刻刻想出風頭的小聰明。
</p
>
after:
<style
>p
:after
{content
: '☆';color
: red
;font
-size
: 24px
}</style
><p
>包租婆，怎么就沒有水了呢
</p
>
<p
>維護世界和平就靠你了
,我這里有本秘籍
,見與你有緣
,就十塊錢賣給你了
.</p
>
08.選擇器的優(yōu)先級
09.一些樣式的設置（字體、文本、背景、邊框）
塊兒級標簽的寬度和長度：
<style
>div
{width
: 800px
; height
: 100px
;background
-color
: mediumspringgreen
}</style
><div
>樊登讀書，改變你我
</div
>
<style
>p
{font
-size
: 24px
;font
-weight
: lighter
;color
: /*color
: rgb
(0,0,255);*//*color
: rgba
(0,0,255,0.2)} 最后的
0.2是透明度（
0-1之間）
*/</style
><p
>面朝大海，春暖花開
</p
>
<style
>p
{text
-align
: center
;text
-decoration
: line
-through
}</style
><p
>浪花一朵朵
</p
>
<p
>桃花朵朵開
</p
>
去掉跳轉文字的下劃線：
<style
>a
{text
-decoration
: none
}</style
><a href
="http://www.baidu.com">百度一下
</a
>
<a href
="http://www.google.com">谷歌一下
</a
>
背景屬性：
<style
>.c1
{height
: 200px
;background
: url
("20190529[21-04].png") blue no
-repeat center
;}.c2
{height
: 200px
;background
-color
: tomato
}.c3
{height
: 200px
;background
-color
: yellow
}.c4
{height
: 200px
;background
-color
: greenyellow
}</style
>
</head
>
<body
>
<div
class="c1"></div
>
<div
class="c2"></div
>
<div
class="c3"></div
>
<div
class="c4"></div
>
邊框：
<style
>div
{border
: 1px dashed red
}</style
><div
>我是一條魚
</div
>
<style
>div
{width
: 400px
;height
: 400px
;background
-color
: red
;border
: 2px dashed black
;border
-radius
: 50%;}</style
><div
></div
>
10.display屬性設置（設置不顯示，不會繼續(xù)占用位置）
display：none
<style
>[xxx
] {display
: none
} /*設為none代表含xxx屬性標簽的內容都不顯示，且不再占用原位置
</style
><div
>開頭
1</div
>
<div xxx
>看我顯示沒有
1</div
>
<div xxx
>看我顯示沒有
1</div
>
<div
>結尾
2</div
>
- display:inline 將塊級標簽變成行內標簽
<style
>div
{height
: 300px
;width
: 200px
;background
-color
: aquamarine
;display
: inline
;}</style
><div
>天天
</div
>
<div
>年年
</div
>
- display:block 將行內標簽變成塊級標簽
<style
>span
{display
: block
}</style
><span
>美好的事情
</span
>
<span
>即將到來
</span
>
- display ：inline-block 讓span標簽具有獨占一行且可以設置長寬
<style
>span
{width
: 120px
;height
: 400px
;background
-color
: bisque
;border
: 2px solid red
;display
: inline
-block
;}</style
><span
>第一個span
</span
>
<span
>第二個span
</span
>
與50位技術專家面對面20年技術見證，附贈技術全景圖
總結
以上是生活随笔為你收集整理的前端基础之CSS_1的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。
