Html CSS學習筆記4

2021-10-08 18:07:36 字數 2788 閱讀 6026

在此之前要知道,有一些屬性具有繼承特性,但都能修改起預設特性。

繼承:

inherit;/繼承父類的屬性/

initial;/*不繼承父類屬性/

顏色單位:

blue

lightblue

a:0-1之間:

0代表完全透明 1代表完全不透明

拾色器/取色器:

lang

="en"

>

>

charset

="utf-8"

>

name

="viewport"

content

="width=device-width, initial-scale=1.0"

>

>

documenttitle

>

>

divdiv p

div#color

style

>

head

>

>

>

hello

>

world!p

>

div>

"color"

>

div>

body

>

html

>

px絕對單位

無論其他相關的設定怎麼變化,畫素指定的值是不會變化的。

em相對單位

1em與當前元素的字型大小相同(乙個大寫字母m的寬度)預設1em=16px

%相對單位

它們的長度總是保持相同的長度,即使它們的父容器的寬度發生變化。

lang

="en"

>

>

charset

="utf-8"

>

name

="viewport"

content

="width=device-width, initial-scale=1.0"

>

>

字型title

>

>

span

divp

@font-face

style

>

head

>

>

>

hellospan

>

>

helloi

>

>

hello

div>

>

一二三四1234p

>

body

>

html

>

2.設定字型

@font-face

3.引用字型

div1.引入外部樣式檔案

link標籤

將以下**貼上到網頁html**的 < head > 部分

href

=""rel

="stylesheet"

>

2.使用行內元素

outer.css

.one

index.html:

iconfont

1.引入css

2.使用

ol有序列表

私有屬性:start(從哪開始)

reversed:布林屬性,反轉

list-style-type

設定列表項標誌型別

list-style-position

設定列表項標誌出現的位置

list-style-image

自定義設定列表項標誌

list-style

列表樣式的速記寫法

#outer

list-style-type取值

說明none

取消所有樣式

disc

實心圓circle

空心圓square

實心正方形

upper-roman

大寫羅馬數字

lower-roman

小寫羅馬數字

list-style-position 取值

說明outside

列表項標誌出現在主塊框的外部

inside

列表項標誌出現在主塊框的內部

#outer li

list-style速記寫法

[

][][

]

屬性中帶有[ ]是可選屬性

#outer li

line-height 設定列表的行高

當乙個塊級元素中只有一行文字時,將列表的行高和height的設定成同乙個值,可以將文字垂直居中

塊級元素可以設定寬高

行內元素不能設定寬高

img:

特殊的行內元素

私有屬性:width height

html css學習筆記 4 定位

如何讓圖1中的div2移動到如圖2上的位置 思路 哪些css命令能夠影響盒子顯示的位置呢?relative相對定位 定位偏移量 position relative 相對定位 a 不影響元素本身的特性 b 不使元素脫離文件流 c 如果沒有定位偏移量,對元素本身沒有任何影響 定位元素位置控制 top r...

HTML CSS學習筆記

利用標籤中style屬性來改變每個標籤的顯示樣式 適用於單個標籤的樣式修改。不靈活 this is p tag 內嵌形式 可用於同類標籤的樣式統一修改 依然不夠靈活 表示後面的所有table中的文字預設顏色如我所設定。前提是已經存在乙個定義好的css檔案,網頁的一部分樣式需要用到,那麼可以採用這種方...

html css學習筆記

本人正經職業位android 開發,無奈現在社會壓力太大,對做人的要求越來越高,只掌握一門技術根本不好意思說自己是一名程式設計師,更無法在這個社會生存。本人只好順應時代發展的需要,不斷提高自己的綜合水平,提高對自身的要求,選擇了去學習html和css等前端的有關知識,新手入門,記錄一些學習過程中的筆...