整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
SS（層疊樣式表）是一種用于描述HTML或XML（包括各種XML方言，如SVG或XHTML）文檔的視覺表現的樣式語言。CSS描述了元素應該如何在屏幕、紙張、語音或其他媒體上顯示。本文將深入探討CSS的核心概念和語法，為初學者和有經驗的開發者提供一個參考。
選擇器是CSS中的基礎概念，它們用于指定我們想要樣式化的HTML元素。
p {
color: black;
}
.error {
color: red;
}
#unique-element {
color: blue;
}
input[type="text"] {
background-color: #f0f0f0;
}
a:hover {
text-decoration: underline;
}
組合器描述了不同選擇器之間的關系。
article p {
line-height: 1.6;
}
ul > li {
list-style-type: square;
}
h2 + p {
margin-top: 0;
}
h2 ~ p {
color: #333;
}
偽元素用于樣式化元素的特定部分。
p::first-line {
font-weight: bold;
}
CSS屬性定義了如何對元素進行樣式化，而值則指定了屬性的外觀或行為。
width: 100px;
height: 50vh; /* 視口高度的50% */
background-color: #ff0000;
color: rgb(0, 255, 0);
border-color: rgba(0, 0, 255, 0.5);
font-family: 'Arial', sans-serif;
text-align: center;
text-decoration: underline;
margin: 10px 5px;
padding: 20px;
border-style: solid;
border-width: 1px;
border-color: #000;
.container {
display: flex;
justify-content: space-between;
}
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.absolute-element {
position: absolute;
top: 10px;
right: 10px;
}
使用媒體查詢可以創建響應不同屏幕尺寸的樣式。
@media (max-width: 600px) {
.container {
flex-direction: column;
}
}
CSS是一個強大的樣式語言，它使得開發者能夠創建精美、響應式的網頁。通過理解并掌握CSS的選擇器、屬性、布局等核心概念和語法，前端工程師可以有效地設計和實現用戶界面。隨著CSS3和后續版本的不斷發展，CSS的能力也在不斷增強，為前端開發帶來了更多的可能性。
本章目標：
Cascading Style Sheet 級聯樣式表。 表現HTML或XHTML文件樣式的計算機語言。 包括對字體、顏色、邊距、高度、寬度、背景圖片、網頁定位等設定
在這里插入圖片描述
說明：
在這里插入圖片描述
CSS1.0 讀者可以從其他地方去使用自己喜歡的設計樣式去繼承性地使用樣式；
CSS2.0 融入了DIV+CSS的概念，提出了HTML結構與CSS樣式表的分離
CSS2.1 融入了更多高級的用法，如浮動，定位等。
CSS3.0 它包括了CSS2.1下的所有功能，是目前最新的版本，它向著模塊化的趨勢發展，又加了很多使用的新技術，如字體、多背景、圓角、陰影、動畫等高級屬性，但是它需要高級瀏覽器的支持。
由于現在IE 6、IE 7使用比例已經很少，對市場企業進行調研發現使用CSS3的頻率大幅增加，學習CSS3已經成為一種趨勢，因此本書會講解最新的CSS3版本
本課程中主要講解css2.1和css3
CSS的優勢
在這里插入圖片描述
Style標簽
在這里插入圖片描述
在這里插入圖片描述
在這里插入圖片描述
鏈接式與導入式的區別
CSS樣式優先級
行內樣式>內部樣式表>外部樣式表
就近原則：越接近標簽的樣式優先級越高
【學員練習】 使用標題標簽和段落標簽制作李白的詩《望廬山瀑布》，詩正文字體顏色為綠色，字體大小為14p
在這里插入圖片描述
在這里插入圖片描述
在這里插入圖片描述
在這里插入圖片描述
小結
基本選擇器的優先級
ID選擇器>類選擇器>標簽選擇
標簽選擇器是否也遵循“就近原則”？ 不遵循，無論是哪種方式引入CSS樣式，一般都遵循ID選擇器 > class類選擇器 > 標簽選擇器的優先級
在這里插入圖片描述
在這里插入圖片描述
后代選擇器兩個選擇符之間必須要以空格隔開，中間不能有任何其他的符號插入
在這里插入圖片描述
在這里插入圖片描述
添加圖片注釋，不超過 140 字（可選）
TML語言，即超文本標記語言（HyperText Markup Language），是一種用于創建網頁的標準標記語言。它通過使用標記（tag）來描述網頁的結構和呈現方式，并且可以嵌入其他類型的內容，如圖像、音頻、視頻等。
HTML語言是構建萬維網的基石之一，它定義了網頁的結構和布局。使用HTML語言，我們可以創建標題、段落、列表、鏈接、表格等各種元素，來展示和組織網頁的內容。
在HTML中，標記以尖括號（< >）表示，一般成對出現，包圍著要標記的內容。例如，要創建一個標題，我們可以使用<h1>標簽將標題內容包裹起來，如下所示：
<h1>這是一個標題</h1>除了基本的結構標記外，HTML還提供了許多其他的標記來增強網頁的功能和樣式。比如，我們可以使用<a>標簽來創建鏈接，<img>標簽來插入圖像，<audio>和<video>標簽來嵌入音頻和視頻等。同時，HTML也支持CSS（層疊樣式表）來對網頁進行樣式化和布局。
使用HTML語言，我們可以輕松創建一個網頁，并將其發布到互聯網上。只需編寫HTML代碼，保存為一個以.html為后綴的文件，然后通過瀏覽器打開該文件，即可查看網頁的效果。
HTML語言的簡單易學使其成為許多人入門網頁開發的首選。無論是個人網站、企業官網還是電子商務平臺，HTML都是構建網頁的基礎。
總之，HTML語言是一種用于創建網頁的標準標記語言，通過標記來描述網頁的結構和呈現方式。它是構建萬維網的基石，簡單易學，適用于各種類型的網頁開發。無論你是初學者還是專業開發人員，掌握HTML語言都是非常重要的。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
