關於一些html和css2的知識點

標籤：解決方案   實現   line   標準   指令碼語言   1.0   捲軸   傾斜   中文   

前端開大語言三種:1)HTML(hypertext markup language)結構2)css(Cascading Style Sheets)樣式  3)js(Javascript)行為  指令碼語言

屬性:屬性值  用來描述標籤的一些特徵的關鍵詞

 

關於css樣式的引入方式 一共有三種

1)行間樣式表(寫在標籤的開始標記上)

2)內部樣式  寫在<style></style>標籤之間

3)外部樣式表  用<link>標籤引入

關於盒模型的一些屬性

overflow屬性

屬性值

visible  預設值,內容不會被修剪,會呈現在元素框之外

hidden  內容會被修剪,並且其餘內容是不可見的

scroll  內容會被修剪但是瀏覽器會顯示捲軸以便查看其餘的內容

auto  如果內容被修剪,則瀏覽器會顯示捲軸,以便查看其餘的內容.

inhert規定應該從父元素繼承overflow屬性值.

 

margin屬性  外邊距

margin是可以設定負值的

外邊距:margin(也是一個複合屬性)可以跟一個值,兩個值,三個值,四個值

順序是   margin-top,margin-right,margin-bottom,margin-left

 

關於margin有兩個常見的問題

1.上下邊距重疊問題

兩個上下相鄰的元素,如果上個元素設定了margin-bottom,下面的元素設定了margin-top,並不會將兩個值加起來,而是取其中較大的

的值進行顯示

2.當兩個元素為父子關係時(嵌套),給子項目添加(margin-top)值得時候,該值會傳遞父級.

關於對這個問題的解決方案有五種

1)給父級添加overflow:hidden

2)給父級增加border:1px solid transparent(這是一個透明色);

3)給父級增加display:inline-block;

4)給父級position:absolute;

5)給父級增加padding-top:1px;

border邊框的屬性

border-style屬性值:

none:定義無邊框

hidden 與"none相同",不過用於表示除外,對於表hidden解決了邊框衝突

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

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

double定義為雙線.雙線的 寬度等於boder-width的值

groove定義3d凹槽邊框嗎,取決於boder-color

另外還有  ridge3d壟狀邊框。其效果取決於 border-color 的值。

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

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

inherit 規定應該從父元素繼承邊框樣式。

 

關於文本的一些設定

 

font-size:字型大小  一般為偶數,單位px, em, rem

 

網頁中顏色的設定

用英文單詞作為屬性值,也可以用rgb(),rgba()和十六進位色彩值表示

 

屬性值

值 描述

xx-small

x-small

small

medium

large

x-large

xx-large

把字型的尺寸設定為不同的尺寸，從 xx-small 到 xx-large。

預設值：medium。

smaller 把 font-size 設定為比父元素更小的尺寸。

larger 把 font-size 設定為比父元素更大的尺寸。

length 把 font-size 設定為一個固定的值。

% 把 font-size 設定為基於父元素的一個百分比值。

inherit 規定應該從父元素繼承字型尺寸。

 

color設定文本的字型顏色

 

color_name 規定顏色值為顏色名稱的顏色（比如 red）。

hex_number 規定顏色值為十六進位值的顏色（比如 #ff0000）。

rgb_number 規定顏色值為 rgb 代碼的顏色（比如 rgb(255,0,0)）。

inherit 規定應該從父元素繼承顏色。

 text-align文字對齊

left把文本排列在左邊.預設值:由瀏覽器決定.

right 把文本排列到右邊

center 把文本排列在中間

justify實現左右對齊的文本對齊文字效果

inherit規定應該從父元素繼承 text-align屬性值

font-weight文字著重

 

 

normal 預設值。定義標準的字元。

 

bold 定義粗體字元。

 

bolder 定義更粗的字元。

 

lighter 定義更細的字元。

 

100

 

200

 

300

 

400

 

500

 

600

 

700

 

800

 

900

 

定義由粗到細的字元。400 等同於 normal，而 700 等同於 bold。

 

inherit 規定應該從父元素繼承字型的粗細

 

text-decoration文本修飾

 

none 預設.定義標準的文本.

underline 定義文本下的線

overline定義文本的上的一條線

lin-through 定義穿過文本下的一條線

blink 思念故意閃爍的文本

inherit規定應該懂父元素繼承text-decoration屬性的值

 

word-spacing單詞間距(有空格為解析單位)

normal 預設。定義單詞間的標準空間。

length 定義單詞間的固定空間。

inherit 規定應該從父元素繼承 word-spacing 屬性的值。

 

letter-spacing  字元間距

 

font-family字型(通常中文預設是宋體)

line-height行高

text-indent首行縮排(em縮排字元)

font-style 文字樣式

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

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

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

inherit 規定應該從父元素繼承字型樣式。

 

 

 

 

 

關於一些html和css2的知識點