CSS基礎之高階

2021-08-14 21:33:35 字數 3640 閱讀 1567

今天是學習css的第二天,進一步學習了盒模型、text文字、背景、浮動的四個屬性,其中浮動最是重點。

盒模型:padding、border、margin

padding-top

:20px;

/* 上 */

padding-right

:30px;

/* 右 */

padding-bottom

:20px;

/* 下 */

padding-left:40px; /* 左 */

或者padding

: 20px 30px 20px 40px;

/*順序是:上 右 下 左*/

padding

: 20px 30px 40px;

/*上 右左 下*/

padding

: 20px 30px;

/*上下 右左 */

border-left-width

: 40px;

border-left

: 20px solid #ccc;

border-right-style

: solid;

border-top-color

: #0f0;

span

text文字

font-size: 16px;————— 文字大小 瀏覽器預設的字型大小是16px

color: #f00; ——————–文字的顏色

font-family: 「宋體」,」微軟雅黑」,monaco; ————–設定字型

—————逗號分隔設定多個字型,

—————如果沒有第乙個就用第二個,

—————如果沒有第二個就用第三個…

font-weight: bold;————- 設定文字的加粗屬性

————–bold 加粗;bolder 更粗

————–100 - 900之間: 500 正常; 600↑ 加粗; 400↓變細。

font-style: italic;————– 斜體

letter-spacing: 40px;——- 字間距

line-height: 200px;———- 行高

line-height: 1.5; ————–設定比例

line-height = height;———單行文字垂直居中

text-align: center ;————水平方向的對齊方式

————left 預設 左對齊 ;center 居中對齊;right 右對齊

text-indent: 30px;———— 首行縮排

text-decoration: none;——-設定下劃線樣式

————none 沒有下滑線 ;underline 下劃線 ;

————overline 上劃線 ;line-through 刪除線

background

background-color: #f00;————————– 背景色

background-image: url(的路徑);———-背景

background-repeat: no-repeat;—————–背景重複

—————————repeat 預設重複 直到鋪滿整個容器; no-repeat 不要重複;

—————————repeat-x x軸方向重複;repeat-y y軸方向重複

background-position: center;——————-背景的位置

—————————10px 20px;(設定尺寸 x 10 y 20)

—————————center 居中 如果只有乙個值 那麼x y 都是這個位置

—————————50% 20%;

—————————left top; 預設左上角

background-position-x————————— 同上background-position;

—————————–x方向背景位置 舊版本的ff瀏覽器不支援

background-position-y————————— 同上background-position;

—————————–y方向背景位置 舊版本的ff瀏覽器不支援

background-size:——————————— 控制背景大小

—————————-background-size: 400px 300px; 設定具體尺寸

—————————-background-size: 100% 50%; 設定百分比

————————— background-size: cover; 填充 完全覆蓋 不變形

—————————-background-size: contain; 適應 有乙個邊覆蓋(可能是寬也可能是高,這取決於寬高比) 不變形

background-attachment: fixed; ————–是否隨著頁面滾動

—————————-預設值 scroll 滾動

—————————-fixed 固定 不滾動 簡單視差效果

float 浮動

清除浮動

補充

a:nth-of-type(2)

head>

linka>

linka>

linka>

body>

charset="utf-8" />

css引入方式title>

a:link

.external

:link

:link

:visited

h1a,div

a:hover,

div:hover

a:active,div

:active

style>

head>

href=""

class="external"

target="_blank">外部鏈結a>

li>

href=""

target="_blank">內部鏈結a>

li>

href=""

class="external"

target="_blank">外部鏈結a>

li>

href=""

target="_blank">內部鏈結a>

li>

請將滑鼠分別移動到下面2個元素上h1>

href="">我是乙個aa>

我是乙個divdiv>

ul>

body>

注:超連結狀態順序:

a:link {}

a:visited {}

a:hover {}

a:active {}注意,a:hover 必須位於 a:link 和 a:visited 之後,a:active 必須位於 a:hover 之後

可靠的順序是:l(link)ov(visited)e h(hover)a(active)te, 即用喜歡(love)和討厭(hate)兩個詞來概括

css筆記之高階技巧

所謂的介面樣式,就是更改一些使用者操作樣式,比如 更改使用者的滑鼠樣式,表單輪廓等。但是比如滾動條的樣式改動受到了很多瀏覽器的抵制,因此我們就放棄了。防止表單域拖拽 設定或檢索在物件上移動的滑鼠指標採用何種系統預定義的游標形狀。cursor default 小白 pointer 小手 move 移動...

python基礎之高階函式(下)

高階函式是滿足下列條件之一的即為高階函式。高階函式的引入 1 1 定義乙個函式,將指定列表中的偶數,儲存到乙個新的列表中。list list range 1 11,1 deffn a new list for i in list if i 2 0 return new list print fn l...

PowerMock 之高階學習

這裡的區域性變數沒有採取依賴注入的方式,而是採取了一種而是在方法內部 new出乙個 employeedao,我們通常都會寫這樣的 平時我們也可能或碰上這樣的問題,那麼我們怎麼去解決這個問題呢!public class employeeservice 說明 當使用powermockito.whenne...