第四節:樣式介紹、背景樣式
文章目錄
-
- 第四節:樣式介紹、背景樣式
-
- 1、CSS 簡介
- 2、建立CSS
- 3、常用的樣式
- 4、CSS:backgrounds 背景
-
- 4.1、背景顔色
- 4.2、背景圖像
- 4.3、平鋪背景圖檔
- 4.4、設定背景圖位置
- 4.5、固定背景圖像
- 4.6、設定背景圖像大小
- 4.7、背景圖像的定位區域
- 4.8、背景圖像的繪畫區域
- 4.9、背景樣式複合寫法
- 4.10、多張背景圖樣式
1、CSS 簡介
CSS (Cascading Style Sheets,層疊樣式表),是一種用來為結構化文檔(如 HTML 文檔或 XML 應用)添加樣式(字型、間距和顔色等)的計算機語言,CSS 檔案擴充名為 .css。通過使用 CSS 我們可以大大提升網頁開發的工作效率!在我們的 CSS 教程中,您會學到如何使用 CSS 同時控制多重網頁的樣式和布局,CSS3 現在已被大部分現代浏覽器支援。
什麼是CSS:
- CSS 指層疊樣式表 (Cascading Style Sheets)
- 樣式定義如何顯示 HTML 元素
- 樣式通常存儲在樣式表中
- 把樣式添加到 HTML 4.0 中,是為了解決内容與表現分離的問題
- 外部樣式表可以極大提高工作效率
- 外部樣式表通常存儲在 CSS 檔案中
- 多個樣式定義可層疊為一個
CSS 文法:
CSS 規則由兩個主要的部分構成:選擇器,以及一條或多條聲明:
h1{border:1px solid red;}
選擇器是指向需要改變樣式的HTML元素,每條聲明由屬性和一個屬性值組成,屬性時你希望設定的樣式屬性,每個屬性值有一個值,屬性和是被冒号分開。CSS聲明總是以分号 ; 結束,聲明總以大括号 {} 括起來:
例如:
p{color:red;border:1px solid red;}
CSS 注釋:
注釋是用來解釋你的代碼,并且可以随意編輯它,浏覽器會忽略它。CSS注釋以 結束.
例如:
/*p标簽樣式*/ p{ text-align:center; /*設定字型顔色*/ color:black; font-family:arial; }
2、建立CSS
當浏覽器讀到一個樣式表時,浏覽器會根據它來格式化 HTML 文檔。
插入樣式
- 外部樣式表
- 内部樣式表
- 内聯樣式表(行内樣式)
外部樣式
當樣式需要應用于很多頁面時,外部樣式表将是理想的選擇。在使用外部樣式表的情況下,你可以通過改變一個檔案來改變整個站點的外觀。每個頁面使用 标簽連結到樣式表。 标簽在(文檔的)頭部:
chapter.html <head> <link rel="stylesheet" type="text/css" href="style.css" target="_blank" rel="external nofollow" > </head> style.css *{margin:0;padding:0;} html,body{width:100vw;height:100vh;} .wrap{background-color:pink;}
内部樣式表
當單個文檔需要特殊的樣式時,就應該使用内部樣式表。你可以使用
3、常用的樣式
一般常用的樣式主要有:背景樣式文本樣式
background
、字型樣式
text
、連結樣式
fonts
、清單樣式
link
、表格樣式
ul ol
盒子模型
table、
、邊框樣式
box
、輪廓
border
、外邊距
outline
、内邊距
margin
、分組嵌套、尺寸
padding
、顯示
dimension
、定位
display
、内容溢出
position
、浮動
overflow
、對齊、僞類、僞元素、導航欄、下拉菜單、提示工具、圖檔輪廓、圖檔透明度、圖像拼合技術、媒體類型、屬性選擇器、表單、電腦、網頁布局、!important 。
float
4、CSS:backgrounds 背景
CSS 背景屬性用于定義HTML元素背景效果。
屬性 | 描述 |
---|---|
background | 簡寫屬性,作用是将背景屬性設定在一個聲明中。 |
background-attachment | 背景圖像是否固定或者随着頁面的其餘部分滾動。 |
background-color | 設定元素的背景顔色。 |
background-image | 把圖像設定為背景。 |
background-position | 設定背景圖像的起始位置。 |
background-repeat | 設定背景圖像是否及如何重複。 |
background-size | 指定背景圖像大小 |
background-origin | 指定背景圖像的定位區域 |
background-clip | 指定背景圖像的繪制區域 |
4.1、背景顔色
屬性設定元素的背景顔色。
background-color
/* class 選擇器中wrap元素設定背景顔色 */ .wrap { width: 100vw; height: 100vh; background-color: red; /* CSS中,顔色值通常以以下方式定義: 十六進制 - 如:"#ff0000"(三元素組合) FF 00 00 紅 綠 藍 RGB - 如:"rgb(255,0,0)" 顔色名稱 - 如:"red" */ } 設定背景顔色屬性值的四種設定方式: background-color: red; background-color: rgb(255,0,0); background-color: #ff0000; background-color: rgba(255,0,0,0.1);
4.2、背景圖像
屬性設定元素背景圖檔
background-image
/* class 選擇器中wrap元素設定背景圖檔 */ .wrap { width: 100vw; height: 100vh; /* 設定背景圖像 */ background-image: url('./img/16.jpg'); } /* background-image 屬性值: url('圖檔的路勁【相對路勁或絕對路勁】') */
4.3、平鋪背景圖檔
屬性設定元素背景圖平鋪方向
background-repeat
/* class 選擇器中wrap元素設定背景圖檔平鋪方向 */ .wrap { width: 100vw; height: 100vh; /* 設定背景圖像 */ background-image: url('./img/16.jpg'); /* 設定背景圖像平鋪 */ background-repeat: no-repeat; } /* background-repeat 屬性值 repeat-x; 向 x 軸方向平鋪 repeat-y; 向 y 軸方向平鋪 no-repeat; 設定位置不平鋪 */
4.4、設定背景圖位置
屬性設定背景圖像在元素中位置
background-position
/* class 選擇器中wrap元素設定背景圖檔在元素中的位置 */ .wrap { width: 100vw; height: 100vh; /* 設定背景圖像 */ background-image: url('./img/16.jpg'); /* 設定背景圖像平鋪 */ background-repeat: no-repeat; /* 設定背景圖像的位置 */ background-position: 50px 10px; } /* background-position 屬性值 center、top、left、right、bottom 5個方向中兩個組合 如:background-position: top center;/ background-position: bottom center;等 像素:當屬性值有一個值時 表示距離左邊有 ${x} 像素 如:background-position: 100px; 像素:當屬性值有兩個值時 表示據左邊有 ${x} 像素 右邊 ${x} 像素 如:background-position: 100px 50px; 距離左邊 100px 距離頂部 50px */
4.5、固定背景圖像
設定背景圖像是否固定或者随着頁面的其餘部分滾動。
background-attachment
/* 固定背景圖像 */ .wrap { width: 100vw; height: 100vh; /* 設定背景圖像 */ background-image: url('./img/16.jpg'); /* 設定背景圖像平鋪 */ background-repeat: no-repeat; /* 設定背景圖像的位置 */ background-position: 50px 10px; /* 設定背景圖像定位 */ background-attachment: fixed; } /* background-attachment 屬性值 scroll 背景圖檔随着頁面的滾動而滾動,這是預設的。 fixed 背景圖檔不會随着頁面的滾動而滾動。 local 背景圖檔會随着元素内容的滾動而滾動。 initial 設定該屬性的預設值。 閱讀關于 initial 内容 inherit 指定 background-attachment 的設定應該從父元素繼承。 */
4.6、設定背景圖像大小
設定元素圖像大小
background-size
/* 設定背景圖像大小 */ .wrap { width: 100vw; height: 100vh; /* 設定背景圖像 */ background-image: url('./img/16.jpg'); /* 設定背景圖像平鋪 */ background-repeat: no-repeat; /* 設定背景圖像大小 */ background-size: 100% 100%; /* 設定背景圖像的位置 */ background-position: 50px 10px; /* 設定背景圖像定位 */ background-attachment: fixed; } /* background-size: 屬性值 length 設定背景圖檔高度和寬度。第一個值設定寬度,第二個值設定的高度。如果隻給出一個值,第二個是設定為 auto(自動) percentage 将計算相對于背景定位區域的百分比。第一個值設定寬度,第二個值設定的高度。如果隻給出一個值,第二個是設定為"auto(自動)" cover 此時會保持圖像的縱橫比并将圖像縮放成将完全覆寫背景定位區域的最小大小。 contain 此時會保持圖像的縱橫比并将圖像縮放成将适合背景定位區域的最大大小。 */
4.7、背景圖像的定位區域
屬性指定background-position屬性應該是相對位置。
background-Origin
/* 指定背景圖像定位區域 */ .wrap { width: 100vw; height: 100vh; /* 設定背景圖像 */ background-image: url('./img/16.jpg'); /* 設定背景圖像平鋪 */ background-repeat: no-repeat; /* 設定背景圖像的位置 */ background-position: 50px 10px; /* 設定背景圖像定位 */ background-attachment: fixed; /* 設定背景圖像大小 */ background-size: 100% 100%; /* 指定背景圖像定位區域 */ background-origin: padding-box; } /* background-origin 屬性值 padding-box 背景圖像填充框的相對位置 border-box 背景圖像邊界框的相對位置 content-box 背景圖像的相對位置的内容框 */
4.8、背景圖像的繪畫區域
屬性指定背景繪制區域。
background-clip
/* 指定背景繪制區域 */ .wrap { width: 100vw; height: 100vh; /* 設定背景圖像 */ background-image: url('./img/16.jpg'); /* 設定背景圖像平鋪 */ background-repeat: no-repeat; /* 設定背景圖像的位置 */ background-position: 50px 10px; /* 設定背景圖像定位 */ background-attachment: fixed; /* 設定背景圖像大小 */ background-size: 100% 100%; /* 指定背景圖像定位區域 */ background-origin: padding-box; /* 指定背景繪制區域 */ background-clip: border-box; } /* background-clip 屬性值 border-box 預設值。背景繪制在邊框方框内(剪切成邊框方框)。 padding-box 背景繪制在襯距方框内(剪切成襯距方框)。 content-box 背景繪制在内容方框内(剪切成内容方框)。 */
4.9、背景樣式複合寫法
背景樣式簡寫
background
/* bankground 背景樣式簡寫 */ .wrap { background: url('./img/16.jpg') no-repeat fixed center; } /* background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit; background 屬性值 background-color 指定要使用的背景顔色 background-image 指定要使用的一個或多個背景圖像 background-position 指定背景圖像的位置 background-size 指定背景圖檔的大小 background-repeat 指定如何重複背景圖像 background-origin 指定背景圖像的定位區域 background-clip 指定背景圖像的繪畫區域 background-attachment 設定背景圖像是否固定或者随着頁面的其餘部分滾動。 background-image 指定要使用的一個或多個背景圖像 */
4.10、多張背景圖樣式
屬性設定多張圖紙樣式。
background
/* bankground 背景樣式簡寫 */ .wrap { background:url('./img/16.jpg') no-repeat 100px/100px 100px,url('./img/01.jpg') no-repeat; } /* background 屬性值 複合屬性值1,複合屬性值2 */
總結:
顔色:
英文單詞
rgb:red(紅色) green(綠色) blue(藍色)
取值範圍:rgb(0,0,0)->rgb(255,255,255)
rgba:red(紅色) green(綠色) blue(藍色) opacity 透明度
a的取值範圍0~1
0是完全透明 1就是不透明
十六進制:#000000~#ffffff
#aabbcc 簡寫 #abc
img 作為資料 背景時時更新的
背景圖檔 這一個是樣式 保證不變的情況下 才是用
background-color 背景顔色
background-image:url('圖檔位址'); 背景圖檔
background-repeat 背景圖檔平鋪
repeat 預設值 平鋪
no-repeat 不平鋪
background-repeat-x:no-repeat; 在x軸上不平鋪,在y軸上平鋪
background-repeat-y:no-repeat; 在y軸上不平鋪,在x軸上平鋪
background-repeat:repeat-x; 在x軸上平鋪
background-repeat:repeat-y; 在y軸上平鋪
background-size 背景圖檔的大小
一個值 預設是 背景圖檔的寬度 另一邊會同等比例去變化
兩個值 背景圖檔寬度 背景圖檔高度
cover 圖檔等比例縮放 直到剛好覆寫背景區域
contain 圖檔等比例縮放 隻要有一邊觸碰到邊框就停止
background-position 背景位置
一個值 是左右位置 在上下居中
center 背景圖檔居中
兩個值 第一個值 左邊距離
第二個值 上邊距離
背景位置百分數 是背景大小的百分數位置和背景圖檔百分數位置重合
background-origin 背景圖檔基點
圖檔從什麼位置開始排列
預設情況下:
1)背景平鋪 基點在邊框線外邊緣開始
2)背景不平鋪 基點在邊框線内邊緣開始
content-box (内容盒子)
1)背景不平鋪 基點在内容邊緣開始 就是盒子實際寬高部分
padding-box (内邊距盒子)
2)背景不平鋪 基點在内邊距開始 預設情況下
border-box(邊框盒子)
3)背景不平鋪 基點在邊框線外邊緣開始
background-clip 背景圖檔裁剪
哪一個盒子區域顯示部分背景圖檔
1) content-box 内容盒子區域
2) padding-box 内邊距盒子區域
3) border-box 邊框盒子區域
background-attachment
背景圖檔關聯
fixed 固定背景圖檔
overflow 溢出
hidden 隐藏
scroll 滾動條
auto 自适應 内容超出出現滾動條 内容不超出就沒有
背景樣式複合寫法
background:color url() repeat position/size attachment;
一般分樣式 超過三個就用複合樣式寫