css基礎(chǔ)1

一、css用途和使用方法

????1.主要為網(wǎng)頁(yè)添加樣式,可理解為讓網(wǎng)頁(yè)長(zhǎng)成怎么樣

? ? 2.三種使用方法:外部 CSS、內(nèi)部 CSS、行內(nèi) CSS

? ? ? ? (1)、外部 CSS

? ? ? ? ? ? --通過(guò)使用外部樣式表,您只需修改一個(gè)文件即可改變整個(gè)網(wǎng)站的外觀!

? ? ? ? ? ? --每張 HTML 頁(yè)面必須在 head 部分的 <link> 元素內(nèi)包含對(duì)外部樣式表文件的引用。

<!DOCTYPE html>
<html>
????<head>
????????<link rel="stylesheet" type="text/css" href="aa.css">
? ? </head>
<body>
????<h1>外部使用css</h1>

</body>

</html>

????????(2)、內(nèi)部 CSS

? ? ? ? ? ? --內(nèi)部樣式是在 head 部分的 <style> 元素中進(jìn)行定義。

<!DOCTYPE html>

<html>

? <head>

? ? <style>

? ? body {

? ? ? background-color: linen;

? ? }

? ? h1 {

? ? ? color: maroon;

? ? ? margin-left: 40px;

? ? }

? ? </style>

? </head>

<body>

? <h1>內(nèi)部樣式css</h1>

</body>

</html>

????????(3)、行內(nèi) CSS,也叫內(nèi)聯(lián)樣式? 在元素內(nèi)用style聲明

<!DOCTYPE html>

<html>

<body>

? <h1 style="color:blue;text-align:center;">這是行內(nèi)樣式</h1>

</body>

</html>

二、CSS 語(yǔ)法


? ? 步驟1、選擇器指向您需要設(shè)置樣式的 HTML 元素。這里指向的是h1元素

? ? 步驟2、聲明塊包含一條或多條用分號(hào)分隔的聲明。

? ? 步驟3、每條聲明都包含一個(gè) CSS 屬性名和值,以冒號(hào)分隔。

????步驟4、多條 CSS 聲明用分號(hào)分隔,聲明塊用花括號(hào)括起來(lái)。

三、CSS 選擇器

? ?1、 用途:用于選取要設(shè)置樣式的 HTML 元素。


四、CSS 選擇器分類

? ? 1、CSS 選擇器分為五類:

? ??????簡(jiǎn)單選擇器(根據(jù)名稱、id、類來(lái)選取元素)

????????組合器選擇器(根據(jù)它們之間的特定關(guān)系來(lái)選取元素)

????????偽類選擇器(根據(jù)特定狀態(tài)選取元素)

????????偽元素選擇器(選取元素的一部分并設(shè)置其樣式)

????????屬性選擇器(根據(jù)屬性或?qū)傩灾祦?lái)選取元素)

五、簡(jiǎn)單選擇器

? ? 1、id選擇器 ----? # 號(hào)? ? ? ? 特點(diǎn):唯一

? ??#aa { text-align:center;color:red;}? ??


? ? 2、class類選擇器? ?------? . 號(hào)

? ? ?.aa { text-align:center;color:red;}? ??


? ? 3、元素選擇器? ?------- 每一個(gè)特定元素,比對(duì)所有p元素設(shè)置字體顏色為紅色

? ? p{color:red}

? ? 4、通用選擇器? ?-------?通用選擇器(*)選擇頁(yè)面上的所有的 HTML 元素。

? ? ? ?*{text-align:center;color:red;}

? ? 5、分組選擇器? ? -----? ?用 ,隔開(kāi)

? ? p,div{color:red}? ?

? ? .aa,p{color:red}


六、顏色

1、背景顏色: background-color

2、字體顏色:color

3、CSS 顏色值:rgb(255, 99, 71) 或者 #ccc 或者 rgba(0,0,0,0.4)或者顏色名(red、blue等)

顏色取值參考網(wǎng)址:https://www.sioe.cn/yingyong/yanse-rgb-16

七、寬度(width)和高度(height)

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 1.CSS 認(rèn)識(shí) 層疊樣式表 Cascading Style Sheets 是用來(lái)規(guī)定HTML文檔的呈現(xiàn)形式,簡(jiǎn)單...
    陳皮的柚子怪閱讀 535評(píng)論 0 2
  • css:層疊樣式表,有叫級(jí)聯(lián)樣式表。css分為內(nèi)聯(lián)方式,內(nèi)部樣式,外部樣式。內(nèi)聯(lián)方式:只需要將分號(hào)隔開(kāi)的一個(gè)或者多...
    An隨心閱讀 332評(píng)論 0 0
  • 1.知識(shí)點(diǎn) CSS初識(shí)CSS(Cascading Style Sheets)CSS通常稱為CSS樣式表或?qū)盈B樣式(...
    睡到自然醒_52閱讀 407評(píng)論 0 1
  • 1.概念 CSS 指層疊樣式表 (Cascading Style Sheets) 樣式定義如何顯示 HTML 元素...
    zii4914閱讀 197評(píng)論 0 0
  • 結(jié)構(gòu) 兩種方法使用 RGB 值 如果值為若干單詞,則要給值加引號(hào) 選擇器的分組:用逗號(hào)分開(kāi) 繼承及其問(wèn)題 子元素從...
    從此以后dapeng閱讀 650評(píng)論 0 0

友情鏈接更多精彩內(nèi)容