第四節：樣式介紹、背景樣式

文章目錄

- 第四節：樣式介紹、背景樣式
- - 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 、浮動 float 、對齊、僞類、僞元素、導航欄、下拉菜單、提示工具、圖檔輪廓、圖檔透明度、圖像拼合技術、媒體類型、屬性選擇器、表單、電腦、網頁布局、！important 。

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-Origin

屬性指定background-position屬性應該是相對位置。

/* 指定背景圖像定位區域 */
.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;
	一般分樣式 超過三個就用複合樣式寫

第四節：樣式介紹、背景樣式

第四節：樣式介紹、背景樣式

文章目錄

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、多張背景圖樣式

繼續閱讀

門戶通專訪草根站長九天狼：做站貴在堅持

如何成為一名.net 工程師?

[轉]如何成長為一名全棧工程師全棧工程師

tabpanel 使用問題

為什麼把CSS放頭部，script放下面

underscore模闆功能的使用和學習

CSS之折疊菜單

web開發之前後端渲染

DOM下元素 offset client scroll 相關屬性簡介

IE8 CSS設定DIV居中，添加“margin:0 auto”

403 Forbidden，You don't have permission to access / on this server.Forbidden

JavaScript的那些坑之事件代理事件代理事件階段

ACS基本配置-權限等級管理

vue （vue2.0）使用總結(從大體結構總結)

父子元件間傳值的實作父子元件間傳值的實作

vue搭建過程及出現問題