資訊專欄INFORMATION COLUMN
摘要：的聲明內聯樣式在元素內部在標簽上使用屬性進行聲明。此聲明只作用于當前標簽。擁有最高優先級。注意，在使用相對定位時，無論是否進行移動，元素仍然占據原來的空間。因此，移動元素會導致它覆蓋其它框。元素的位置相對于瀏覽器窗口是固定位置。
CSS 指層疊樣式表（Cascading Style Sheets）， 是一種標記語言，屬于瀏覽器解釋型語言，可以直接由瀏覽器執行，不需要編譯。
HTML只負責網頁的內容，標簽盡量只負責語意不負責樣式。CSS 主要負責網頁的樣式，給網頁進行布局，解決了內容與表現分離的問題。
CSS 可以重復使用，避免代碼冗余。但依賴于HTML。
?
在 html 標簽上使用 style 屬性進行聲明。此聲明只作用于當前 html 標簽。
擁有最高優先級。
<p style="color: blue;size: 34px">這是個內聯樣式p>
在 head 標簽中使用 style 標簽聲明。此聲明一般聲明當前網頁的公共樣式或者給某個標簽的多帶帶樣式。
在 head 標簽中使用 link 標簽引入外部聲明好的 css 文件。解決了不同網頁間樣式重復使用的問題。
<link rel="stylesheet" type="text/css" href="css/style.css" />
注意：內聯樣式的優先級最高。而內部樣式表和外部樣式表，若給同一標簽定義樣式，則誰后聲明就執行誰。
<style type="text/css">
p {
color:yellow;
size: 30px;
}
style>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<style type="text/css">
p {
color:yellow;
size: 30px;
}
style>
?
標簽名{ 樣式名 : 樣式值 ; ...}
會給當前網頁內所有該標簽增加相同的樣式。
<head> <style type="text/css"> /*標簽選擇器*/ p { color: yellow; size:40px; } style> head> <body> <p>這是個黃色p> body>
#標簽的id屬性值{ 樣式名 : 樣式值 ; ...}
給某個指定的標簽添加樣式。id 屬性不要以數字開頭，一個 id 值最好只賦值一次。
<head> <style type="text/css"> /*id選擇器*/ #red { color: red; size:40px; } style> head> <body> <p id="red">這是個紅色p> body>
.類選擇器名{ 樣式名 : 樣式值 ; ...}
給不同的標簽添加相同的樣式。類名的第一個字符不能使用數字。
<head> <style type="text/css"> /*類選擇器*/ .ppp { color: red; size:40px; } style> head> <body> <p class="ppp">這是個紅色p> <p class="ppp">這是個紅色p> body>
* { 樣式名 : 樣式值 ; ...}
選擇所有的 html 標簽添加相同的樣式。
/*全部選擇*/ *{ margin: 40px; color: orange; }
選擇器1,選擇器2,...{ 樣式名 : 樣式值 ; ...}
給不同選擇器添加相同樣式。
<head> <style type="text/css"> /*組合選擇器*/ .ppp,#qqq { color:purple; } style> head> <body> <p class="ppp">這是個紫色p> <p id="qqq">這是個紫色p> body>
選擇器1 子標簽選擇器 ...{ 樣式名 : 樣式值 ; ...}
<head> <style type="text/css"> /*子標簽選擇器*/ .ggg a { color:green; } #bbb a { color: #000; } style> head> <body> <p class="ggg"><a href="#">這是綠色a>p> <p id="bbb"><a href="#">這是黑色a>p> body>
標簽名【屬性名=屬性值】{ 樣式名 : 樣式值 ; ...}
給具備某屬性的標簽添加樣式。
注意：
使用*選擇器給整個頁面添加基礎樣式
使用類選擇器給不同標簽添加基礎樣式
使用標簽選擇器給某類標簽添加基礎樣式
使用id選擇器、屬性選擇器、內聯樣式給某個具體的標簽添加個性化樣式
?
邊框設置
border:5px solid red;
字體設置
font-size:10px; 設置字體大小
font-family:"黑體"; 設置字體
font-weight:bold; 設置字體加粗
字體顏色設置
color:顏色;
背景顏色設置
background-color：顏色;
背景圖片設置
background-img:url(路徑)
background-repeate:no-repeate; 設置圖片不重復
background-size:cover; 設置圖片平鋪
高和寬的設置
width:
height:
浮動設置
float:left|right
行間距設置
line-height
?
塊級標簽，主要用來進行網頁布局，會將其中的子元素內容作為一個獨立的整體存在。
默認寬度是頁面的寬地，但是可以設置。沒有默認高度，但是可以撐開。
如果子元素設置了百分比的高或者寬，占據的是div的百分比，不是整個頁面的。
CSS盒模型本質上是一個盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充（內邊距），和實際內容。
外邊距：margin
用來設置元素與元素之間的距離，上下左右均可多帶帶設置。
margin:0px auto; 上下外邊距為0，左右居中
邊框：border
用來設置元素邊框的大小、形式和顏色。上下左右均可多帶帶設置。
內邊距：padding
設置內容和邊框之間的距離，上下左右均可多帶帶設置。
內容：
設置寬度和高度即可改變內容區域的大小。
?
position:relative
相對元素原有位置移動指定的距離，可以使用top、left、right、bottom來進行上下左右的偏移。
相對的是自己原本的位置，不改變其他元素位置。
注意，在使用相對定位時，無論是否進行移動，元素仍然占據原來的空間。因此，移動元素會導致它覆蓋其它框。
position:absolute
可以使元素根據參照元素或已定位的父元素來進行移動。
絕對定位的元素的位置相對于最近的已定位父元素，如果元素沒有已定位的父元素，那么它的位置相對于
絕對定位的元素會覆蓋在其他框。
position:fixed
將元素固定在頁面的某個位置，不會隨著滾動條的移動而改變位置。
元素的位置相對于瀏覽器窗口是固定位置。
元素的定位與文檔流無關，所以它們可以覆蓋頁面上的其它元素
z-index屬性指定了一個元素的堆疊順序（哪個元素應該放在前面，或后面）
具有更高堆疊順序的元素總是在較低的堆疊順序元素的前面。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1019.html
摘要：我的郵箱地址歡迎大家交流學習糾錯此篇博客是我的復習筆記，和學的時間太久了，忘得差不多了，最近要使用一下，所以重新打開的書略讀，后記錄了標簽，元素，屬性的具體意義。有些標記有屬性，具體格式，以標記為例，其中為標記的屬性。我的郵箱地址:zytrenren@163.com歡迎大家交流學習糾錯！ 此篇博客是我的復習筆記，html和css學的時間太久了，忘得差不多了，最近要使用一下，所以重新打開htm...
摘要：具體來說，包管理器就是可以通過命令行，幫助你把外部庫和插件放到你的項目里面并在之后進行版本升級，這樣就不用手工復制和更新庫。現在有的包管理器主要是和。 一、基礎 1、學習HTML基礎 HTML給你的網頁賦予了結構。它就像是人的骨架那樣讓你保持站立。首先你需要去學習語法以及它必須提供的一切。你的學習應該聚焦在下面這些東西上： 學習HTML基礎，了解如何編寫語義HTML 理解如何把網頁分...
摘要：內聯元素在水平方向上相互挨著，總體上會從左上方流向右下方。，增加元素，設置屬性，兩個內聯元素并排擺放，但只有左右方向有。還能與其它內聯元素并排。 寫在前面：作為一個剛開始寫技術博客的新手，看到有人收藏了文章，寫作動力又猛增了。這應該就是寫技術博客的好處之一：能給自己增加成就感和驅動力。最近關于css布局和定位相關內容整理地有點慢，因為同時在做freecodecamp上的題，所以節奏有點...
閱讀 3676·2021-11-23 09:51
閱讀 1671·2021-10-22 09:53
閱讀 1355·2021-10-09 09:56
閱讀 860·2019-08-30 13:47
閱讀 2160·2019-08-30 12:55
閱讀 1605·2019-08-30 12:46
閱讀 1114·2019-08-30 10:51
閱讀 2415·2019-08-29 12:43
