CSS樣式表
時(shí)間：2023-09-19 08:42:01 | 來源：網(wǎng)站運(yùn)營
時(shí)間：2023-09-19 08:42:01 來源：網(wǎng)站運(yùn)營
CSS樣式表：前端學(xué)習(xí)筆記教程不定期更新中，傳送門：
- 前端HTML第一天：什么是網(wǎng)頁？什么是HTML？網(wǎng)頁怎么形成？
- HTML標(biāo)簽大全
- 前端學(xué)習(xí)：表格學(xué)習(xí)，附練習(xí)+源碼
- 前端學(xué)習(xí)之列表，附送全套源碼
- CSS入門最全筆記
上一期的CSS入門筆記沒有更新完，最后一下知識點(diǎn)在本篇內(nèi)容。
一、CSS樣式表
按照CSS樣式書寫的位置（或者引入的方式）CSS樣式可以分成三類
1.1 行內(nèi)樣式表（行內(nèi)式）
行內(nèi)樣式表（內(nèi)聯(lián)樣式表）是在元素標(biāo)簽內(nèi)部的 style 屬性中設(shè)定 CSS 樣式。適合于修改簡單樣式.
語法：
<div style="color: red; font-size: 12px;">青春不常在，抓緊談戀愛</div> 1.style 其實(shí)就是標(biāo)簽的屬性
在雙引號中間，寫法要符合 CSS 規(guī)范
2.可以控制當(dāng)前的標(biāo)簽設(shè)置樣式
3.由于書寫繁瑣，并且沒有體現(xiàn)出結(jié)構(gòu)與樣式相分離的思想，所以不推薦大量使用，只有對當(dāng)前元素添加簡單樣式的時(shí)候，可以考慮使用
4.使用行內(nèi)樣式表設(shè)定 CSS，通常也被稱為行內(nèi)式引入
1.2 內(nèi)部樣式表（嵌入式）
內(nèi)部樣式表（內(nèi)嵌樣式表）是寫到html頁面內(nèi)部. 是將所有的 CSS 代碼抽取出來，單獨(dú)放到一個(gè) <style> 標(biāo)簽中
語法：
<style> div { color: red; font-size: 12px; } </style> 1.<style> 標(biāo)簽理論上可以放在 HTML 文檔的任何地方，但一般會放在文檔的<head>標(biāo)簽中
2.通過此種方式，可以方便控制當(dāng)前整個(gè)頁面中的元素樣式設(shè)置
3.代碼結(jié)構(gòu)清晰，但是并沒有實(shí)現(xiàn)結(jié)構(gòu)與樣式完全分離
4.使用內(nèi)部樣式表設(shè)定 CSS，通常也被稱為嵌入式引入，這種方式是我們練習(xí)時(shí)常用的方式
1.3 外部樣式表（鏈接式）
實(shí)際開發(fā)都是外部樣式表. 適合于樣式比較多的情況. 核心是:樣式單獨(dú)寫到CSS 文件中，之后把CSS文件引入到 HTML 頁面中使用.
引入外部樣式表分為兩步：
1. 新建一個(gè)后綴名為 .css 的樣式文件，把所有 CSS 代碼都放入此文件中。
2. 在 HTML 頁面中，使用<link> 標(biāo)簽引入這個(gè)文件。
語法：
<link rel="stylesheet" href="css文件路徑">二、Chrome調(diào)試工具
1.Ctrl+滾輪 可以放大開發(fā)者工具代碼大小。
2.左邊是 HTML 元素結(jié)構(gòu)，右邊是 CSS 樣式。
3.右邊 CSS 樣式可以改動數(shù)值（左右箭頭或者直接輸入）和查看顏色。
4.Ctrl + 0 復(fù)原瀏覽器大小。
5.如果點(diǎn)擊元素，發(fā)現(xiàn)右側(cè)沒有樣式引入，極有可能是類名或者樣式引入錯(cuò)誤。
6.如果有樣式，但是樣式前面有黃色嘆號提示，則是樣式屬性書寫錯(cuò)誤。
本期結(jié)束了，本文內(nèi)容均來自黑馬程序員講義，如果有雷同是知識點(diǎn)相同。搬運(yùn)麻煩標(biāo)明出處，感謝支持原創(chuàng)內(nèi)容。
在線咨詢
