百度前端學(xué)院-基礎(chǔ)學(xué)院-第三課

DobbyKim 發(fā)布于2019-04-23 14:38 / 691人閱讀

摘要：第三天讓簡歷有點色彩這一節(jié)課是來初步了解什么是，掌握基本的概念，語法，學(xué)習(xí)如何設(shè)置一些簡單的樣式。設(shè)置文字陰影。取值較多，具體參考文本布局控制在盒子中的位置。設(shè)置字母與字母直接的間距，或者字與字直接的間距。第二步，瀏覽器顯示內(nèi)容。

第三天：讓簡歷有點色彩

這一節(jié)課是來初步了解什么是CSS，掌握基本的CSS概念，語法，學(xué)習(xí)如何設(shè)置一些簡單的樣式。

好記性不如爛筆頭，開始：

字體：

font-style：設(shè)置字體傾斜。

font-weight：設(shè)置文字的粗體大小。

text-transform :設(shè)置要轉(zhuǎn)換的字體?？梢赞D(zhuǎn)換成大小寫，首字母大寫。

text-decoration:? 設(shè)置下劃線，上劃線，穿越文本的線。

text-shadow:設(shè)置文字陰影。取值較多，具體參考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/text-shadow

文本布局：

text-align：控制在盒子中的位置。

line-height：控制行高。

letter-spacing/ word-spacing: 設(shè)置字母與字母直接的間距，或者字與字直接的間距。

text-overflow: 控制如何顯示溢出文字。

direciton: 控制文字方向，語法：

overflow-wrap：是用來說明當(dāng)一個不能被分開的字符串太長而不能填充其包裹盒時，為防止其溢出，瀏覽器是否允許這樣的單詞中斷換行。

CSS實際上是如何工作的？

瀏覽器講HTML和css轉(zhuǎn)化為DOMtree，講文檔內(nèi)容和樣式結(jié)合在一起。第二步，瀏覽器顯示DOM內(nèi)容。

CSS選擇器：

非常簡單的選擇器有：? 元素選擇器（類型選擇器），類選擇器，ID選擇器，通用選擇器（*）

屬性選擇器有：用[]組成，詳細(xì)請參考：https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Introduction_to_CSS/Attribute_selectors

組合器：

云服務(wù)器 GPU云服務(wù)器前端學(xué)院阿里學(xué)院學(xué)院技術(shù)學(xué)院

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

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

相關(guān)文章

百度前端學(xué)院-基礎(chǔ)學(xué)院-第四課

摘要：今天是第四天，進(jìn)度可以，表揚一下自己。今天的課程目標(biāo)是掌握稍微復(fù)雜的一些選擇器，還有背景，邊框等一些樣式屬性。設(shè)置邊框?qū)挾?。今天是第四天，進(jìn)度可以，表揚一下自己。今天的課程目標(biāo)是：掌握 CSS 稍微復(fù)雜的一些選擇器，還有背景，邊框等一些 CSS 樣式屬性。 CSS背景：背景色：background-color:gray; 背景圖：background-image:url(www........

wean 2019-04-23 14:38 評論0 收藏0
百度前端學(xué)院-基礎(chǔ)學(xué)院-第七天到第八天

摘要：第五天到第六天的內(nèi)容沒有記筆記，不好不好。第七天到第八天的學(xué)習(xí)目標(biāo)是學(xué)習(xí)布局的各種方式。主要包含相關(guān)和相關(guān)。定位的元素應(yīng)該在文檔流中的間隙不再存在絕對定位的元素不再存在于正常文檔布局流程中。內(nèi)容較多，請參考學(xué)習(xí)了容器項第五天到第六天的內(nèi)容沒有記筆記，不好不好。第七天到第八天的學(xué)習(xí)目標(biāo)是：學(xué)習(xí)布局的各種方式。主要包含position相關(guān)和Flexbox相關(guān)。知識點： 1、默認(rèn)情況下，塊級元...

zombieda 2019-04-23 13:46 評論0 收藏0
百度前端學(xué)院-基礎(chǔ)學(xué)院-第七天到第八天之BFC

摘要：簡介全稱中文為塊級格式化上下文。特征總之記住一句話元素特征表現(xiàn)原則就是內(nèi)部元素?zé)o論怎么翻江倒海，都不會影響外部元素。如何觸發(fā)，常見如下的值不為的值為，或。的值不為和需掌握自適應(yīng)模塊布局內(nèi)容很多，具體參考1、BFC簡介 BFC全稱block formatting context,中文為塊級格式化上下文。特征總之記住一句話： BFC元素特征表現(xiàn)原則就是：內(nèi)部元素?zé)o論怎么翻江倒海，都不會影響外部元...

junfeng777 2019-04-23 13:46 評論0 收藏0
百度前端學(xué)院-基礎(chǔ)學(xué)院-第吳課/第六課

摘要：邊界也會忽略百分比寬度設(shè)置。背景裁剪，值有改變盒子計算值只是不包含和只包含內(nèi)容高度今天是一個跨天的任務(wù)，學(xué)習(xí)目標(biāo)是：掌握CSS盒模型及Float；盒模型要點：如果盒子的高度被設(shè)置為百分比長度，那么盒子高度不會遵循這個設(shè)置了的百分比長度，而是總會采用盒子內(nèi)容的高度，除非給它設(shè)置了一個絕對高度（例如，像素或者 em）。這比把頁面上每個盒子的高度默認(rèn)設(shè)置為視口高度的 100% 更方便。邊界...

dunizb 2019-04-23 13:35 評論0 收藏0
百度前端學(xué)院小斌學(xué)院任務(wù)四

摘要：任務(wù)目的學(xué)習(xí)與實踐的基本語法語言特性初步了解的事件是什么初步了解中的是什么任務(wù)描述如圖，模擬一個隊列，隊列的每個元素是一個數(shù)字，初始隊列為空有一個輸入框，以及個操作按鈕點擊左側(cè)入，將中輸入的數(shù)字從左側(cè)插入隊列中點擊右側(cè)入，將中輸入的數(shù)字從右任務(wù)目的學(xué)習(xí)與實踐JavaScript的基本語法、語言特性初步了解JavaScript的事件是什么初步了解JavaScript中的DOM是什么任務(wù)...

zhoutk 2019-08-20 16:24 評論0 收藏0