Web前端開發(fā)知識(shí)點(diǎn)之CSS的使用方式

今天小編要跟大家分享的文章是關(guān)于Web前端開發(fā)知識(shí)點(diǎn)之CSS的使用方式。本文章小編從與HTML的結(jié)合方式、CSS語(yǔ)法、選擇器以及盒子模型四個(gè)方面進(jìn)行講解。下面來(lái)和小編一起看一看吧！

成都創(chuàng)新互聯(lián)公司長(zhǎng)期為成百上千家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為石臺(tái)企業(yè)提供專業(yè)的成都網(wǎng)站制作、網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)，石臺(tái)網(wǎng)站改版等技術(shù)服務(wù)。擁有十載豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。

一、與HTML的結(jié)合方式

CSS與HTML的結(jié)合方式一共有三種，分別是：外部樣式、內(nèi)部樣式和內(nèi)聯(lián)樣式。

①外部樣式

當(dāng)樣式需要應(yīng)用于很多頁(yè)面時(shí)，外部樣式表將是理想的選擇。在使用外部樣式表的情況下，你可以通過改變一個(gè)文件來(lái)改變整個(gè)站點(diǎn)的外觀。每個(gè)頁(yè)面使用標(biāo)簽鏈接到樣式表。標(biāo)簽在文檔的頭部：

_

或者可以像下面這樣在標(biāo)簽import一個(gè)樣式表，不過不建議使用。





___


@import"main.css";_

②內(nèi)部樣式

當(dāng)單個(gè)文檔需要特殊的樣式時(shí)，就應(yīng)該使用內(nèi)部樣式表。你可以使用標(biāo)簽在文檔頭部定義內(nèi)部樣式表，就像這樣:


_


___


_r_color:_ienna;}_

③內(nèi)聯(lián)樣式

要使用內(nèi)聯(lián)樣式，你需要在相關(guān)的標(biāo)簽內(nèi)使用樣式(style)屬性。

_

Thisisaparagraph

由于要將表現(xiàn)和內(nèi)容混雜在一起，內(nèi)聯(lián)樣式會(huì)損失掉樣式表的許多優(yōu)勢(shì)。請(qǐng)慎用這種方法，例如當(dāng)樣式僅需要在一個(gè)元素上應(yīng)用一次時(shí)。

二、CSS語(yǔ)法

CSS語(yǔ)法規(guī)則由兩個(gè)主要的部分構(gòu)成：選擇器，以及一條或多條聲明。

選擇器通常是您需要改變樣式的HTML元素。

每條聲明由一個(gè)屬性和一個(gè)值組成。兩條聲明之間被分號(hào)分開。

屬性是您希望設(shè)置的樣式屬性。每個(gè)屬性有一個(gè)值。屬性和值被冒號(hào)分開。

在下面這個(gè)例子中，h1是選擇器，color和font-size是屬性，red和14px是值。

三、選擇器

CSS的選擇器主要分為兩大類，一類基本選擇器；一類擴(kuò)展選擇器。

①基本選擇器

基本選擇器包括id選擇器，元素選擇器和類選擇器。

id選擇器可以為標(biāo)有特定id的HTML元素指定特定的樣式。id選擇器以"#"來(lái)定義。例如下面代碼指定id為red的標(biāo)簽中文本為紅色。

#red{color:red;}

元素選擇器可以為相應(yīng)的HTML元素指定特定的樣式。元素選擇器前面沒有任何字符。例如下面代碼指定div標(biāo)簽中文本為紅色。

div{color:red;}

類選擇器可以為標(biāo)有特定class的HTML元素指定特定的樣式。類選擇器以一個(gè)點(diǎn)號(hào)顯示。例如下面代碼指定class為center的標(biāo)簽中文本居中對(duì)齊。

.center{text-align:center}

②擴(kuò)展選擇器

擴(kuò)展選擇器是在基本選擇器的基礎(chǔ)上擴(kuò)展出來(lái)的，下面介紹幾種常見的。

*選擇器(*

{})可以為HTML的所有元素指定特定的樣式。例如下面代碼指定HTML頁(yè)面中所有文本為紅色。

*{color:red;}

并集選擇器(選擇器1,選擇器2{})可以為多個(gè)選擇器指定特定的樣式。例如下面代碼指定div和span兩種標(biāo)簽中文本為紅色。

div,span{color:red;}

子選擇器(選擇器1選擇器2{})可以為選擇器1中的選擇器2指定特定的樣式。例如下面代碼指定div中span標(biāo)簽文本為紅色。

divspan{color:red;}

父選擇器(選擇器1選擇器2{})可以為含有選擇器2的選擇器1指定特定的樣式。例如下面代碼指定含有span的div標(biāo)簽文本為紅色。

divspan{color:red;}

屬性選擇器(元素[屬性="屬性值"])可以為含有該屬性且屬性值等于該值的元素指定特定的樣式。其中，元素和屬性值可以省略。例如下面代碼指定align屬性等于center的div標(biāo)簽文本為紅色。

div[align="center"]{color:red;}

偽類選擇器(元素:狀態(tài){})可以為該元素處于該狀態(tài)時(shí)指定特定的樣式。例如下面的代碼指定鼠標(biāo)懸浮在超鏈接上時(shí)文本為紅色。

a:hover{color:red;}

四、盒子模型

所有HTML元素可以看作盒子，在CSS中，"box

model"這一術(shù)語(yǔ)是用來(lái)設(shè)計(jì)和布局時(shí)使用。

CSS盒模型本質(zhì)上是一個(gè)盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實(shí)際內(nèi)容。

盒模型允許我們?cè)谄渌睾椭車剡吙蛑g的空間放置元素。

下面的圖片說(shuō)明了盒子模型：

Margin(外邊距)-清除邊框外的區(qū)域，外邊距是透明的。

Border(邊框)-圍繞在內(nèi)邊距和內(nèi)容外的邊框。

Padding(內(nèi)邊距)-清除內(nèi)容周圍的區(qū)域，內(nèi)邊距是透明的。

Content(內(nèi)容)-盒子的內(nèi)容，顯示文本和圖像。

默認(rèn)情況下，標(biāo)簽的width和height屬性指的是content(內(nèi)容)的寬和高，我們?cè)谠O(shè)置邊框和邊距的時(shí)候一定要注意。如果想要讓width和height是最終盒子的大小，可以設(shè)置下面的代碼：

box-sizing:border-box;

以上就是小編今天為大家分享的關(guān)于Web前端開發(fā)知識(shí)點(diǎn)之CSS的使用方式的文章，希望本篇文章能夠?qū)φ趶氖聎eb前端工作和學(xué)習(xí)的小伙伴們有所幫助，想要了解更多web前端知識(shí)記得關(guān)注北大青鳥web培訓(xùn)官網(wǎng)，最后祝愿小伙伴們工作順利，城市一名優(yōu)秀的web前端程序員。

文章來(lái)源：原創(chuàng)_緄墓適_

二、支付寶小程序前端樣式的設(shè)計(jì).acss樣式詳解

在視頻中已經(jīng)說(shuō)過了，小程序的設(shè)計(jì)思想和原生app的設(shè)計(jì)思想頗為相似，基本的應(yīng)用單元為頁(yè)面。當(dāng)然對(duì)于一個(gè)頁(yè)面來(lái)說(shuō)每一個(gè)元素的放置位置在哪兒以及顯示成什么樣子這個(gè)是由 樣式來(lái)決定的 。我們知道在web開發(fā)中樣式是在css文件中規(guī)定的，叫做層疊樣式表 (Cascading Style Sheets)。其實(shí)在APP中樣式的約束也是使用css，在支付寶小程序中也是使用css不過文件的后綴是.acss而且對(duì)css3進(jìn)行了擴(kuò)充而已。

那么在支付寶小程序中的.acss和微信小程序中的.wxcss沒有什么兩樣。 上邊已經(jīng)說(shuō)了.acss其實(shí)包含了css3那么它還有一些新的特性是css3中不具備的，讓我們一一看看

第一次看到這個(gè)東西也能猜到他是干什么用的。在css中我們知道規(guī)定大小一般使用像素(px)這個(gè)單位。比如顯示生活中我們說(shuō)房子128㎡那這兒的單位是平方米，在開發(fā)中需要更加精準(zhǔn)的大小就是px像素。像素就非常精細(xì)了因?yàn)樵谖覀冿@示屏幕中像素是最小的顯示單元。這個(gè)道理如果不懂的話就找個(gè)LED屏幕仔細(xì)看，LED屏幕上一個(gè)一個(gè)的發(fā)光二極管可以想象為像素。

我們知道手機(jī)屏幕有大有小，就拿iPhone來(lái)說(shuō)，iPhone 6 plus比iPhone 5要大。那么就說(shuō)明plus的像素比5要多。對(duì)比：

加入有一個(gè)160px寬度的紅色矩形在這兩種手機(jī)中的位置如下：

rpx（responsive pixel）可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)。如何自適應(yīng)呢？看下邊的分析：

看下圖：

在模塊化開發(fā)中我們有時(shí)候不得不在頁(yè)面中使用其他的第三方庫(kù)的樣式，而第三方庫(kù)的樣式是保存在第三方包中的，我們不可能全部復(fù)制到我們的.acss文件中，那最好的辦法就是導(dǎo)入了。在樣式表中導(dǎo)入其他外聯(lián)樣式表。

當(dāng)然仍舊支持內(nèi)聯(lián)樣式和class屬性制定樣式類，如

選擇器和css3的保持一致。一般有class=”test”類選擇器和id=”test”的id選擇器。當(dāng)然在支付寶小程序的樣式中特殊的地方就是：

※ .a- 或者 .am-為前綴的選擇器已經(jīng)被系統(tǒng)占用所以不要使用；

※ 不能使用屬性選擇器，例如,以下寫法不被支持：

我之前說(shuō)過小程序開發(fā)的應(yīng)用單元為頁(yè)面。其實(shí)我們?cè)?axml中寫的頁(yè)面并不包含頁(yè)面容器，就相當(dāng)于我們做一個(gè)頁(yè)面但是body標(biāo)簽不用寫那如果我們要改變整個(gè)頁(yè)面的背景怎么辦呢?其實(shí)有一個(gè)固定的選擇器。例如：

可以通過 page 元素選擇器來(lái)設(shè)置頁(yè)面容器的樣式，比如頁(yè)面背景色:

在你想改變頁(yè)面容器的頁(yè)面中定義該樣式也可以，全局定義也可以，例如我想將test這個(gè)頁(yè)面的頁(yè)面容器背景設(shè)置為藍(lán)色，就可以再pages目錄下的test目錄下找到test.acss在其中定義page的樣式

下節(jié)是視圖層講解，如果有任何問題可以再下方給我留言或者發(fā)郵件到 weiyongqiang@weiyongqiang.com 我在收到郵件后會(huì)回復(fù)。

前端基本功：JS（十一）動(dòng)畫封裝(CSS樣式獲取、JSON遍歷)

盒子 原來(lái)的位置 0 + 10 盒子現(xiàn)在的offsetLeft 10

|-5| = 5

這三個(gè)函數(shù)都是 數(shù)學(xué)函數(shù)

Math

比如說(shuō) console.log(Math.ceil(1.01)) 結(jié)果 是 2

console.log(Math.ceil(1.9)) 結(jié)果 2

console.log(Math.ceil(-1.3)) 結(jié)果 是 -1

比如說(shuō) console.log(Math.floor(1.01)) 結(jié)果 是 1

console.log(Math.floor(1.9)) 結(jié)果 1

console.log(Math.floor(-1.3)) 結(jié)果 是 -2

console.log(Math.round(1.01)) 結(jié)果 是 1

console.log(Math.round(1.9)) 結(jié)果 是 2

勻速動(dòng)畫的原理： 盒子本身的位置 + 步長(zhǎng)

緩動(dòng)動(dòng)畫的原理: 盒子本身的位置 + 步長(zhǎng) (不斷變化的)

( 缺陷：只能水平方向！隨后的“封裝運(yùn)動(dòng)框架單個(gè)屬性會(huì)進(jìn)一步改進(jìn)” )

我們?cè)L問得到css 屬性，比較常用的有兩種：

點(diǎn)語(yǔ)法可以得到 width 屬性 和 top屬性 ** 帶有單位的 。 100px

但是這個(gè)語(yǔ)法有非常大的 缺陷**， 不變的。

后面的width 和 top 沒有辦法傳遞參數(shù)的。

var w = width;

box.style.w

最大的優(yōu)點(diǎn) ： 可以給屬性傳遞參數(shù)

我們想要獲得css 的樣式， box.style.left 和 box.style.backgorundColor

但是它只能得到 行內(nèi)的樣式。

但是我們工作最多用的是 內(nèi)嵌式 或者 外鏈?zhǔn)?。

怎么辦？

核心： 我們?cè)趺床拍艿玫絻?nèi)嵌或者外鏈的樣式呢？

外部（使用link）和內(nèi)嵌（使用style）樣式表中的樣式（ie和opera）

兩個(gè)選項(xiàng)是必須的， 沒有偽類 用 null 替代

我們這個(gè)元素里面的屬性很多， left top width ===

我們想要某個(gè)屬性， 就應(yīng)該 返回該屬性，所有繼續(xù)封裝 返回當(dāng)前樣式的 函數(shù)。

千萬(wàn)要記得 每個(gè) 的意思 ： 那是相當(dāng)重要

flag在js中一般作為開關(guān)，進(jìn)行判斷。

等動(dòng)畫執(zhí)行完畢再去執(zhí)行的函數(shù) 回調(diào)函數(shù)

我們?cè)趺粗绖?dòng)畫就執(zhí)行完畢了呢？

很簡(jiǎn)單 當(dāng)定時(shí)器停止了。 動(dòng)畫就結(jié)束了

案例源碼：

in運(yùn)算符也是一個(gè)二元運(yùn)算符，但是對(duì)運(yùn)算符左右兩個(gè)操作數(shù)的要求比較嚴(yán)格。in運(yùn)算符要求第1個(gè)（左邊的）操作數(shù)必須是字符串類型或可以轉(zhuǎn)換為字符串類型的其他類型，而第2個(gè)（右邊的）操作數(shù)必須是數(shù)組或?qū)ο蟆Ｖ挥械?個(gè)操作數(shù)的值是第2個(gè)操作數(shù)的屬性名，才會(huì)返回true，否則返回false

案例源碼：

鏈接：

密碼：7fv8

前端001css樣式font字體屬性

1.如果想要設(shè)置字體樣式可以使用font-family

2.如果想要設(shè)置加粗可以使用font-weight

3.如果想要設(shè)置傾斜可以使用font-style

4.如果想要設(shè)置字體大小可以使用font-size

上述樣式如果想要在一個(gè)選擇器中使用的話，一下寫4個(gè)會(huì)顯得比較冗余，那么我們可以簡(jiǎn)化綜合復(fù)合如下的樣式

選擇器 {font :font-style font-weight font-size/line-height font-family}順序不可顛倒 其中? font-size和font-family必須保留? 否則不會(huì)起作用

前端之CSS篇

px像素。絕對(duì)單位，像素px是相對(duì)于顯示器屏幕分辨率而言的，是一個(gè)虛擬單位。是計(jì)算機(jī)系統(tǒng)的數(shù)字化圖像長(zhǎng)度單位，如果px要換算成物理長(zhǎng)度，需要指定精度DPI。

2、em是相對(duì)長(zhǎng)度單位，相對(duì)于當(dāng)前對(duì)象內(nèi)文本的字體尺寸。如當(dāng)前對(duì)行內(nèi)文本的字體尺寸未被人為設(shè)置，則相對(duì)瀏覽器的默認(rèn)字體尺寸。它會(huì)繼承父級(jí)元素的字體大小，因此并不是一個(gè)固定的值。

rem是CSS3新增的一個(gè)相對(duì)單位(root em,根em),使用rem為元素設(shè)定字體大小事，仍然是相對(duì)大小但相對(duì)的只是HTML根元素。

4、區(qū)別：IE無(wú)法調(diào)用那些使用px作為單位的字體大小，而em和rem可以縮放，rem相對(duì)的只是HTML根元素。這個(gè)單位可謂集相對(duì)大小和絕對(duì)大小的優(yōu)點(diǎn)于一身，通過它既可以做到只修改根元素就成比例地調(diào)整所有字體大小，又可以避免字體大小逐層復(fù)合的連鎖反應(yīng)。目前，除了IE8及更早版本外，所有瀏覽器已支持rem。

1.定位

2.尺寸

3.浮動(dòng)

4.最初的布局——table

5.兩欄布局（浮動(dòng)和定位）

6.三欄布局（flex，圣杯和雙飛翼： ）

7.移動(dòng)端的布局（媒體查詢，flex彈性盒子（ ），rem適配（ ））

8.grid布局

摘自：

1.flex方式（適用于居中元素元素寬高未知），但是這種方式僅限于body里面只有一個(gè)子元素，如果body里面有多個(gè)div不行

2.絕對(duì)定位和負(fù)邊距（適用于居中元素的寬高是固定的）

3.CSS3的transform屬性（適用于居中元素元素寬高未知）

4.margin:auto

1.transform

transform屬性是靜態(tài)屬性。它其實(shí)只是一個(gè)靜態(tài)屬性，需要配合transition和animation才能展現(xiàn)出動(dòng)畫效果。你可以把它看成是跟left、top等屬性一樣，只是一個(gè)靜態(tài)樣式而已。它可以讓元素偏移、伸縮、變形、旋轉(zhuǎn)等。

2.transition,它屬性是一個(gè)簡(jiǎn)單的動(dòng)畫屬性，非常簡(jiǎn)單非常容易用。可以說(shuō)它是animation的簡(jiǎn)化版本，是給普通做簡(jiǎn)單網(wǎng)頁(yè)特效用的。

3.Animation

標(biāo)題名稱：css樣式前端,css樣式總結(jié)
新聞來(lái)源：http://chinadenli.net/article33/dsiogps.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、域名注冊(cè)、定制網(wǎng)站、網(wǎng)站導(dǎo)航、全網(wǎng)營(yíng)銷推廣、面包屑導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)