第四天打卡~~~~


是空元素。
它的作用是折行。它能使圖片和下面的段落文本分離成兩行。這樣網頁結構更加清晰,看起來更加美觀。

CSS是誰?它做什麼工作?
**與HTML 一樣,CSS 也不是真正的編程語言,甚至連標記語言都不是。
CSS是層疊樣式列表。**單純採用HTML製作的網頁就像毛坯房一樣,不美觀;而使用CSS能使網頁變得更加美觀。CSS不止有美觀的作用,它還能與HTML分離開來,保存爲獨立的文件。CSS的“鬧獨立”可使代碼保持一致性,也使編程人員能更好的控制代碼量。
學習CSS注意兩個重點:一是選擇器。二是樣式。
CSS的選擇器就像化妝盒。它告訴瀏覽器選擇哪個標籤美化。
CSS的樣式就像化妝盒中的眼影、腮紅、口紅等。它告訴瀏覽器要把網頁美化成什麼樣子。
以上元素是CSS的規則集。它由以下幾個部分構成:

選擇器:HTML 元素的名稱位於規則集開始(本例是標籤選擇器 )。HTML 元素可選擇一個或多個樣式添加。給不同元素添加樣式只需更改選擇器即可。
聲明:表示一個單獨的規則。由屬性和屬性值組成。
屬性:表示改變 HTML 元素樣式的途徑。本例中color就是改變

元素字體顏色的途徑。
屬性的值:它從指定屬性的衆多外觀中選擇了一個值。本例中,red就是color的值。顏色種類成千上萬,除了red外,color的值還可以有yellow, pink, black等等。
除了選擇器的部分,每個規則集都應該包含在一對的大括號裏:{ }。
在每個聲明裏要用冒號將屬性與屬性值分隔開。
在每個規則集裏要用分號將多個聲明分隔開:

p{  
   color:red; 
   width:500px; 
   border:1px solid black;
}

也可以用CSS選擇多個元素,將其同時修改成一種樣式,不同的選擇器用逗號分開:

p,li,h1{
 color:red;
}

更改背景顏色

html {
  background-color: #00539F;
}

以下代碼可以更改中元素的格式

body {
  width: 600px;
  margin: 0 auto;
  background-color: #FF9500;
  padding: 0 20px 20px 20px;
  border: 5px solid black;
}

以上每個屬性的含義是:
width: 600px; —— body元素的寬度保持 600 像素。
margin: 0 auto; —— 爲 margin 或 padding 等屬性設置兩個值,第一個值代表元素的上、下方向(本例設置爲 0);第二個值代表左、右兩邊(本例中的auto是特殊值,含義是水平方向左右對稱)。
background-color: #FF9500; —— 它指定元素的背景顏色。
padding: 0 20px 20px 20px; —— 內邊距設置的四個值。用於給網頁內容的四周製造一些空白空間。這些空間爲右邊、下方,左邊的內邊距,像素爲20。它們的值按照上、右、下、左的順序排列。
border: 5px solid black; —— 直接爲 body 設置 5 像素的黑色實線邊框。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章