整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          17.CSS概念和語法

          17.CSS概念和語法

          SS(層疊樣式表)是一種用于描述HTML或XML(包括各種XML方言,如SVG或XHTML)文檔的視覺表現的樣式語言。CSS描述了元素應該如何在屏幕、紙張、語音或其他媒體上顯示。本文將深入探討CSS的核心概念和語法,為初學者和有經驗的開發者提供一個參考。

          選擇器

          選擇器是CSS中的基礎概念,它們用于指定我們想要樣式化的HTML元素。

          元素選擇器

          p {
            color: black;
          }
          

          類選擇器

          .error {
            color: red;
          }
          

          ID選擇器

          #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;
          

          CSS布局

          Flexbox

          .container {
            display: flex;
            justify-content: space-between;
          }
          

          Grid

          .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的能力也在不斷增強,為前端開發帶來了更多的可能性。

          、初識CSS3

          本章目標:

          • 會使用行內樣式、內部樣式表和外部樣式表三種方式為HTML5文檔添加CSS樣式
          • 會使用CSS3的基本選擇器設置字體大小和顏色
          • 會使用復合選擇器為特定的網頁元素添加CSS樣式
          • 會使用CSS3高級選擇器為網頁元素添加CSS樣式

          1.1、什么是CSS

          Cascading Style Sheet 級聯樣式表。 表現HTML或XHTML文件樣式的計算機語言。 包括對字體、顏色、邊距、高度、寬度、背景圖片、網頁定位等設定

          在這里插入圖片描述

          說明:

          • 首先介紹什么是CSS
          • 然后對比講解使用CSS和沒有使用CSS的兩個相同的HTML代碼頁面顯示效果,說明CSS的重要性
          • 最后根據圖說明CSS在網頁中的應用

          1.2、CSS的發展史

          在這里插入圖片描述


          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的優勢


          • 內容與表現分離
          • 網頁的表現統一,容易修改
          • 豐富的樣式,使得頁面布局更加靈活
          • 減少網頁的代碼量,增加網頁的瀏覽速度,節省網絡帶寬
          • 運用獨立于頁面的CSS,有利于網頁被搜索引擎收錄

          1.3、CSS的基本語法

          • 首先講解CSS的基本語法結構,由選擇器和聲明構成
          • 然后對照具體的樣式詳細講解語法,強調聲明必須在 { }
          • 最后說明基本W3C的規范,每條聲明后的 ; 都要寫上

          在這里插入圖片描述

          Style標簽

          • 講解CSS樣式如何在HTML中應用,引入style標簽的應用
          • 講解style標簽,說明type=“text/css的用法
          • 說明style標簽在HTML文檔中的位置,在與之間

          在這里插入圖片描述

          1.4、引入CSS方式

          • 行內樣式 使用style屬性引入CSS樣式 <h1 style="color:red;">style屬性的應用</h1> <p style="font-size:14px; color:green;">直接在HTML標簽中設置的樣式</p> 使用style屬性設置CSS樣式僅對當前的HTML標簽起作為,并且是寫在HTML標簽中的 這種方式不能起到內容與表現相分離,本質上沒有體現出CSS的優勢,因此不推薦使用。
          • 內部樣式表 CSS代碼寫在 <head><style> 標簽中 <style> h1{color: green; } </style> 優點:方便在同頁面中修改樣式 缺點:不利于在多頁面間共享復用代碼及維護,對內容與樣式的分離也不夠徹底 引出外部樣式表
          • 外部樣式表 CSS代碼保存在擴展名為.css的樣式表中 HTML文件引用擴展名為.css的樣式表,有兩種方式
          • 鏈接式(使用的最多,記住這個就可以了) 使用 標簽鏈接外部樣式表,并講解各參數的含義, 標簽必須放在 標簽中

          在這里插入圖片描述


          • 導入式 使用@import導入外部樣式表

          在這里插入圖片描述



          鏈接式與導入式的區別

          1. 標簽是屬于XHTML范疇的,@import是屬于CSS2.1中特有的。
          2. 使用 鏈接的CSS是客戶端瀏覽網頁時先將外部CSS文件加載到網頁當中,然后再進行編譯顯示,所以這種情況下顯示出來的網頁與用戶預期的效果一樣,即使網速再慢也一樣的效果。
          3. 使用@import導入的CSS文件,客戶端在瀏覽網頁時是先將HTML結構呈現出來,再把外部CSS文件加載到網頁當中,當然最終的效果也與使用 鏈接文件效果一樣,只是當網速較慢時會先顯示沒有CSS統一布局的HTML網頁,這樣就會給用戶很不好的感覺。這個也是現在目前大多少網站采用鏈接外部樣式表的主要原因。
          4. 由于@import是屬于CSS2.1中特有的,因此對于不兼容CSS2.1的瀏覽器來說就是無效的。

          CSS樣式優先級

          行內樣式>內部樣式表>外部樣式表
          就近原則:越接近標簽的樣式優先級越高
          
          

          【學員練習】 使用標題標簽和段落標簽制作李白的詩《望廬山瀑布》,詩正文字體顏色為綠色,字體大小為14p

          在這里插入圖片描述

          1.5、CSS基本選擇器

          • 標簽選擇器 HTML標簽作為標簽選擇器的名稱 <h1>…<h6>、<p>、<img/>

          在這里插入圖片描述

          • 類選擇器 一些特殊的實現效果,單純使用標簽選擇器不能實現,從而引出類選擇器

          在這里插入圖片描述

          • ID選擇器 ID選擇器的名稱就是HTML中標簽的ID名稱,ID全局唯一

          在這里插入圖片描述


          小結

          • 標簽選擇器直接應用于HTML標簽
          • 類選擇器可在頁面中多次使用
          • ID選擇器在同一個頁面中只能使用一次

          基本選擇器的優先級

          ID選擇器>類選擇器>標簽選擇
          
          

          標簽選擇器是否也遵循“就近原則”? 不遵循,無論是哪種方式引入CSS樣式,一般都遵循ID選擇器 > class類選擇器 > 標簽選擇器的優先級

          1.6、CSS高級選擇器

          1、層次選擇器

          在這里插入圖片描述

          • 后代選擇器 body p{ background: red; }

          在這里插入圖片描述

          后代選擇器兩個選擇符之間必須要以空格隔開,中間不能有任何其他的符號插入

          • 子選擇器 body>p{ background: pink; }

          在這里插入圖片描述


          • 相鄰兄弟選擇器 .active+p { background: green; }

          在這里插入圖片描述


          • 通用兄弟選擇器 .active~p{ background: yellow; }

          添加圖片注釋,不超過 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語言都是非常重要的。


          主站蜘蛛池模板: 国产激情一区二区三区 | 国产精品 一区 在线| 日本一区免费电影| 亚洲中文字幕在线无码一区二区| 亚洲一区二区视频在线观看| 成人免费视频一区| 蜜桃传媒一区二区亚洲AV| 久久久久久人妻一区二区三区 | 欧洲精品一区二区三区| 亚洲日韩AV一区二区三区四区| 亚洲综合一区二区三区四区五区| 人妻激情偷乱视频一区二区三区| 精品无码一区在线观看| 中文字幕日韩一区二区三区不卡| 久久精品无码一区二区无码| 亚洲熟女综合一区二区三区| 爆乳无码AV一区二区三区| 成人国产精品一区二区网站| 波多野结衣高清一区二区三区 | 久久精品人妻一区二区三区| 国产成人精品一区二区三区免费| 久久精品免费一区二区| 日本在线视频一区| 无码人妻久久一区二区三区免费 | 亚洲av无码一区二区三区天堂 | 在线观看一区二区精品视频| 亚洲成av人片一区二区三区| 久久精品岛国av一区二区无码| 精品国产精品久久一区免费式 | 国产成人一区二区三区视频免费| 国产在线不卡一区二区三区| 精品人无码一区二区三区| 午夜福利无码一区二区 | 人妻少妇久久中文字幕一区二区| 色婷婷av一区二区三区仙踪林| 久久无码精品一区二区三区| 无码中文字幕乱码一区| 国产品无码一区二区三区在线蜜桃| 精品国产伦一区二区三区在线观看 | 国精产品一区一区三区有限在线 | 中文无码AV一区二区三区 |