摘要:運行結果選擇器實例選擇器這個標題居中這個段落居中。如果需要更多的信息,請關注我,我會持續更新。
一、CSS簡介 1.什么是css
css指層疊樣式表(ascading Style Sheets)
樣式定義如何顯示HTML樣式
樣式通常儲存在樣式表中
外部樣式表可以極大的提高工作效率
實際就是學習選擇器和css屬性
2.CSS語法選擇器{屬性:屬性值;屬性:屬性值;}
div{color:blue;font-size:20px;}
運行結果: 實例2:</>復制代碼
實例 - body {background-color:red;}
- h1 {font-size:40pt;}
- h2 {color:blue;}
- p {margin-left:50px;}
這個標題設置的大小為 40 px
這個標題設置的顏色為藍色:blue
這個段落的左外邊距為 50 像素:50px
運行結果: 3.id和class選擇器</>復制代碼
實例2 - body {background-color:tan;}
- h1 {color:maroon;font-size:20pt;}
- hr {color:navy;}
- p {font-size:11pt;margin-left:15px;}
- a:link {color:green;}
- a:visited {color:yellow;}
- a:hover {color:black;}
- a:active {color:blue;}
?
?
這是標題
你可以看到這個段落是被設定的 CSS 渲染的。
如果你需要在HTML里設置CSS樣式,你需要在元素中設置"id" 和 "class"選擇器。
id選擇器實例:</>復制代碼
選擇器
- #para{
- text-align:center;
- color:red;
- }
Hello World!
這個段落不受該樣式的影響。
運行結果:
class選擇器實例:
運行結果: 二、CSS基礎 1.文本</>復制代碼
選擇器
- .center
- {
- text-align:center;
- }
這個標題居中
這個段落居中。
color:#fff; ???????修飾字體顏色
text-align:left/center/right/justify ??設置文本對齊
text-indent:2em; ???設置文本縮進
2.字體font-family:Microsoft YaHei; ????改變字體樣式
font-size:14px; ???????修改文字大小
font-weight:blod; ? ????字體加粗
3.鏈接a:link - 正常,未訪問過的鏈接
a:visited - 用戶已訪問過的鏈接
a:hover - 當用戶鼠標放在鏈接上時
a:active - 鏈接被點擊的那一刻
4.列表樣式(ul)無序列表 - 列表項標記用特殊圖形(如小黑點、小方框等)
有序列表 - 列表項的標記有數字或字母
使用css,可以列出進一步的樣式,并可用圖形做列表項標記
實例</>復制代碼
列表樣式
- ul.a {list-style-type:circle;}
- ul.b {list-style-type:square;}
- ol.c {list-style-type:upper-roman;}
- ol.d {list-style-type:lower-alpha;}
無序列表實例:
Coffee
Tea
Coca Cola
Coffee
Tea
Coca Cola
有序列表實例:
Coffee
Tea
Coca Cola
Coffee
Tea
Coca Cola
運行結果:
總結
本教程已向你講解了如何創建樣式表來同時控制多重頁面的樣式和布局。
你已經學會了如何使用CSS來添加背景、文字樣式、以及鏈接樣式,并定義列表樣式。
如果需要更多CSS的信息,請關注我,我會持續更新。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/52631.html
稍微整理了一下自己平時看到的前端學習資源,分享給大家。 html MDN:Mozilla開發者網絡 SEO:前端開發中的SEO css 張鑫旭:張鑫旭的博客 css精靈圖:css精靈圖實踐 柵格系統:詳解CSS中的柵格系統 媒體查詢:css媒體查詢用法 rem布局:手機端頁面自適應布局 移動前端開發之viewport的深入理解:深入理解viewport 淘寶前端布局:手機淘寶移動端布局 fl...
摘要:另外需要指定這個參數,表示在配置的數值以下的圖片才進行編碼,超過的不進行處理。代碼如下所以過程就是引入了,然后進行打包處理,生成和。目前這個入門學習手記到這里就結束了。完相關文章入門學習手記一入門學習手記二入門學習手記三入門學習手記四 showImg(https://segmentfault.com/img/remote/1460000019860769?w=1150&h=599); ...
摘要:我們可以根據模塊類型擴展名來自動綁定需要的。當需要加載的文件匹配的正則時,就會調用后面的對文件進行處理,這正是強大的原因。這篇就這樣吧,感覺進度有點慢從入門到放棄四從入門到放棄一從入門到放棄三源代碼 Foreword 上一篇簡單介紹了webpack的打包功能,應該說是比較無意義的打包,對于開發人員來說,這種效率是非常低的。所以我們來點升華。 First Step 我們給第一篇例子中加個...
摘要:我們可以根據模塊類型擴展名來自動綁定需要的。當需要加載的文件匹配的正則時,就會調用后面的對文件進行處理,這正是強大的原因。這篇就這樣吧,感覺進度有點慢從入門到放棄四從入門到放棄一從入門到放棄三源代碼 Foreword 上一篇簡單介紹了webpack的打包功能,應該說是比較無意義的打包,對于開發人員來說,這種效率是非常低的。所以我們來點升華。 First Step 我們給第一篇例子中加個...
摘要:入門教程六分之三篇沒辦法,我直播教小伙伴入門,屬性講完,準備說定位的時候,他們就喊停,不住了。。。選擇器表達式如下相關效果見表達式關鍵詞特性屬性屬性即樣式定制的具體樣式,比如定制寬高,分別為與等。 CSS 入門教程六分之三篇 沒辦法,我直播教小伙伴CSS入門,屬性講完,準備說定位的時候,他們就喊停,hold不住了。。。所以先寫到六分之三,23333333 要點 解釋 引用 如...
摘要:特意對前端學習資源做一個匯總,方便自己學習查閱參考,和好友們共同進步。 特意對前端學習資源做一個匯總,方便自己學習查閱參考,和好友們共同進步。 本以為自己收藏的站點多,可以很快搞定,沒想到一入匯總深似海。還有很多不足&遺漏的地方,歡迎補充。有錯誤的地方,還請斧正... 托管: welcome to git,歡迎交流,感謝star 有好友反應和斧正,會及時更新,平時業務工作時也會不定期更...
閱讀 2046·2021-11-08 13:22
閱讀 2507·2021-09-04 16:40
閱讀 1151·2021-09-03 10:29
閱讀 1716·2019-08-30 15:44
閱讀 2125·2019-08-30 11:13
閱讀 2792·2019-08-29 17:07
閱讀 1968·2019-08-29 14:22
閱讀 1250·2019-08-26 14:00
极致性价比!云服务器续费无忧!
Tesla A100/A800、Tesla V100S等多种GPU云主机特惠2折起,不限台数,续费同价。
NVIDIA RTX 40系,高性价比推理显卡,满足AI应用场景需要。
乌兰察布+上海青浦,满足东推西训AI场景需要