css基礎 Treasure66530打卡01

2021-10-09 08:01:37 字數 4877 閱讀 7586

內聯樣式

內部樣式

外部樣式

@import url(./css.css);
單詞表示法(color:yellow)

十六進製制表示法(color:#333333)

rgb三原色表示法(範圍0-255)(rgb(0,0,0))

background-color 規定要使用的背景顏色

background-position 規定背景影象的位置

值:x,y(top|center|bottom|left|right|百分率|px等)

background-size 規定背景的尺寸

值:length(設定寬高)|percentage(百分號)|cover(鋪滿)|contain(適應寬高);

background-repeat 規定如何重複背景影象

值: repeat 預設。背景影象將在垂直方向和水平方向重複。

repeat-x 背景影象將在水平方向重複

repeat-y 背景影象將在垂直方向重複

no-repeat 背景影象將僅顯示一次

background-origin 規定背景的定位區域

值: padding-box 背景影象相對於內邊距框來定位

border-box 背景影象相對於邊框盒來定位

content-box 背景影象相對於內容框來定位

background-clip 規定背景的繪製區域

值: border-box 背景被裁剪到邊框盒。 測試

padding-box 背景被裁剪到內邊距框。 測試

content-box 背景被裁剪到內容框。

background-attachment 規定背景影象是否固定或者隨著頁面的其餘部分滾動

值: scroll 預設值。背景影象會隨著頁面其餘部分的滾動而移動。

fixed 當頁面的其餘部分滾動時,背景影象不會移動

background-image 規定要使用的背景影象

值: url(『url』) 指向影象的路徑。

none 預設值。不顯示背景影象。

復合樣式:background:red url() repeat 0 0;(顏色 背景圖 平鋪方式 位置)

border-width

thin 定義細的邊框

medium 預設。定義中等的邊框

thick 定義粗的邊框

length 允許您自定義邊框的寬度(10px)

border-style

none 定義無邊框。

hidden 與 「none」 相同。不過應用於表時除外,對於表,hidden 用於解決邊框衝突。

dotted 定義點狀邊框。在大多數瀏覽器中呈現為實線。

dashed 定義虛線。在大多數瀏覽器中呈現為實線。

solid 定義實線。

double 定義雙線。雙線的寬度等於 border-width 的值。

groove 定義 3d 凹槽邊框。其效果取決於 border-color 的值。

ridge 定義 3d 壟狀邊框。其效果取決於 border-color 的值。

inset 定義 3d inset 邊框。其效果取決於 border-color 的值。

outset 定義 3d outset 邊框。其效果取決於 border-color 的值。

border-color:邊框顏色

border-collapse

separate 預設值。邊框會被分開。不會忽略 border-spacing 和 empty-cells 屬性。

collapse 如果可能,邊框會合併為乙個單一的邊框。會忽略 border-spacing 和 empty-cells 屬性。

font-family:字型

fotn-size:字型大小

font-weight:字型粗細(單詞[normal正常、bold加粗]; 數字[100-500正常、600-900加粗])

font-style:

normal 預設值。瀏覽器顯示乙個標準的字型樣式。

italic 瀏覽器會顯示乙個斜體的字型樣式。

oblique 瀏覽器會顯示乙個傾斜的字型樣式。

text-decoration:文字修飾

underline下劃線

line-through刪除線

overline上劃線

none不新增任何修飾

text-transform:文字大小寫

lowercase小寫

uppercase大寫

capitalize首字母大寫

text-indent:文字縮排(單位em)

text-align:文字對齊方式

left預設

right

center

justify(兩端點對齊,中間自行調節)

line-height:行高

letter-spacing:字間距

word-spacing:詞間距(english)

word-break

normal 使用瀏覽器預設的換行規則。

break-all 允許在單詞內換行。

keep-all 只能在半形空格或連字元處換行。

id選擇器(#css{})

class選擇器(.css{})

標籤選擇器(p{})

群組選擇器/分組選擇器(div,p,span{})

通配選擇器(*{})

層次選擇器

後代選擇器:選中.css元素內部後代所有p元素(.css p{})

子代選擇器:選中.css元素內部子元素p(.css>p{})

兄弟選擇器:選中.css元素後面的所有某一類兄弟元素p(.css~p{})

相鄰選擇器: 選中.css元素後面的某乙個相鄰的兄弟元素p(.css+p{})

屬性選擇器

div[class]{}

div[class][id]{}

div[class=box]{}

div[class*=search]{} //只要search在class**現過都可以選中

=:完全匹配 *=:部分匹配 ^=:起始匹配 $=:結束匹配

偽類選擇器

:link 訪問前的樣式(只能給a標籤)

:visited 訪問後的樣式(只能給a標籤)

:hover 滑鼠移入時的樣式(可以給所有標籤)

:active 滑鼠按下時的樣式(可以給所有標籤)

如果四個偽類都生效,順序為:l v h a

偽元素選擇器

div:after

div:before

:checked、:disabled、:focus 都是針對表單元素

結構性偽類選擇器

:nth-of-type(){}、:nth-child(){} 角標從1開始,n值表示從0到無窮大即都被選中,隔行換色(2n)(2n+1)

選中第一項 :first-of-type{} :first-child{}

選中最後一項 :last-of-type{} :last-chile{}

只有一項的時候被選中 only-of-type{}

float是魔鬼,會影響其他相鄰元素;但是clear是小白,其只會影響自身,不會對其他相鄰元素造成影響

clear語法:

clear : none | left | right | both

取值:none : 預設值,不抗浮動

left : 左側抗浮動

right : 右側抗浮動

both : 兩側抗浮動

float語法:

clear : none | left | right

取值:none : 預設值,不使用浮動

left : 左浮動

right : 右浮動

dhu複試基礎 66 加密

編寫乙個加密程式,用來加密乙個字串。加密規則如下 把字串中的所有數字0 1 9分別換成小寫英文本母a b j。把字串中的所有小寫英文本母a b j分別換成數字0 1 9。其它字元保持不變。你的程式需要從標準輸入裝置 通常為鍵盤 中讀入多組測試資料。每組輸入資料佔一行,其中只包含乙個字串,即需要被加密...

css學習 css基礎

子選擇器 parent child 子選擇器是指選擇parent的範圍內的第乙個子元素。這裡parent和child均是偽 可以是class用.classname,也可以是標籤ul li,也可以是id pid cid 後代選擇器 parent child 後代選擇器是指 選擇parent範圍內的所欲...

Python學習第66天(css內外邊距)

今天聽這個css課程,感覺這個老師真的講的很爛,明明可以很輕鬆理解,非得扯上一堆的if什麼的,明明很容易就能理解,硬生生給我說懵了。內外邊距倒是蠻有意思的 內邊距,自然就是塊級標籤自己內部的一些距離,然後外邊距,就是標籤和同級標籤之間的距離 margin 用於控制元素與元素之間的距離 margin的...