今天小編要跟大家分享的文章是關于Web前端開發(fā)知識點之CSS的使用方式。本文章小編從與HTML的結(jié)合方式、CSS語法、選擇器以及盒子模型四個方面進行講解。下面來和小編一起看一看吧！
創(chuàng)新互聯(lián)建站-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設、高性價比嵐山網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式嵐山網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設找我們，業(yè)務覆蓋嵐山地區(qū)。費用合理售后完善，十載實體公司更值得信賴。
一、與HTML的結(jié)合方式
CSS與HTML的結(jié)合方式一共有三種，分別是：外部樣式、內(nèi)部樣式和內(nèi)聯(lián)樣式。
①外部樣式
當樣式需要應用于很多頁面時，外部樣式表將是理想的選擇。在使用外部樣式表的情況下，你可以通過改變一個文件來改變整個站點的外觀。每個頁面使用標簽鏈接到樣式表。標簽在文檔的頭部：
_
或者可以像下面這樣在標簽import一個樣式表，不過不建議使用。
___
@import"main.css";_
②內(nèi)部樣式
當單個文檔需要特殊的樣式時，就應該使用內(nèi)部樣式表。你可以使用標簽在文檔頭部定義內(nèi)部樣式表，就像這樣:
_
___
_r_color:_ienna;}_
③內(nèi)聯(lián)樣式
要使用內(nèi)聯(lián)樣式，你需要在相關的標簽內(nèi)使用樣式(style)屬性。
_
Thisisaparagraph
由于要將表現(xiàn)和內(nèi)容混雜在一起，內(nèi)聯(lián)樣式會損失掉樣式表的許多優(yōu)勢。請慎用這種方法，例如當樣式僅需要在一個元素上應用一次時。
二、CSS語法
CSS語法規(guī)則由兩個主要的部分構成：選擇器，以及一條或多條聲明。
選擇器通常是您需要改變樣式的HTML元素。
每條聲明由一個屬性和一個值組成。兩條聲明之間被分號分開。
屬性是您希望設置的樣式屬性。每個屬性有一個值。屬性和值被冒號分開。
在下面這個例子中，h1是選擇器，color和font-size是屬性，red和14px是值。
三、選擇器
CSS的選擇器主要分為兩大類，一類基本選擇器；一類擴展選擇器。
①基本選擇器
基本選擇器包括id選擇器，元素選擇器和類選擇器。
id選擇器可以為標有特定id的HTML元素指定特定的樣式。id選擇器以"#"來定義。例如下面代碼指定id為red的標簽中文本為紅色。
#red{color:red;}
元素選擇器可以為相應的HTML元素指定特定的樣式。元素選擇器前面沒有任何字符。例如下面代碼指定div標簽中文本為紅色。
div{color:red;}
類選擇器可以為標有特定class的HTML元素指定特定的樣式。類選擇器以一個點號顯示。例如下面代碼指定class為center的標簽中文本居中對齊。
.center{text-align:center}
②擴展選擇器
擴展選擇器是在基本選擇器的基礎上擴展出來的，下面介紹幾種常見的。
*選擇器(*
{})可以為HTML的所有元素指定特定的樣式。例如下面代碼指定HTML頁面中所有文本為紅色。
*{color:red;}
并集選擇器(選擇器1,選擇器2{})可以為多個選擇器指定特定的樣式。例如下面代碼指定div和span兩種標簽中文本為紅色。
div,span{color:red;}
子選擇器(選擇器1選擇器2{})可以為選擇器1中的選擇器2指定特定的樣式。例如下面代碼指定div中span標簽文本為紅色。
divspan{color:red;}
父選擇器(選擇器1選擇器2{})可以為含有選擇器2的選擇器1指定特定的樣式。例如下面代碼指定含有span的div標簽文本為紅色。
divspan{color:red;}
屬性選擇器(元素[屬性="屬性值"])可以為含有該屬性且屬性值等于該值的元素指定特定的樣式。其中，元素和屬性值可以省略。例如下面代碼指定align屬性等于center的div標簽文本為紅色。
div[align="center"]{color:red;}
偽類選擇器(元素:狀態(tài){})可以為該元素處于該狀態(tài)時指定特定的樣式。例如下面的代碼指定鼠標懸浮在超鏈接上時文本為紅色。
a:hover{color:red;}
四、盒子模型
所有HTML元素可以看作盒子，在CSS中，"box
model"這一術語是用來設計和布局時使用。
CSS盒模型本質(zhì)上是一個盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實際內(nèi)容。
盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。
下面的圖片說明了盒子模型：
Margin(外邊距)-清除邊框外的區(qū)域，外邊距是透明的。
Border(邊框)-圍繞在內(nèi)邊距和內(nèi)容外的邊框。
Padding(內(nèi)邊距)-清除內(nèi)容周圍的區(qū)域，內(nèi)邊距是透明的。
Content(內(nèi)容)-盒子的內(nèi)容，顯示文本和圖像。
默認情況下，標簽的width和height屬性指的是content(內(nèi)容)的寬和高，我們在設置邊框和邊距的時候一定要注意。如果想要讓width和height是最終盒子的大小，可以設置下面的代碼：
box-sizing:border-box;
以上就是小編今天為大家分享的關于Web前端開發(fā)知識點之CSS的使用方式的文章，希望本篇文章能夠?qū)φ趶氖聎eb前端工作和學習的小伙伴們有所幫助，想要了解更多web前端知識記得關注北大青鳥web培訓官網(wǎng)，最后祝愿小伙伴們工作順利，城市一名優(yōu)秀的web前端程序員。
文章來源：原創(chuàng)_緄墓適_
px像素。絕對單位，像素px是相對于顯示器屏幕分辨率而言的，是一個虛擬單位。是計算機系統(tǒng)的數(shù)字化圖像長度單位，如果px要換算成物理長度，需要指定精度DPI。
2、em是相對長度單位，相對于當前對象內(nèi)文本的字體尺寸。如當前對行內(nèi)文本的字體尺寸未被人為設置，則相對瀏覽器的默認字體尺寸。它會繼承父級元素的字體大小，因此并不是一個固定的值。
rem是CSS3新增的一個相對單位(root em,根em),使用rem為元素設定字體大小事，仍然是相對大小但相對的只是HTML根元素。
4、區(qū)別：IE無法調(diào)用那些使用px作為單位的字體大小，而em和rem可以縮放，rem相對的只是HTML根元素。這個單位可謂集相對大小和絕對大小的優(yōu)點于一身，通過它既可以做到只修改根元素就成比例地調(diào)整所有字體大小，又可以避免字體大小逐層復合的連鎖反應。目前，除了IE8及更早版本外，所有瀏覽器已支持rem。
1.定位
2.尺寸
3.浮動
4.最初的布局——table
5.兩欄布局（浮動和定位）
6.三欄布局（flex，圣杯和雙飛翼： ）
7.移動端的布局（媒體查詢，flex彈性盒子（ ），rem適配（ ））
8.grid布局
摘自：
1.flex方式（適用于居中元素元素寬高未知），但是這種方式僅限于body里面只有一個子元素，如果body里面有多個div不行
2.絕對定位和負邊距（適用于居中元素的寬高是固定的）
3.CSS3的transform屬性（適用于居中元素元素寬高未知）
4.margin:auto
1.transform
transform屬性是靜態(tài)屬性。它其實只是一個靜態(tài)屬性，需要配合transition和animation才能展現(xiàn)出動畫效果。你可以把它看成是跟left、top等屬性一樣，只是一個靜態(tài)樣式而已。它可以讓元素偏移、伸縮、變形、旋轉(zhuǎn)等。
2.transition,它屬性是一個簡單的動畫屬性，非常簡單非常容易用?？梢哉f它是animation的簡化版本，是給普通做簡單網(wǎng)頁特效用的。
3.Animation
1.如果想要設置字體樣式可以使用font-family
2.如果想要設置加粗可以使用font-weight
3.如果想要設置傾斜可以使用font-style
4.如果想要設置字體大小可以使用font-size
上述樣式如果想要在一個選擇器中使用的話，一下寫4個會顯得比較冗余，那么我們可以簡化綜合復合如下的樣式
選擇器 {font :font-style font-weight font-size/line-height font-family}順序不可顛倒 其中? font-size和font-family必須保留? 否則不會起作用
重慶分公司
重慶分公司
