收藏
批改狀態(tài)：未批改
老師批語：
（1）css為Cascading style sheets的縮寫
（2）在樣式方面，css可以影響一個(gè)或一組“文檔”的表現(xiàn)樣式
（3）在文檔方面，包括但不限于html
（1）頁面中顯示的內(nèi)容稱為元素，元素顯示在瀏覽器為它生成的元素框中
（2）查看頁面中所有元素生成的元素框，可用*{outline:1px dashed(solid) red}進(jìn)行查看
（3）元素可分為兩大類：
| 序號(hào) | 術(shù)語 | 描述 |
|---|---|---|
| 1 | 置換元素 | 內(nèi)容由外部提供。例：<img> |
| 2 | 非置換元素 | 內(nèi)容由用戶提供，用瀏覽器生成<p> |
元素類型分為三種：
（1）塊級(jí)元素：獨(dú)占一行，而且兩邊沒有其他元素。例：<div>
（2）行內(nèi)元素：在一行中占一塊地方，兩邊可有其他元素存在。例：<a>
（3）內(nèi)行快元素：在一行中占一塊地方，兩邊可有其他元素存在，可支持寬高。例：<img>
（1）每個(gè)元素都可以通過style="display:type"來控制它的顯示類型
（2）display屬性常用值：
| 序號(hào) | 屬性值 | 描述 |
|---|---|---|
| 1 | inline（默認(rèn)） | 行內(nèi)元素 |
| 2 | block | 塊級(jí)元素 |
| 3 | inline-block | 行內(nèi)塊級(jí)元素 |
| 4 | list-item | 塊級(jí)：列表元素 |
| 5 | table | 塊級(jí)：表格元素 |
| 6 | flex | 彈性元素 |
| 7 | grid | 網(wǎng)格元素 |
例：
<p style="display: block;">hello world</p> <p style="display: inline-block;">hello world</p> <p style="display:inline">hello world</p>
| 序號(hào) | 屬性 | 格式 | 備注 |
|---|---|---|---|
| 1 | link(標(biāo)簽) | <link rel="stylesheet" href=".."> | 外部樣式 |
| 2 | @import（指令） | @import url(..)/@import '..' | 外部樣式 |
| 3 | <style>(元素) | <style>..</style> | 內(nèi)部樣式 |
| 4 | style=".."(屬性) | <div style=".."> | 行內(nèi)樣式 |
例：
（1）<link rel="stylesheet" href="zuo.css" />
（2）@import "zuo.css";
（3）<head><style></style></head>
（4）<div style=".."></div>
css文檔中必不可少的內(nèi)容就是：樣式規(guī)則
css語法：selectoe{property:value;..}
（1）selector：選擇符，或者成為“選擇器”，決定文檔中哪部分受到影響
（2）{pporperty:value;..}:聲明快，由“屬性”和“屬性值”兩部分組成
（1）廠商前綴: 各瀏覽器廠商用來測(cè)試專屬規(guī)則的,具有實(shí)驗(yàn)性和先進(jìn)性
（2）得到用戶廣泛認(rèn)可的廠商前綴規(guī)則, 是有可能進(jìn)入 W3C 標(biāo)準(zhǔn)的
（3）隨著瀏覽器之間的差異逐漸消失, 廠商前綴最終會(huì)走向消亡
常用廠商前綴（共5種）:
| 序號(hào) | 前綴 | 描述 |
|---|---|---|
| 1 | -moz- | 基于Mozilla的瀏覽器,如FireFox(火狐) |
| 2 | -ms- | 基于微軟Internet Explorer的瀏覽器 |
| 3 | -o- | 基于Opera(歐朋)的瀏覽器 |
| 4 | -webkit- | 基于WebKit內(nèi)核的瀏覽器,如Chrome,Safari |
| 5 | -epub- | 基于國際數(shù)字出版論壇制定的格式 |
（1）與 html 文檔類似, css 也支持使用空白符來格式化文檔,增強(qiáng)可讀性
（2）css 中的多個(gè)空白符, 會(huì)全部合并成一個(gè)空白符顯示
（3）空白符,可以由空格, 制表符, 換行符生成
（4）當(dāng)屬性值可有多個(gè)關(guān)鍵字時(shí), 必須使用空白符分開
（1）單行/多行: /* 注釋內(nèi)容 */
（2）注釋可以寫到樣式規(guī)則外部,也可以寫到內(nèi)部
（3）注釋不允許嵌套
——設(shè)置瀏覽器使用指定的樣式表的媒體
| 序號(hào) | 場景 | 描述 |
|---|---|---|
| 1 | <link> | <link media="screen,print"> |
| 2 | <style> | <style media="screen.print"> |
| 3 | @import | @import url(..) screen,print{..} |
| 4 | @media | @media screen,print |
——媒體類型是不同媒體的標(biāo)識(shí)符
| 序號(hào) | 類型 | 描述 |
|---|---|---|
| 1 | all | 所有媒體類型（不限制） |
| 2 | print | 打印機(jī)，預(yù)打印預(yù)覽使用 |
| 3 | screen | 屏幕 |
| 4 | projection | 幻燈片 |
@media screen,print（1）媒體類型通常會(huì)添加”媒體描述符”進(jìn)行精準(zhǔn)限制,例如設(shè)置媒體尺寸,分辨率等
（2）媒體描述符的語法與 css 樣式聲明非常類似,如min-width: 500px
（3）與 css 聲明的不同之處在于,媒體描述符允許沒有值,如print and (color)
（4）多個(gè) “媒體描述符” 之間使用 “邏輯關(guān)鍵字” 連接, 如 and 和 not
（5）and表示多個(gè)”媒體描述符”必須同時(shí)滿足, not則是整個(gè)查詢?nèi)》?且必須寫在and前面
常用 “媒體描述符”(顯示區(qū)域相關(guān))：
| 序號(hào) | 媒體描述符 | 描述 |
|---|---|---|
| 1 | width | 顯示區(qū)域?qū)挾?/td> |
| 2 | min-width | 顯示區(qū)域最小寬度 |
| 3 | max-width | 顯示區(qū)域最大寬度 |
| 4 | device-width | 設(shè)備顯示區(qū)域?qū)挾?/td> |
| 5 | min-device-width | 設(shè)備顯示區(qū)域最小寬度 |
| 6 | max-device-width | 設(shè)備顯示區(qū)域最大寬度 |
| 7 | height | 顯示區(qū)域高度 |
| 8 | min-height | 顯示區(qū)域最小高度 |
| 9 | max-height | 顯示區(qū)域最大高度 |
| 10 | device-height | 設(shè)備顯示區(qū)域高度 |
| 11 | min-device-height | 設(shè)備顯示區(qū)域最小高度 |
| 12 | max-device-height | 設(shè)備顯示區(qū)域最大高度 |
max-width與max-device-width的區(qū)別：（1）max-width:瀏覽器顯示區(qū)域?qū)挾?，與設(shè)備無關(guān)，常用于pc端
（2）max-device-width:分辨率的最大寬度，常用于移動(dòng)端
例：
<style>@media screen and (max-width:450px){ /*當(dāng)屏幕寬度小于450px,不顯示菜單*/ul{display:none;}}</style> <body> <div> <div>php中文網(wǎng)</div> <ul> <li> <a href="">首頁</a> <a href="">視頻</a> <a href="">問答</a> <a href="">下載</a> </li> </ul> </div> </body>
（1）css是一個(gè)層疊樣式表
（2）css中元素分為兩類：置換元素和非置換元素
（3）css中的元素類型分為“塊級(jí)元素”，“行內(nèi)元素”和“行內(nèi)塊元素”三種
（4）css中可以用屬性display來改變類型
（5）css應(yīng)用到html有四種方式：link標(biāo)簽|@import指令|<style>元素|style=".."屬性
（6）css的注釋用/* */表示
（8）多種媒體類型之間用逗號(hào)隔開
微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號(hào)
技術(shù)交流群
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號(hào)