CSS 入門

MasonEast 發(fā)布于2019-08-02 10:54 / 423人閱讀

摘要：運(yùn)行結(jié)果選擇器實(shí)例選擇器這個(gè)標(biāo)題居中這個(gè)段落居中。如果需要更多的信息，請(qǐng)關(guān)注我，我會(huì)持續(xù)更新。

一、CSS簡(jiǎn)介 1.什么是css

css指層疊樣式表（ascading Style Sheets）

樣式定義如何顯示HTML樣式

樣式通常儲(chǔ)存在樣式表中

外部樣式表可以極大的提高工作效率

實(shí)際就是學(xué)習(xí)選擇器和css屬性

2.CSS語法

選擇器{屬性：屬性值;屬性：屬性值;}
div{color:blue;font-size:20px;}

實(shí)例1：





實(shí)例



這個(gè)標(biāo)題設(shè)置的大小為 40 px
這個(gè)標(biāo)題設(shè)置的顏色為藍(lán)色：blue
這個(gè)段落的左外邊距為 50 像素：50px

運(yùn)行結(jié)果：

實(shí)例2：





實(shí)例2


?

?
這是標(biāo)題

你可以看到這個(gè)段落是被設(shè)定的 CSS 渲染的。

這是一個(gè)鏈接

運(yùn)行結(jié)果：

3.id和class選擇器

如果你需要在HTML里設(shè)置CSS樣式，你需要在元素中設(shè)置"id" 和 "class"選擇器。

id選擇器實(shí)例：




 
選擇器 




Hello World!
這個(gè)段落不受該樣式的影響。

運(yùn)行結(jié)果： class選擇器實(shí)例：




 
選擇器 




這個(gè)標(biāo)題居中
這個(gè)段落居中。

運(yùn)行結(jié)果：

二、CSS基礎(chǔ) 1.文本

color:#fff; ???????修飾字體顏色

text-align:left/center/right/justify ??設(shè)置文本對(duì)齊

text-indent:2em; ???設(shè)置文本縮進(jìn)

2.字體

font-family:Microsoft YaHei; ????改變字體樣式

font-size:14px; ???????修改文字大小

font-weight:blod; ? ????字體加粗

3.鏈接

a:link - 正常，未訪問過的鏈接

a:visited - 用戶已訪問過的鏈接

a:hover - 當(dāng)用戶鼠標(biāo)放在鏈接上時(shí)

a:active - 鏈接被點(diǎn)擊的那一刻

4.列表樣式（ul）

無序列表 - 列表項(xiàng)標(biāo)記用特殊圖形（如小黑點(diǎn)、小方框等）

有序列表 - 列表項(xiàng)的標(biāo)記有數(shù)字或字母

使用css，可以列出進(jìn)一步的樣式，并可用圖形做列表項(xiàng)標(biāo)記

實(shí)例

列表樣式

無序列表實(shí)例:

Coffee
Tea
Coca Cola

Coffee
Tea
Coca Cola

有序列表實(shí)例:

Coffee
Tea
Coca Cola

Coffee
Tea
Coca Cola

運(yùn)行結(jié)果：

總結(jié)

本教程已向你講解了如何創(chuàng)建樣式表來同時(shí)控制多重頁面的樣式和布局。
你已經(jīng)學(xué)會(huì)了如何使用CSS來添加背景、文字樣式、以及鏈接樣式，并定義列表樣式。
如果需要更多CSS的信息，請(qǐng)關(guān)注我，我會(huì)持續(xù)更新。

云服務(wù)器 GPU云服務(wù)器 css入門 css快速入門 css入門到精通 css入門教程

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/52631.html

相關(guān)文章

前端學(xué)習(xí)資源整理

稍微整理了一下自己平時(shí)看到的前端學(xué)習(xí)資源，分享給大家。 html MDN：Mozilla開發(fā)者網(wǎng)絡(luò) SEO：前端開發(fā)中的SEO css 張?chǎng)涡瘢簭場(chǎng)涡竦牟┛?css精靈圖：css精靈圖實(shí)踐柵格系統(tǒng)：詳解CSS中的柵格系統(tǒng) 媒體查詢：css媒體查詢用法 rem布局：手機(jī)端頁面自適應(yīng)布局移動(dòng)前端開發(fā)之viewport的深入理解:深入理解viewport 淘寶前端布局：手機(jī)淘寶移動(dòng)端布局 fl...

siberiawolf 2019-08-21 11:27 評(píng)論0 收藏0
webpack入門學(xué)習(xí)手記（五）

摘要：另外需要指定這個(gè)參數(shù)，表示在配置的數(shù)值以下的圖片才進(jìn)行編碼，超過的不進(jìn)行處理。代碼如下所以過程就是引入了，然后進(jìn)行打包處理，生成和。目前這個(gè)入門學(xué)習(xí)手記到這里就結(jié)束了。完相關(guān)文章入門學(xué)習(xí)手記一入門學(xué)習(xí)手記二入門學(xué)習(xí)手記三入門學(xué)習(xí)手記四 showImg(https://segmentfault.com/img/remote/1460000019860769?w=1150&h=599); ...

AlphaWatch 2019-08-26 10:13 評(píng)論0 收藏0
webpack -> vue Component 從入門到放棄（二）

摘要：我們可以根據(jù)模塊類型擴(kuò)展名來自動(dòng)綁定需要的。當(dāng)需要加載的文件匹配的正則時(shí)，就會(huì)調(diào)用后面的對(duì)文件進(jìn)行處理，這正是強(qiáng)大的原因。這篇就這樣吧，感覺進(jìn)度有點(diǎn)慢從入門到放棄四從入門到放棄一從入門到放棄三源代碼 Foreword 上一篇簡(jiǎn)單介紹了webpack的打包功能，應(yīng)該說是比較無意義的打包，對(duì)于開發(fā)人員來說，這種效率是非常低的。所以我們來點(diǎn)升華。 First Step 我們給第一篇例子中加個(gè)...

DobbyKim 2019-08-20 14:37 評(píng)論0 收藏0
webpack -> vue Component 從入門到放棄（二）

摘要：我們可以根據(jù)模塊類型擴(kuò)展名來自動(dòng)綁定需要的。當(dāng)需要加載的文件匹配的正則時(shí)，就會(huì)調(diào)用后面的對(duì)文件進(jìn)行處理，這正是強(qiáng)大的原因。這篇就這樣吧，感覺進(jìn)度有點(diǎn)慢從入門到放棄四從入門到放棄一從入門到放棄三源代碼 Foreword 上一篇簡(jiǎn)單介紹了webpack的打包功能，應(yīng)該說是比較無意義的打包，對(duì)于開發(fā)人員來說，這種效率是非常低的。所以我們來點(diǎn)升華。 First Step 我們給第一篇例子中加個(gè)...

xiaochao 2019-08-01 16:23 評(píng)論0 收藏0
CSS入門之引用、選擇器、屬性（六分之三）

摘要：入門教程六分之三篇沒辦法，我直播教小伙伴入門，屬性講完，準(zhǔn)備說定位的時(shí)候，他們就喊停，不住了。。。選擇器表達(dá)式如下相關(guān)效果見表達(dá)式關(guān)鍵詞特性屬性屬性即樣式定制的具體樣式，比如定制寬高，分別為與等。 CSS 入門教程六分之三篇沒辦法，我直播教小伙伴CSS入門，屬性講完，準(zhǔn)備說定位的時(shí)候，他們就喊停，hold不住了。。。所以先寫到六分之三，23333333 要點(diǎn) 解釋引用如...

baishancloud 2019-08-30 15:54 評(píng)論0 收藏0
前端資源系列（4）-前端學(xué)習(xí)資源分享&前端面試資源匯總

摘要：特意對(duì)前端學(xué)習(xí)資源做一個(gè)匯總，方便自己學(xué)習(xí)查閱參考，和好友們共同進(jìn)步。特意對(duì)前端學(xué)習(xí)資源做一個(gè)匯總，方便自己學(xué)習(xí)查閱參考，和好友們共同進(jìn)步。本以為自己收藏的站點(diǎn)多，可以很快搞定，沒想到一入?yún)R總深似海。還有很多不足&遺漏的地方，歡迎補(bǔ)充。有錯(cuò)誤的地方，還請(qǐng)斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應(yīng)和斧正，會(huì)及時(shí)更新，平時(shí)業(yè)務(wù)工作時(shí)也會(huì)不定期更...

princekin 2019-08-20 11:28 評(píng)論0 收藏0