css選擇器,背景漸變

2021-07-03 00:05:47 字數 3366 閱讀 4583

css選擇器

1.    標籤選擇器,就是給常用的tag加上樣式:

div2.    * 所有元素的選擇器,整個文件內的所有元素都被設上該樣式

3.    class選擇器:. 表示

.test  

4.    id選擇器:#表示

#hello   world

world 將變成紅色

5.    你還可以用方括號的形式指定其他屬性,如

input[type=」text」]/*把text裡的背景色設為黃色了,如下,框中的green字樣顯示綠色,如果是[name=「test」]效果一樣*/

例子:對於anchor   a來說。有:a:visited  a:hover  a:active   a:link

a.homepage:link

a.homepage:visited

a.homepage:hover

a.homepage:focus{}

a.homepage:active

go to our

class=

"homepage"

href=

"" title=

"home page"

>

home page

.7.    基於關係的選擇器:

常見的基於關係的選擇器

選擇器

選擇的元素

a e任何是元素a的後代元素e (後代節點指a的子節點,子節點的子節點,以此類推)

a > e

任何元素a的子元素

e:first-child

任何元素的第乙個子元素e

b + e

任何元素b的下乙個兄弟元素e

例項:帶下拉列表的導航,

重點在:

.class ul ul

第乙個ul li a加了》;為了讓

.menubar

.menubar ul

.menubar ul li

.menubar ul li>a:link, .menubar ul li>a:active, .menubar ulli>a:visited

.menubar ul li>a:hover

/*vertical menu*/

.menubar ul ul

.menubar li:hover>ul

.menubar ul ul li

.menubar ul ul li>a:link, .menubar ul ul li>a:visited,.menubar ul ulli>a:active

.menubar ul ul li > a:hover

.menubar ul ul ul

a.menu-bar:after

div如下:

list2

list3

about

背景 background 屬性:

background-color

,  background-image

,background-position

,  background-repeat

,  background-size

,  background-attachment。

ø  對於background-image來說:也應該set乙個background-color以免影象獲取不到

.topbanner

ø  根據background-repeat, 影象可以無限平鋪、沿著某個軸(x 軸或 y 軸)平鋪,或者根本不平鋪。repeat;repeat-x;repeat-y;no-repeat;inheritd

ø  背景影象根據background-position,來放置位置;

eg: background-position:50% 50% 意味著影象中描述為 50%50% 的點(中心點)與元素中描述為 50% 50% 的點(中心點)對齊。這就是讓背景影象在元素內居中

ø  background-attachment: 設定背景影象是否固定或者隨著頁面的其餘部分滾動.預設值:scroll可選fixed, inherit

ø  backgound-size:100% 100%會將背景影象從原來的大小拉伸到全屏

將內容重合在一起寫:

background:||[ / ]|| || ||

background-color在前在後都可以。

body

background:#ff0000 url(eg_bg_03.gif) no-repeat fixed center/100% 50%;

背景漸變

1. 有兩種形式:linear-gradient()線性;radial-gradient(),放射狀

background: linear-gradient(to bottom, blue, white); 上到下是從藍到白的

background: linear-gradient(to right, blue, white); 從左到右是從藍到白的

background: linear-gradient(to bottom right, blue, white); 從左上角到右下,藍-白

-prefix-linear-gradient(top, blue, white); 這個是老瀏覽器的方法。注意和新的正好相反。

上面也可以用角度:linear-gradient(<90deg>,red, white)

2.可以多設幾條漸變線:

background: linear-gradient(to bottom, blue, white 80%, orange);

一般第乙個和最後乙個的百分數不用寫,預設為0 和100;寫好中間就好。如果不懈寫則平均分。如果顏色改用,rgba,配合,怎會呈現出漸隱等效果,

background: linear-gradient(to right, rgba(255,255,255,0),rgba(255,255,255,1)), url(

文字內容:

l   css

可以在元素的前後插入文字:在

選擇器的後面加上

:before

或者:after

。在宣告中,指定

content

屬性,並設定文字內容。

例子:在每個類名為test的元素前面加上test:字樣

.test:before

content中的內容可以使用預設的utf-8也可使用,還可以通過轉義機制(通過反斜槓轉義)指定單個字元。比如, \265b 是西洋棋黑皇后的符號

l   可以通過將content

屬性值設定為某個的url,可以將插到元素的前面或後面。

a.gallory:after

CSS選擇器及背景相關

偽類選擇器 選擇器優先順序 css單位 背景 屬性選擇器的標準語法如下 e attribute e 代表元素 attribute 代表屬性 自定義屬性 只需要在標籤後加上自定義的屬性,例如 中的data code 語法如下 data code style 若自定義屬性內有值則需要在中括號內完整的寫出...

css外觀 div背景 選擇器

設定邊框厚度為1px 實線 border 1px solid 設定p標籤的高度 height 100px 如果行高和高度一致,則文字垂直居中 line height 100px 文字修飾 下劃線 text decoration underline 刪除線 text decoration line t...

css選擇器 CSS選擇器總結

在前不久的專案中,實習小妹妹在乙個全域性的樣式中使用了下面這個css選擇器 content 對應的html結構大致是 實習妹子大致的意思是想要讓content下的子元素div的高度100 但是貌似她沒有真正理解first child的意義,從而導致這個全域性的樣式讓 所有頁面都出現了問題,然後我就只...