Html和Css學習筆記-css基礎知識

此篇博客是個人複習筆記,html和css學的時間過久了,忘得差很少了,最近要使用一下,因此從新打開html的書略讀,後記錄了標籤,元素,屬性的具體意義。css

這裏所介紹的html和css的版本爲html5與css3html

Html是超文本標記語言(英語全稱:HyperText Markup Language,簡稱:HTML)是一種用於建立網頁的標準標記語言html5

Css是層疊樣式表(英文全稱:Cascading Style Sheets)是一種用來html和xml等文件樣式的計算機語言,CSS不只能夠靜態地修飾網頁,還能夠配合各類腳本語言動態地對網頁各元素進行格式化。css3

Html與css文件驗證工具的地址:http://validator.w3.org/瀏覽器

 一.在html頁面中使用css定義樣式

方法1,在頁面中寫入css樣式信息

<style>標籤用於爲HTML文檔定義樣式信息網絡

style元素規定在瀏覽器中如何呈現HTML文檔。工具

type屬性是必需的,定義 style 元素的內容爲 "text/css"。字體

<style>元素應位於head部分中url

在<style>元素中加入body{xxxxxx},用於規定括號內的全部css樣式要應用於html<body>元素中的內容,xxxx的內容使用css定義頁面的大小,邊距,字體,顏色等spa

例如:

<html>
    <head>
        <title>xxxxxxxx</title>
        <style type="text/css">
        body{ background-color: #d2b48c: margin-left: %20; margin-right: %20; border: 2px dotted black; padding: 10px 10px 10px 10px font-family:sans-seif; } </style> </head> <body> <h1>xxxxxxxxx</h1> <h2>xxxxxxxxxx</h2> <p>xxxxxxxxxxxx</p> </body> </html>

方法2,在html文件中引入外部css樣式文件(建議使用此方法)

 將html文件中的<style>標籤刪除,在原位置改寫爲以下代碼:

<link type="text/css" rel="stylesheet" href="xxxx.css">

 link元素用於連接外部信息,他是一個void元素

type屬性是必需的,定義 style 元素的內容爲 "text/css"

rel屬性指定了html文件與所鏈接文件的關係,這裏要連接一個樣式表因此使用值「stylesheet」

href指定樣式表的位置可使路徑或url

二.css文件的書寫方法

在css文件中使用以下結構書寫

1.爲單個元素編寫規則

元素(這裏不須要加<>符號) { 屬性:參數; 屬性:參數; 屬性:參數; 屬性:參數; } 

2.爲多個元素編寫規則

元素,元素(這裏不須要加<>符號) { 屬性:參數; 屬性:參數; 屬性:參數; 屬性:參數; } 

三.css的一些可用屬性

css文件中註釋的寫法:/*xxxxxx*/

background-color:xxx;設置背景顏色

border:xpx(邊框的寬度) solid(實虛線) gray(顏色);設置一個邊框

border-bottom:xpx(邊框的寬度) solid(實虛線) gray(顏色);設置下邊框的外觀

color:設置字體顏色,這裏能夠設置爲顏色代碼

font-weight:這個屬性控制文本的粗細,參數有bold(粗體),normal(去掉粗體樣式)oblique(傾斜文本)

font-style:這個屬性設置斜體文字,參數有:italic

letter-spacing:在字母之間設置間距

top:控制元素頂部的位置

left:這個屬性指定元素的左邊所在位置

text-align使用這個元素將文本左對齊,居中或右對齊

text-decoration:對文本進行裝飾,例如加入上劃線(overline),下劃線(underline),刪除線(line-through)

line-height:這個屬性設置一個文本元素中的行間距

background-image:這個屬性在元素後面放置一個圖像

四.html和css中類的概念 

1.怎樣設置一個類

(1)在html中加入如下參數

<元素 class="xxxx(類的名字)">

(2)在css設置以下參數

第一種:

元素.類的名字{ 屬性:參數; 屬性:參數; } 這隻會選擇類的名字所對應的元素

第二種:

.類的名字{ 屬性:參數; 屬性:參數; } 這會選擇使用該類的名字中的全部元素

 (3)單個元素能夠加入多個類,寫法以下

<元素 class="類的名字 類的名字 類的名字 ">

同一選擇器下的其餘元素若是沒有特定元素會某人繼承父元素的樣式,有特定元素則使用特定元素,同一特定元素不一樣選擇器的狀況下,以css文件中最靠後的選擇器的樣式爲準。

五.字體相關設置

1.使用font-family屬性設置本地字體及網絡字體

(1)使用本地字體,例子:

某元素( font-family:字體名字,字體名字,字體名字" )

其中能夠設置爲一個字體或多個字體,但多個字體要用逗號隔開

(2)使用網絡字體

@font-face { font-family:"字體名字" src:url("字體的url"), url("字體的url"); 元素{ font-family:」上面設置的字體名字「; }

2.使用font-size屬性設置字體大小

字體大小設置的三種表示方法:1.關鍵字 2.em 3.百分數

經常使用方法:

1.選擇一個關鍵字,指定它爲body規則中的字體大小,這至關於頁面字體大小

2.使用em或百分數,相對於body字體的大小指定其餘元素的字體大小

補充:其中全部屬性值的關鍵字爲:small,thin,medium,thick(每一個瀏覽器對關鍵字的大小定義不同)

六.顏色設置相關

顏色參數的書寫方法有三種分別是:

1.直接設置顏色對應的英文單詞

2.使用rgb參數(具體數值去顏色工具上面查找)

例如

rgb(123,123,213)

rgb(10%,123%,123%)

3.使用十六進制碼錶示顏色(具體數值去顏色工具上面查找)

例如

#cc600
相關文章
相關標籤/搜索