HTML.CSS學習筆記01

更新 發佈閱讀 3 分鐘

01-選擇器寫法

vocus|新世代的創作平台

1.可以下.main .img .hot span
控制到a 下面的兩個span
也可以省略成下 .hot span 只要整個html不容易相撞到相同的class就可以

2.也可以下.hot .title 就單純控制span class="title"的後面這一行


02-為什麼css開頭要打CSS的@charset "UTF-8"

符集:utf-8,unicode(每個符號都用16bits存儲),gbk,gb2312(這2個好像特別為了支持中文,似乎有一個支持繁體)。一般包含中文字符的時候用gb2312,用到一些特殊字符,例如西歐字符的時候應該用utf-8,以防出現亂碼。

不過utf-8某些時候不好控制,控制的不好容易出現亂碼,例如在將數據寫入數據庫時,用utf-8是比較容易出現亂碼情況的。

GB2312是簡體中文編碼,當文章/網頁中包含繁體中文、日文、韓文時,這些內容可能無法被正確編碼。
UTF-8是UTF-8編碼是一種目前廣泛應用於網頁的編碼,它其實是一種Unicode編碼,即致力於把全球所有語言納入一個統一的編碼。

來源:https://zhidao.baidu.com/question/497317864249821804


03-Chrome好好用

案Ctrl+shift+i就會跑出開發人員工具,可以檢視網頁的基本架構跟使用的css
又發現原來點右上角的 style.css:123 標示這個css寫入在哪一行
點下去會直接看到整個css的檔案


vocus|新世代的創作平台


vocus|新世代的創作平台


04.套css 限定有A才有B發動的時候

vocus|新世代的創作平台

在寫css的時候,可以寫成
.nav-item.activ { background-color:red; color:#FFF }
意思是HOME直接作用顯示格子紅色,字體白色

通常會在直接寫一個 .active{ background-color:red; color:#FFF }
在html裡面直接放在後面也可以發動這個效果

TINA大大表示,這種用法是因為工程師不喜歡你加太多class,盡量設定一次到位的方法。

對比一下
.global -nav .nav-item 這是表示選global-nav的下一層.nav-item
..global -nav .nav-item 這是表示選global-nav和.nav-item同一層,必且兩個都在的時候,.nav-item才會有其作用

留言
avatar-img
You 的沙龍
0會員
6內容數
You 的沙龍的其他內容
2021/05/26
01-新冠肺炎牙起來了啊~~~ 天啊   新冠肺炎突然在台灣牙起來了 我以為台灣一手好牌可以順利撐到疫苗出事...... 結果變成這樣,以後回過頭來看一定是特別的經驗 每天出門我都要帶著酒精跟戴著口罩,然後出門,走到哪裡馬上洗手 回家立刻脫下衣服洗澡,在洗衣服 希望大家都可以好好地度過跟撐下去
Thumbnail
2021/05/26
01-新冠肺炎牙起來了啊~~~ 天啊   新冠肺炎突然在台灣牙起來了 我以為台灣一手好牌可以順利撐到疫苗出事...... 結果變成這樣,以後回過頭來看一定是特別的經驗 每天出門我都要帶著酒精跟戴著口罩,然後出門,走到哪裡馬上洗手 回家立刻脫下衣服洗澡,在洗衣服 希望大家都可以好好地度過跟撐下去
Thumbnail
2021/05/06
01-我會成為無聊的大人嗎 今天好忙 忙到忘記緊張明天新工作第一天 抬頭看黑黑的天空 夜晚略涼的空氣,彷彿瞬間把我拉到十二年前女宿舍陽台,有一天我們半夜走了出來,在蚊子很多,明明是夏天卻涼爽過度到有點冷,然後吃起了泰國酸辣蝦泡麵⋯⋯ 講一堆又屁又沒意義的東西 你總是穿著很大件的四角褲跟大T 眼鏡跟眼
2021/05/06
01-我會成為無聊的大人嗎 今天好忙 忙到忘記緊張明天新工作第一天 抬頭看黑黑的天空 夜晚略涼的空氣,彷彿瞬間把我拉到十二年前女宿舍陽台,有一天我們半夜走了出來,在蚊子很多,明明是夏天卻涼爽過度到有點冷,然後吃起了泰國酸辣蝦泡麵⋯⋯ 講一堆又屁又沒意義的東西 你總是穿著很大件的四角褲跟大T 眼鏡跟眼
2021/04/14
圖片源自網路 走回原來的美編設計了 我活不下去了,沒辦法在家裡邊混邊練習css 這長達超過半年以上的待業, 讓我債台高築,欠了全家大小應該有十萬了 至於錢怎麼堆疊的呢? 大概就是爸媽的保費,出去玩吃東西的費用, 我不小心手滑買了太多東西.............. 從香港過去之前就欠著了 找了其
Thumbnail
2021/04/14
圖片源自網路 走回原來的美編設計了 我活不下去了,沒辦法在家裡邊混邊練習css 這長達超過半年以上的待業, 讓我債台高築,欠了全家大小應該有十萬了 至於錢怎麼堆疊的呢? 大概就是爸媽的保費,出去玩吃東西的費用, 我不小心手滑買了太多東西.............. 從香港過去之前就欠著了 找了其
Thumbnail
看更多
你可能也想看
Thumbnail
這節課的學習目標是了解 CSS 的基本語法結構和使用方法。
Thumbnail
這節課的學習目標是了解 CSS 的基本語法結構和使用方法。
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
《轉轉生》(Re:INCARNATION)為奈及利亞編舞家庫德斯.奧尼奎庫與 Q 舞團創作的當代舞蹈作品,結合拉各斯街頭節奏、Afrobeat/Afrobeats、以及約魯巴宇宙觀的非線性時間,建構出關於輪迴的「誕生—死亡—重生」儀式結構。本文將從約魯巴哲學概念出發,解析其去殖民的身體政治。
Thumbnail
《轉轉生》(Re:INCARNATION)為奈及利亞編舞家庫德斯.奧尼奎庫與 Q 舞團創作的當代舞蹈作品,結合拉各斯街頭節奏、Afrobeat/Afrobeats、以及約魯巴宇宙觀的非線性時間,建構出關於輪迴的「誕生—死亡—重生」儀式結構。本文將從約魯巴哲學概念出發,解析其去殖民的身體政治。
Thumbnail
在HTML程式語言中,有一種能讓HTML元素與其他程式語言(CSS、JavaScript)運作的更加順利的語法,它叫做「HTML屬性(HTML Attribute)」。 那HTML屬性是怎麼運作的呢?
Thumbnail
在HTML程式語言中,有一種能讓HTML元素與其他程式語言(CSS、JavaScript)運作的更加順利的語法,它叫做「HTML屬性(HTML Attribute)」。 那HTML屬性是怎麼運作的呢?
Thumbnail
您對前端有興趣,對CSS不陌生。CSS新特性前應瞭解基本內容。CSS屬性制定經歷過程,瀏覽器私有前綴及處理,開發者對新特性漸進增強,優雅降級處理,Web標準定義、作用等。
Thumbnail
您對前端有興趣,對CSS不陌生。CSS新特性前應瞭解基本內容。CSS屬性制定經歷過程,瀏覽器私有前綴及處理,開發者對新特性漸進增強,優雅降級處理,Web標準定義、作用等。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
與HTML不同,CSS是專門修改網頁內容「樣式」的程式語言,也就是說你沒有辦法透過CSS去新增網頁的文字或是圖片等相關的內容,但你可以透過HTML新增網頁內容後,再使用CSS去修改他的樣式,例如⋯⋯
Thumbnail
與HTML不同,CSS是專門修改網頁內容「樣式」的程式語言,也就是說你沒有辦法透過CSS去新增網頁的文字或是圖片等相關的內容,但你可以透過HTML新增網頁內容後,再使用CSS去修改他的樣式,例如⋯⋯
Thumbnail
本篇習作內容,除了練習六角預習影音內的常用語法章節外,也額外整理了其它常用於文本的 HTML 元素,希望能透過這樣的整理,在未來設計結構更複雜的網站介面內容時,能扎穩根基。
Thumbnail
本篇習作內容,除了練習六角預習影音內的常用語法章節外,也額外整理了其它常用於文本的 HTML 元素,希望能透過這樣的整理,在未來設計結構更複雜的網站介面內容時,能扎穩根基。
Thumbnail
一個網頁只會有一個h1 標籤(h1.p.img)裡面可以放多個屬性(src.background.color) 建立 HTML 環境 告訴大家這是html5的語法 關於整個專案的資訊放這裡面 頁籤標題 寫給別人看的要放這裡面 Emmet 預設安裝 /*語意使用英文*/ /*使
Thumbnail
一個網頁只會有一個h1 標籤(h1.p.img)裡面可以放多個屬性(src.background.color) 建立 HTML 環境 告訴大家這是html5的語法 關於整個專案的資訊放這裡面 頁籤標題 寫給別人看的要放這裡面 Emmet 預設安裝 /*語意使用英文*/ /*使
Thumbnail
CSS 是控制網頁外觀的語言,應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
Thumbnail
CSS 是控制網頁外觀的語言,應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
Thumbnail
此版本的目標畫面成果是: *金色名字。 *金色社交按鈕圖示,點擊按鈕另開對應的網頁或著顯示comming soon。 *名字和按鈕在網頁中央,如果網頁寬度不夠會換行,夠就不換行。
Thumbnail
此版本的目標畫面成果是: *金色名字。 *金色社交按鈕圖示,點擊按鈕另開對應的網頁或著顯示comming soon。 *名字和按鈕在網頁中央,如果網頁寬度不夠會換行,夠就不換行。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News