一、css

層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現HTML（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等文件樣式的計算機語言。CSS不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化。CSS 能夠對網頁中元素位置的排版進行像素級精確控制，支持幾乎所有的字體字號樣式，擁有對網頁對象和模型樣式編輯的能力。

二、css語法

CSS 規則由兩個主要的部分構成：選擇器，以及一條或多條聲明

（1）每條聲明由一個屬性和一個值組成。屬性（property）是您希望設置的樣式屬性（style attribute）。每個屬性有一個值。屬性和值被冒號分開。
（2）CSS聲明總是以分號 ; 結束，聲明總以大括號 {} 括起來

p {color:red; text-align:center;}

（1） p  （選擇器，表示給html中p標籤添加樣式）
（2） color:red;  （表示一條聲明）
（3） {;  ;  ;  ;}   （所有聲明）

（3）選擇器：
（3.1）id選擇器

<div id="para1">
#para1 {
    text-align:center;
    color:red;
	}

（3.2）class選擇器

<div class="para1">
.para1 {
    text-align:center;
    color:red;
	}

（3.3 派生選擇器）

<ul class="para1">
	<li></li>
	<li></li>
</ul>
ul li {
    text-align:center;
    color:red;
	}
表示ul下的li的樣式

（3.4）屬性選擇器

input[type="text"]
{
  width:150px;
  display:block;
  margin-bottom:10px;
  background-color:yellow;
  font-family: Verdana, Arial;
}

input[type="button"]
{
  width:120px;
  margin-left:35px;
  display:block;
  font-family: Verdana, Arial;
}

三、樣式表

（1）內部樣式表

<head>
	<style>
		p {color:red;}
		body {background:#ffffff}
	</style>
</head>

（2）引入外部樣式表
瀏覽器會從文件 *.css 中讀到樣式聲明，並根據它來格式文檔。外部樣式表可以在任何文本編輯器中進行編輯。文件不能包含任何的 html 標籤。樣式表應該以 .css 擴展名進行保存。

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

（3）內聯樣式

<p style="color:#ffffff">此段落字體是白色的</p>

（4）多重樣式

（4.1 ）樣式優先級：
（內聯樣式） > （內部樣式）>（外部樣式） > （瀏覽器默認樣式）

（4.2）選擇器優先級：
（內聯樣式）>（id選擇器）>（偉類）>（屬性選擇器）>（class選擇器）>（元素選擇器）>（通用選擇器 *）

四、基礎css對照表

4.1 css樣式目錄

----（1）設置背景樣式
----（2）設置文本樣式
----（3）設置字體樣式
----（4）設置超鏈接樣式
----（5）設置列表樣式
----（6）設置表格樣式

五、基礎css屬性

5.1 背景樣式

屬性名	屬性描述	屬性值
background-color	背景顏色	#ff0000、red、rgb(255,0,0)
background-image	背景圖片	url(‘bg.jpg’)
background-repeat	背景圖片重複平鋪	repeat-x（水平方向平鋪）、no-repeat（不平鋪） repeat-y（豎直方向平鋪）
background-position	圖片起始位置	left、right、top、center、bottom、百分數（50% 50%）水平和豎直兩個方向
background-attachment	背景圖像是否固定或者隨着頁面的其餘部分滾動	scroll（滾動，默認）、fixed（固定）、local（隨元素內容滾動）

body
{
background-image:url('bg.png');
background-repeat:no-repeat;
background-position:right top;
}

/*簡寫，需要按照順序*/
body {background:#ffffff url('img_tree.png') no-repeat right top;}

回到目錄

5.2 文本樣式

屬性名	屬性描述	屬性值
color	文本顏色	#ff0000、red、rgb(255,0,0)
direction	文本方向	ltr（左到右）、rtl（右到左）
letter-spacing	文本字與字的間距	具體長度
line-height	行高	具體高度、百分數（大多數瀏覽器的默認行高約爲110%至120%）
text-align	文本對齊方式	left、right、center、justify
text-decoration	修飾文本	underline（下劃線）、overline（上劃線）、line-through（穿過文本）
text-indent	設置文本縮進	具體數值、百分數
text-shadow	設置文本陰影	h-shadow（水平陰影位置）、v-shadow（垂直陰影位置）、blur（模糊距離）、color（顏色）
text-transform	文本大小寫	capitalize（每個單詞大寫字母開頭）、uppercase（僅有大寫字母）、lowercase（僅有小寫字母）

text-shadow: 2px 2px #ff0000;  設置陰影

回到目錄

5.3 字體樣式

屬性名	屬性描述	屬性值
font	在一個聲明中設置所有的字體屬性
font-family	指定文本的字體系列
font-size	指定文本的字體大小
font-style	指定文本的字體樣式	italic（斜體）、oblique（傾斜樣式）
font-variant	以小型大寫字體或者正常字體顯示文本
font-weight	指定字體的粗細。

font-family:"Times New Roman",Georgia,Serif;

/* <absolute-size>，絕對大小值 */
font-size: xx-small;
font-size: x-small;
font-size: small;
font-size: medium;
font-size: large;
font-size: x-large;
font-size: xx-large;
 
/* <relative-size>，相對大小值 */
font-size: larger;
font-size: smaller;
 
/* <length>，長度值 */
font-size: 12px;
font-size: 0.8em;
 
/* <percentage>，百分比值 */
font-size: 80%;
 
font-size: inherit;

回到目錄

5.4 鏈接樣式

a:link - 正常，未訪問過的鏈接
a:visited - 用戶已訪問過的鏈接
a:hover - 當用戶鼠標放在鏈接上時
a:active - 鏈接被點擊的那一刻

/*text-decoration 屬性主要用於刪除鏈接中的下劃線*/
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}

/*使用背景顏色修飾超鏈接*/
a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}

回到目錄

5.5 列表樣式

list-style-type:none;

/*無序列表*/
ul.a {list-style-type:circle;} /*無序，空心圓“○”*/
ul.b {list-style-type:disc;} /*無序，實心圓“●”*/
ul.c {list-style-type:square;}/*無序，實心正方形“■”*/

/*有序列表*/
ol.d {list-style-type:armenian;} /*有序，傳統的亞美尼亞數字*/
ol.e {list-style-type:cjk-ideographic;} /*有序，淺白的表意數字*/
ol.f {list-style-type:decimal;} /*有序，數字1、2、3*/
ol.g {list-style-type:decimal-leading-zero;} /*有序，數字01、02、03*/
ol.h {list-style-type:georgian;} /*有序，傳統的喬治數字*/
ol.i {list-style-type:hebrew;} /*有序，傳統的希伯萊數字*/
ol.j {list-style-type:hiragana;} /*有序，日文平假名字符*/
ol.k {list-style-type:hiragana-iroha;} /*有序，日文平假名序號*/
ol.l {list-style-type:katakana;} /*有序，日文片假名字符*/
ol.m {list-style-type:katakana-iroha;} /*有序，日文片假名序號*/
ol.n {list-style-type:lower-alpha;} /*有序，小寫英文字母a、b、c……*/
ol.o {list-style-type:lower-greek;} /*有序，基本的希臘小寫字母*/
ol.p {list-style-type:lower-latin;} /*有序，小寫拉丁字母*/
ol.q {list-style-type:lower-roman;} /*有序，小寫羅馬數字i、ii、iii……*/
ol.r {list-style-type:upper-alpha;} /*有序，大寫英文字母A、B、C……
*/
ol.s {list-style-type:upper-latin;} /*有序，大寫拉丁字母*/
ol.t {list-style-type:upper-roman;} /*有序，大寫羅馬數字I、II、III……*/

ol.u {list-style-type:none;}/*不使用項目符號*/
ol.v {list-style-type:inherit;} /*繼承*/

回到目錄

5.6 表格樣式

屬性名	屬性描述	屬性值
border	表格邊框屬性
border-collapse	設置是否將表格邊框摺疊爲單一邊框
text-align	文本水平對齊	left、right、center
vertical-align	文本豎直對齊	top、bottom、center


table
  {
  font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
  width:100%;
  border-collapse:collapse;
  }

td
  {
  font-size:1em;
  border:1px solid #98bf21;
  padding:3px 7px 2px 7px;
  }

 th 
  {
  font-size:1.1em;
  text-align:left;
  padding-top:5px;
  padding-bottom:4px;
  background-color:#A7C942;
  color:#ffffff;
  }

六、css常用單位

6.1 相對長度

相對長度單位指定了一個長度相對於另一個長度的屬性。對於不同的設備相對長度更適用。

6.2 絕對長度

絕對長度單位是一個固定的值，它反應一個真實的物理尺寸。絕對長度單位視輸出介質而定，不依賴於環境（顯示器、分辨率、操作系統等）。

特別鳴謝菜鳥教程所提供的內容支持

Mnioc

發佈了5 篇原創文章 · 獲贊 2 · 訪問量 162

私信關注

Python全棧開發學習--HTML--CSS樣式--Day2

一、css

二、css語法

三、樣式表

四、基礎css對照表

4.1 css樣式目錄

五、基礎css屬性

5.1 背景樣式

5.2 文本樣式

5.3 字體樣式

5.4 鏈接樣式

5.5 列表樣式

5.6 表格樣式

六、css常用單位

6.1 相對長度

6.2 絕對長度

Spring Cloud 部署時如何使用 Kubernetes 作爲註冊中心和配置中心

Python全棧開發學習--javascript--（HTML DOM、瀏覽器BOM）--Day11

Python全棧開發學習--HTML 5--標籤--Day8

Python全棧開發學習--HTML--CSS3（下）--Day7

Python全棧開發學習--javascript--進階--Day10

Python全棧開發學習--Reactjs--基礎語法（中）--Day13

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結