web前端開發(fā)的css應(yīng)該怎樣寫

CSS 指層疊樣式表 (Cascading Style Sheets)，樣式定義如何顯示 HTML 元素。CSS樣式表又分為三種方式，內(nèi)聯(lián)樣式表、內(nèi)聯(lián)引用和外部樣式表。下面具體介紹它們的寫法：

創(chuàng)新互聯(lián)公司是一家專注于網(wǎng)站制作、網(wǎng)站建設(shè)與策劃設(shè)計(jì),長(zhǎng)安網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)公司做網(wǎng)站,專注于網(wǎng)站建設(shè)10年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:長(zhǎng)安等地區(qū)。長(zhǎng)安做網(wǎng)站價(jià)格咨詢:18982081108

1.內(nèi)聯(lián)樣式表：在HTML文檔頭部 head 區(qū)域使用style 元素 來包含CSS。

2.內(nèi)聯(lián)引用： 在HTML元素中使用"style" 屬性，直接對(duì)指定元素應(yīng)用樣式。

3.外部樣式表：將樣式單獨(dú)寫在CSS文件內(nèi)，通過引入外部 CSS 文件來應(yīng)用樣式。這種方法常應(yīng)用于大型開發(fā)中。

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

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

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

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

①外部樣式

當(dāng)樣式需要應(yīng)用于很多頁面時(shí)，外部樣式表將是理想的選擇。在使用外部樣式表的情況下，你可以通過改變一個(gè)文件來改變整個(gè)站點(diǎn)的外觀。每個(gè)頁面使用標(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語法

CSS語法規(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選擇器以"#"來定義。例如下面代碼指定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ò)展出來的，下面介紹幾種常見的。

*選擇器(*

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

*{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ù)語是用來設(shè)計(jì)和布局時(shí)使用。

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

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

下面的圖片說明了盒子模型：

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前端程序員。

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

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

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

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

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

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

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

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

看下圖：

在模塊化開發(fā)中我們有時(shí)候不得不在頁面中使用其他的第三方庫的樣式，而第三方庫的樣式是保存在第三方包中的，我們不可能全部復(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)占用所以不要使用；

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

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

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

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

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

本文題目：前端css開發(fā)樣式,web前端開發(fā)css樣式筆記
鏈接地址：http://chinadenli.net/article11/dsepjdd.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供做網(wǎng)站、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站排名、微信小程序、網(wǎng)站導(dǎo)航、Google

廣告

聲明：本網(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í)需注明來源： 創(chuàng)新互聯(lián)