前端部分 CSS基礎介紹

2022-05-17 07:30:41 字數 3060 閱讀 5426

css(cascading style sheet,層疊樣式表)定義如何顯示html元素。也就是定義相應的標籤語言來定製顯示樣式達到一定的顯示效果。

每個css樣式由兩個組成部分:選擇器和宣告。宣告又包括屬性和屬性值。每個宣告之後用分號結束。

引用css樣式的方式分為3種:1、便簽行內定義顯示方式 。2、內部定義,在html檔案的中定義。3、以及把樣式語句放在css檔案中,進行外部引用。
語法舉例:我是乙個p標籤(未加css樣式前),加css樣式:我是乙個p便簽

在網頁上顯示結果:

嵌入式是將css樣式集中寫在網頁的標籤對的標籤對中。格式如下,執行結果與上面一致:

引用外部css樣式檔案可以理解為將內部樣式方法中的標籤對中的內容存在乙個css檔案中,這樣我們只要修改css檔案中的內容就可以改變html的顯示樣式。
引用外部css樣式檔案需要兩步:1、將樣式語句放在css檔案中。2、使用link便簽語句:

`建立乙個css檔案將樣式語句寫入:`

前面介紹了設定css樣式包括選擇器和樣式宣告部分,選擇器部分是為了找到目標標籤,選擇器部分有多種語法來幫助你找到相應的標籤。下面依次介紹常用的選擇器語法。
語法: p  找到所有p標籤並將標籤內容設定成紅色,執行下面**在網頁上三條p標籤的內容都將顯示為紅色。
我是乙個p標籤1

我是乙個p標籤2

我是乙個p標籤3

我們都知道便簽可以設定id,而且id唯一這樣我們可以通過id來尋找我們要設定樣式的標籤,語法舉例:
p2 這樣id='p2'的標籤會這賦予樣式

我是乙個p標籤1

我是乙個p標籤2

我是乙個p標籤3

可以將任意多個不同型別標誌設定類名,可以通過類選擇器語句將有類名的標籤選中設定樣式語法:.c
我是乙個p標籤1

我是乙個p標籤2

我是乙個p標籤3

我是乙個div標籤1

這樣 我是乙個div標籤1

和我是乙個p標籤1

將會在網頁上顯示紅色,另外類選擇器還支援以下語法:p.c1,這樣只會在所有p標籤下尋找有類名c1的標籤,也就是說只有我是乙個p標籤1

會顯示成紅色。

* 選擇所有標籤進行設定

/*li內部的a標籤設定字型顏色*/

li a

/*選擇所有父級是 元素的 元素*/

div>p

/*選擇所有緊接著元素之後的元素*/

div+p

/*i1後面所有的兄弟p標籤*/

#i1~p

/*用於選取帶有指定屬性的元素。*/

p[title]

/*用於選取帶有指定屬性和值的元素。*/

p[title="213"]

/*找到所有title屬性以hello開頭的元素*/

[title^="hello"]

/*找到所有title屬性以hello結尾的元素*/

[title$="hello"]

/*找到所有title屬性中包含(字串包含)hello的元素*/

[title*="hello"]

/*找到所有title屬性(有多個值或值以空格分割)中有乙個值為hello的元素:*/

[title~="hello"]

當多個元素的樣式相同的時候,我們沒有必要重複地為每個元素都設定樣式,我們可以通過在多個選擇器之間使用逗號分隔的分組選擇器來統一設定元素樣式。

例如:

div, p 

上面的**為div標籤和p標籤統一設定字型為紅色。

通常,我們會分兩行來寫,更清晰:

div,

p

多種選擇器可以混合起來使用,比如:.c1類內部所有p標籤設定字型顏色為紅色。

.c1 p
/* 未訪問的鏈結 */

a:link

/* 已訪問的鏈結 */

a:visited

/* 滑鼠移動到鏈結上 */

a:hover

/* 選定的鏈結 */

a:active

/*input輸入框獲取焦點時樣式*/

input:focus

first-letter

常用的給首字母設定特殊樣式:

p:first-letter

before

/*在每個元素之前插入內容*/

p:before

after

/*在每個元素之後插入內容*/

p:after

before和after多用於清除浮動。

web前端 基礎部分(二) CSS

一 css概述 css cascading style sheet 層疊樣式表 作用 定義了網頁的行為,簡單的說就是將網頁的內容和顯示樣式分離,從而提高顯示的多樣性和顯示的功能。就好比html定義的是網頁的骨架,css就是為網頁穿上外衣 特點 樣式定義靈活多樣且豐富多彩,可以設定任意的字型及大小。等...

基礎部分 CSS

通過依據元素在其位置的上下文關係來定義樣式,你可以使標記更加簡潔。在 css1 中,通過這種方式來應用規則的選擇器被稱為上下文選擇器 contextual selectors 這是由於它們依賴於上下文關係來應用或者避免某項規則。在 css2 中,它們稱為派生選擇器,但是無論你如何稱呼它們,它們的作用...

前端基礎介紹

1.注釋標籤 ctrl 2.標題標籤 h開頭 到6級 醒目的,引人注意.用在比較醒目的地方.一共有6級.複製當前行的快捷鍵 先ctrl c 再 ctrl v 級別越大,顯示出來越小.h1表示最大,h6表示最小.新增屬性 居中 align center 預設情況下是居左.align left 也有居右...