考拉如何編譯css

發布時間: 2022-12-14 19:33:45

⑴ less混合

混合就是一種或者一系列屬性從一種規則集引入（混合）到另一種規則集的方法

1. 普通混合
一個普通的css樣式

我們發現 h1,h2的樣式中有很多重復的，而解決方式如下，將重復的放在一個類中：

定義一個.font_h類，在HTML文件對應的元素山添加class="font_h"屬性
less可以不這么寫，less寫法如下：

將定義好的類混入css樣式中，這樣就不用在HTML的元素中寫類了
編譯後的css，和下面不帶輸出的混合做對比

2. 不帶輸出的混合

編譯後的css文件，從中發現.font_h不見了

3. 帶選擇器的混合

編譯之後的css文件

其中， .my-hover-mixin():hover == &:hover

4. 帶參數的混合

編譯後的css文件

5. 帶參數並且有默認值

編譯後的css文件

調用後如果 .border_have(); 不帶參數，就用默認的參數；如果傳遞了參數，就用傳入的參數。而上邊帶參數但沒有默認值時，如果調用時不傳入參數就會報錯。

6. 帶多個參數的混合

編譯後的css文件

less文件（定義具有多個相同名稱和參數數量的混合）

編譯後的css文件

less文件

編譯後的css文件

如果使用mixin的時候只帶一個參數，比如.mixin(red)，這個屬性會導致所有的mixin都會強制使用這個明確的參數

7. 命名參數

編譯後的css文件

8. @arguments變數

編譯後的css文件

less文件

編譯後的css文件

這里的solid是默認值，但也必須寫上，否則會報錯。

9. 匹配模式

編譯後的css文件

注意：中間用逗號分割開

10. 得到混合中變數的返回值

編譯後的css文件

⑵ 用考拉編輯出來的css代碼怎麼不對齊

它本來就這樣的。

希望我的回答可以幫到你，有什麼不懂可以追問。

⑶ less文件編譯css，css文件為什麼是空的呢

有些軟體有插件可以實時編譯，比如sublime。

我用的是gulp，方便前端自動化。你可以網上搜一下，用起來啊很方便。

舉個例子：

java">vargulp=require('gulp');
varless=require('gulp-less');
varnotify=require('gulp-notify');
varplumber=require('gulp-plumber');
varconcat=require('gulp-concat');
varminifycss=require('gulp-minify-css');
varrename=require('gulp-rename');
varwatch=require('gulp-watch');
varuglify=require('gulp-uglify');
varautoprefixer=require('gulp-autoprefixer');
varlessPath='./src/less/*.less';
varlessMainPath='./src/less/main.less';
varlessDist='./src/css/';
varcssPath='./src/css/*.css';
varjsSrcPath='./src/js/*.js';
vardistPath='./dist/';
//編譯less
gulp.task('lessCompile',function(){
gulp.src([lessMainPath])
.pipe(plumber({errorHandler:notify.onError('Error:<%=error.message%>')}))
.pipe(less())
.pipe(gulp.dest(lessDist));
});
//監控less文件變化
gulp.task('watchLess',function(){
gulp.watch(lessPath,['lessCompile']);
});
//css合並壓縮加前綴
gulp.task('handleCss',function(){
returngulp.src(cssPath)
.pipe(plumber({errorHandler:notify.onError('Error:<%=error.message%>')}))
.pipe(concat('app.css'))
.pipe(autoprefixer({
browsers:['last5versions','Android>=4.0'],
cascade:true,
remove:false
}))
.pipe(gulp.dest(distPath))
.pipe(minifycss())
.pipe(rename('app.min.css'))
.pipe(gulp.dest(distPath));
});
//監控css文件變化
gulp.task('watchCss',function(){
gulp.watch(cssPath,['handleCss']);
});

⑷ 如何將hbuider的less和css文件同步

用編譯軟體。這里推薦一個使用過的Koala(考拉) ，屬於less和sass編譯器。
將css目錄文件直接拖到編譯器就好了，之後在HBuilder里的less文件中編輯完之後保存，右角就會有koala同步到css文件的成功提示。

⑸ 現在sass軟體有什麼好做的

1、安裝sass

1.安裝ruby

因為sass是用ruby語言寫的，所以需要安裝ruby環境
打開安裝包去安裝ruby，記住要勾選下面選項來配置環境路徑

Add Ruby executables to your PATH
安裝完成之後繼續下一步操作

2.安裝sass

在cmd里通過gem安裝sass

gem是ruby的包管理工具，類似於nodejs 的npm

gem install sass1

這個時候如果不翻牆的話是會出問題的，因為：
由於國內網路原因（你懂的），導致rubygems.org存放在 Amazon S3 上面的資源文件間歇性連接失敗。這時候我們可以通過gem sources命令來配置源，先移除默認的https://rubygems.org源，然後添加淘寶的源https://ruby.taobao.org/，然後查看下當前使用的源是哪個，如果是淘寶的，則表示可以輸入sass安裝命令gem install sass了

$ gem sources --remove https://rubygems.org/

$ gem sources -a https://ruby.taobao.org/ 【如果你系統不支持https，請將淘寶源更換成：gem sources -a http://gems.ruby-china.org】

$ gem sources -l

*** CURRENT SOURCES ***

https://ruby.taobao.org

# 請確保只有 ruby.taobao.org

$ gem install sass1234567

安裝好之後執行sass -v就可以看到sass的版本了
實在實在不行，就安裝離線文件吧,但是失敗率也很高
gem install ./…/sass-3.4.22.gem

2、編譯sass文件的方式

1.命令行編譯

可以通過cmd命令行執行sass方法來編譯
例如：

sass scss/a.scss:css/a.css1

sass 後面寫要編譯的sass文件的路徑，『：』後面寫的是
要輸出的目錄及名字

需要注意的是：必須有這個文件夾才能在裡面生成css
這樣的話寫一句執行一次編譯一次有些太麻煩
可以開啟一個watch來監聽文件變化來進行編譯
sass --watch scss:css1

–watch表示要監聽：前後的兩個都是文件夾，表示scss文件夾的文件改變就編譯到css文件夾

2.其他方式編譯

除了命令行工具其實還可以用考拉、gulp等工具進行編譯，但是ruby和sass是必須要安裝的
考拉的方式就不多做介紹了，大家i自己去看一下
gulp的話呢是需要gulp-sass的模塊來編譯，使用方式類似於gulp-less
這里是網址，點擊查看

3、sass四種風格

sass編譯的格式

sass編譯輸出的css有四種格式

nested 嵌套
compact 緊湊
expanded 擴展
compressed 壓縮

這些樣式會影響輸出的css的格式
簡單介紹一下：
css默認輸出的嵌套

font-size:15px;

list-style:none;

}

}123456

—》

ul {

font-size: 15px; }

ul li {

list-style: none; }1234

緊湊compact
在編譯的時候需要執行

sass --watch scss:css --style compact1

這個時候輸出的代碼就是

ul { font-size: 15px; }

ul li { list-style: none; padding: 5px; }12

compressed 壓縮
在編譯的時候需要執行

sass --watch scss:css --style compressed1

—>

ul{font-size:15px}ul li{list-style:none;animation:all 0.4s}1

expanded 擴展
更像是平時寫的css一樣
在編譯的時候需要執行

sass --watch scss:css --style expanded1

—>

ul {

font-size: 15px;

}

ul li {

list-style: none;

animation: all 0.3s;

}1234567

compressed 壓縮
更像是平時寫的css一樣
在編譯的時候需要執行

sass --watch scss:css --style compressed1

—>

.a{width:100px;height:100px;border:1px solid red}.a .b{background:red}1

4、sass與scss

sass的兩個語法版本

sass一開始用的是一種縮進式的語法格式
採用這種格式文件的後綴名是.sass
在sass3.0版本後我們常用的是sassy css語法，擴展名是.scss，更接近與css語法

兩個版本的區別

後綴名不同 .sass和.scss
語法不同，請看下面
新版：
/*新版本

多行文本注釋*/

//新版本

//單行文本注釋

@import "base";

@mixin alert{

color:red;

background:blue;

}

.alert-warning{

@include alert;

}

font-size:15px;

list-style:none;

}

}123456789101112131415161718

老版本：

/*新版本

多行文本注釋

//新版本

單行文本注釋

@import "base"

=alert

color:red

background:blue

.alert-warning

+alert

font-size:15px

list-style:none1234567891011121314

5、變數、嵌套、混合、繼承拓展

變數的意義

在sass里我們可以定義多個變數來存放顏色、邊框等等的樣式，這樣就可以在下面想要使用樣式的時候使用變數了
這樣的優點就是便於維護，更改方便

變數的使用

可以通過$來定義變數，在變數名字中可以使用-和_來作為連接，並且-和_是可以互通的，就是用起來一模一樣。
變數的值可以是字元串、數字、顏色等等，在變數里還可以使用其他變數，使用的時候直接寫變數名就好了
例如

$primary-color:#ff6600;

$primary-border:1px solid $primary_color;

div.box{

background:$primary-color;

}

h1.page-header{

border:$primary-border;

}12345678

—》

div.box {

background: #ff6600;

}

h1.page-header {

border: 1px solid #ff6600;

}123456

嵌套的使用

合理的使用嵌套語法，可以使我們編寫代碼更為快捷
假設我們想寫這樣的css：

.nav {

height: 100px;

}

.nav ul {

margin: 0;

}

.nav ul li {

float: left;

list-style: none;

padding: 5px;

}1234567891011

在sass里我們可以這樣寫

.nav{

height:100px;

margin:0;

li {

float:left;

list-style:none;

padding:5px;

}

}

}1234567891011

大家會發現，寫出來的代碼父和子之間都有空格隔開，如果我們需要給a加上偽類的話我們這樣寫

.nav{

height:100px;

color:#fff;

:hover{

color:#ff6600;

}

}

}123456789

在裡面就會出現這樣的情況

.nav a :hover {

color: #ff6600;

}123

我們發現在a和:hover之間有了空格，這樣是不好的，所以我們需要在寫的時候在：hover之前把a加上，這樣就需要用到在之類里引用父類選擇器的方式，我們可以用&符號代替父類
例如：

.nav{

height:100px;

color:#fff;

&:hover{

color:#ff6600;

}

}

}123456789

這樣就好了，下面來個完整的代碼：

.nav{

height:100px;

margin:0;

float:left;

list-style:none;

padding:5px;

}

display:block;

color:#000;

&:hover{

color:#f60;

background:red;

}

}

}

& &-text{

font-size:15px;

}

}

-----》

.nav {

height: 100px;

}

.nav ul {

margin: 0;

}

.nav ul li {

float: left;

list-style: none;

padding: 5px;

}

.nav ul a {

display: block;

color: #000;

}

.nav ul a:hover {

color: #f60;

background: red;

}

.nav .nav-text {

font-size: 15px;

}

嵌套屬性

我們可以把一些個復合屬性的子屬性來嵌套編寫，加快編寫速度，例如

body{

font:{

family:Helvitica;

size:15px;

weight:bold;

}

}

.nav{

border:1px solid red{

left:none;

right:none;

}

}

.page-next{

transition:{

property:all;

delay:2s;

}

}12345678910111213141516171819

-----》

body {

font-family: Helvitica;

font-size: 15px;

font-weight: bold;

}

.nav {

border: 1px solid red;

border-left: none;

border-right: none;

}

.page-next {

transition-property: all;

transition-delay: 2s;

}1234567891011121314

mixin 混合

你可以把它想像成一個有名字的定義好的樣式
每一個mixin都有自己的名字，類似於js里的函數定義方法如下

@mixin 名字(參數1，參數2...){

}123

使用方法是在其他選擇器css樣式里通過@include引入，其實就相當於將mixin里的代碼寫入到這個選擇器的css里，如下：

@mixin alert {

color:#f60;

background-color:#f60;

color:pink;

}

&-a{

color:red;

}

}

.alert-warning{

@include alert;

}12345678910111213

-----》

.alert-warning {

color: #f60;

background-color: #f60;

}

.alert-warning a {

color: pink;

}

.alert-warning-a {

color: red;

}12345678910

剛才是沒有參數的mixin，mixin也可以擁有參數，需要注意的是：

形參的名字前要加$
傳參的時候只寫值的話要按順序傳
傳參的時候不想按順序的話需要加上形參名字
例如：
@mixin alert($color,$background) {

color:$color;

background-color:$background;

color:darken($color,10%);//把顏色加深百分之十

}

}

.alert-warning{

@include alert(red,blue);

}

.alert-info{

@include alert($background:red,$color:blue);

}12345678910111213

------》

.alert-warning {

color: red;

background-color: blue;

}

.alert-warning a {

color: #cc0000;

}

.alert-info {

color: blue;

background-color: red;

}

.alert-info a {

color: #0000cc;

}1234567891011121314

繼承拓展 extend

如果我們有一個選擇器想要擁有另一個選擇所有的東西，不管是樣式還是子元素等等，可以使用@extend來繼承
大家需要注意的是，++b繼承a的時候，a的子元素設置了樣式，也會給b的子元素設置樣式++，達到完全一樣的情況，例如：

.alert {

padding:5px;

}

.alert a {

font:{

weight:bold;

size:15px;

}

}

.alert-info {

@extend .alert;

backgournd:skyblue;

}12345678910111213

----》

.alert, .alert-info {

padding: 5px;

}

.alert a, .alert-info a {

font-weight: bold;

font-size: 15px;

}

.alert-info {

backgournd: skyblue;

}12345678910

partials

在以前咱們編寫css的時候，一個css引入另一個css需要使用@import，其實這是不好的，會多發一次http請求，影響咱們站點的響應速度。
在sass里，咱們可以把小的sass文件分出去，叫做partials，在某個sass里通過@import 『partials名』去引入，注意路徑喲，這樣的話就可以把partials里的代碼引到咱們大的sass里一起編譯

需要注意的是 partials的文件名前要加_

_base.sass :

body{

margin:0;

padding:0;

}1234

style.sass :

@import "base";

.alert {

padding:5px;

}

.alert a {

font:{

weight:bold;

size:15px;

}

}

.alert-info {

@extend .alert;

backgournd:skyblue;

}1234567891011121314

----------->

body {

margin: 0;

padding: 0;

}

.alert, .alert-info {

padding: 5px;

}

.alert a, .alert-info a {

font-weight: bold;

font-size: 15px;

}

.alert-info {

backgournd: skyblue;

}1234567891011121314

這樣的話我們就可以把模塊化的思想引入到sass里了

comment注釋

sass里的注釋有三種

多行注釋
單行注釋
強制注釋
多行注釋：壓縮後不會出現在css里 /*/
單行注釋: 不會出現在css里 //
強制注釋：壓縮後也會出現在css里 /! */

6、數據類型與函數

數據類型

在sass里有數字、字元串、列表、顏色等類型
在cmd里輸入

sass -i1

就會進入到交互模式，輸入的計算可以馬上得到結果
type-of()可以用來得到數據類型，如：

type-of(5) -> number1

注意數字類型的可以包含單位，如：

type-of(5px) -> number1

字元串類型：

type-of(hello) -> string

type-of('hello') -> string12

list類型：

type-of(1px solid red) -> list

type-of(5px 10px) -> list12

顏色：

type-of(red) -> color

type-of(rgb(255,0,0) -> color

type-of(#333) -> color123

number 計算

2+9 -》10

2*8 -》16

(8/2) ->4 //除法要寫括弧123

也可以包含單位

5px + 5px -> 10px

5px -2 ->3px

5px *2 ->10px

5px * 2px ->10px*px //這樣就不對了喲

（10px/2px） -> 5//除法單位取消

3+2*5px->13px123456

好吧，都是一些小學的數學題，很簡單對吧

處理數字的函數

絕對值

abs(10) -> 10;

abs(10px) -> 10px;

abs(-10px) -> 10px;123

四捨五入相關

round(3.4)->3 //四捨五入

round(3.6)->4

ceil(3.2)->4 //向上取整

ceil(3.6)->4

floor(3.2)->3 //向下取整

floor(3.9)->3

percentage(600px/1000px) ->65% //百分之

min(1,2,3) -> 1 //最小值

max(2,3,4,5) -> 5 //最大值123456789

字元串相關

//帶引號和不帶引號的字元串想加為帶引號的字元串

"a" + b ->"ab"

a + "b" ->"ab"

//字元串+數字

"ab" + 1 ->"ab1"

//字元串 - 和 / 字元串

"a" - b ->"a-b"

"a" / b ->"a/b"

//注意字元串不能相乘123456789

字元串函數

大寫：

$word:"hello";

to-upper-case($word) -> "HELLO"12

小寫：

$word:"Hello";

to-lower-case($word) -> "hello"12

得到length：

$word:"Hello";

str-length($word) -> 512

得到字元串在字元串里的位置：

$word:"Hello";

str-index($word,"el") -> 212

字元串中插入字元串：

$word:"Hello";

str-insert($word,"aa",2) -> "Haaello"12

顏色相關

在sass里除了關鍵字、十六進制、rgb和rgba之外還有一種顏色是HSL
分別表示的是色相 0-360（deg）飽和度 0-100% 明度 0-100%
例如：

body {

background-color:hsl(0,100%,50%);

}

-》

body {

background-color: red;

}1234567

body {

background-color:hsl(60,100%,50%);

}

-》

body {

background-color: yellow;

}1234567

也可以有透明喲

body {

background-color:hsl(60,100%,50%，0.5);

}

-》

body {

background-color: rgba(255,255,0,0.5);

}1234567

顏色函數

lighten函數和darken函數可以把顏色加深或減淡，即調整明度，第一個參數為顏色，第二個參數為百分比，例如：

$color:#ff0000;

$light-color:lighten($color,30%);

$dark-color:darken($color,30%);

color:$color;

background:$light-color;

border-color:$dark-color;

}12345678

—》

.a {

color: #ff0000;

background: #ff9999;

border-color: #660000;

}12345

saturate和desaturate函數可以調整顏色的純度

$color:hsl(0,50%,50%);

$saturate-color:saturate($color,50%);

$desaturate-color:desaturate($color,30%);

color:$color;

background:$saturate-color;

border-color:$desaturate-color;

}12345678

–》

.a {

color: #bf4040;

background: red;

border-color: #996666;

}12345

用transparentize來讓顏色更透明
用opatify來讓顏色更不透明

$color:rgba(255,0,0,0.5);

$opacify-color:opacify($color,0.3);

$transparentize-color:transparentize($color,0.3);

color:$color;

background:$opacify-color;

border-color:$transparentize-color;

}12345678

—》

.a {

color: rgba(255, 0, 0, 0.5);

background: rgba(255, 0, 0, 0.8);

border-color: rgba(255, 0, 0, 0.2);

}12345

列表類型

在sass里，用空格或者逗號隔開的值就是列表類型
如：

1px solid red

Courier,microsoft yahei12

列表函數

sass里的列表類似與數組

獲取列表的長度

length(5px 10x) 2

獲取列表中的第幾個元素

nth(5px 10px,2) 10px

獲取一個元素在一個列表裡的下標

index(1px solid red,solid) 2

給列表裡加入新的元素

append(5px 10px,5px) 5px 10px 5px

連接兩個列表

join(5px 10px,5px 0) 5px 10px 5px 012345678910

map類型

sass里的map類型類似與js里的object

$map:(key1:value1,key2:value2,key3:value3);1

map 函數

//定義一個map

$color:(light:#ffffff,dark:#000000);

//獲取map 的length

length($color) ->2

//得到map里key對應的值

map-get($color,dark) ->#000000

獲取map里的所有鍵的列表

map-keys($color) ->("light","dark") //列表類型

獲取map里的所有值的列表

map-values($color) -> ("#ffffff","#000000") //列表類型

判斷map里是否含有這個key

map-has-key($color,light) ->true

給map里添加鍵值對

map-merge($color,(light-gray:#cccccc))

->(light:#ffffff,dark:#000000,light-gray:#cccccc)

移除map里的某個鍵值對

map-remove($colors,light) ->(dark:#000000,light-gray:#cccccc)1234567891011121314151617

boolean類型

在sass里通過> < 比較得到的值就是布爾值 true 和false

5px>3px -> true

5px<2px -> false12

在sass里也可以有或且非
且：

(5px > 3px) and (5px < 2px) -> false

(5px > 3px) and (5px > 2px) -> true12

或：

(5px > 3px) or (5px < 2px) -> true

(5px < 3px) and (5px > 2px) -> false12

非：

not(5px>3px) -> false1

interpolation

在sass里可以通過interpolation的方式來在變數名和屬性名上拼接變數值，例如

$name:"info";

$attr:"border";

.alert-#{$name}{

#{$attr}-color:red;

}12345

---->

.alert-info {

border-color: red;

}123

7、分支結構、循環結構、函數

分支結構

在sass里，可以使用@if讓我們根據一些條件來應用特定的樣式
結構：

@if 條件 {

}123

如果條件為真的話，括弧里的代碼就會釋放出來
例如：

$use-refixes:true;

.rounded{

@if $use-refixes {

-webkit-border-radius:5px;

-moz-border-radius:5px;

-ms-border-radius:5px;

-o-border-radius:5px;

}

border-radius:5px;

}12345678910

—>

.rounded {

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

-ms-border-radius: 5px;

-o-border-radius: 5px;

border-radius: 5px;

}1234567

如果是另外一種情況

$use-refixes:false;1

—》

.rounded {

border-radius: 5px;

}123

if else在sass里的寫法是：

body{

@if $theme == dark {

background:black;

} @else if $theme == light {

background:white;

} @else {

background:gray;

}

}123456789

for循環

在sass里的for循環是這樣的

@for $var form <開始值> through <結束值> {

}123

還有一種是

@for $var form <開始值> to <結束值> {

}123

注意，開始值和結束值的關系可以是升序也可以是倒序，但是每次只能+1或者-1
這兩種有什麼區別呢？
區別就是 from 1 to 4 的話是執行三次，i的變化是 1 2 3
from 1 through 4 的話是執行四次，i的變化是 1 2 3 4
如：
from to

$columns:4;

@for $i from 1 to $columns{

.col-#{$i}{

width:100% / $columns * $i;

}

}123456

—》

.col-1 {

width: 25%;

}

.col-2 {

width: 50%;

}

.col-3 {

width: 75%;

}123456789

from through

$columns:4;

@for $i from 1 through $columns{

.col-#{$i}{

width:100% / $columns * $i;

}

}123456

—>

.col-1 {

width: 25%;

}

.col-2 {

width: 50%;

}

.col-3 {

width: 75%;

}

.col-4 {

width: 100%;

}123456789101112

each 遍歷list類型

在sass里可以利用each方法來遍歷咱們的list類型的數據
list類型在js里類似於數組，那麼each類似於for in遍歷，結構如下：

@each $item in $list{

}123

例如：

$colors:success error warning;

$map:(success:green,warning:yellow,error:red);

@each $color in $colors{

.bg-#{$color}{

background:map-get($map,$color);

}

}1234567

—>

.bg-success {

background: green;

}

.bg-error {

background: red;

}

.bg-warning {

background: yellow;

}123456789

@while 循環

在sass里，擁有@while循環，比@for會更好用一些,@for循環只能從一個數到另一個數變化之間執行，每次變化都是1，while設置循環結構的話更為靈活；
結構：

@while 條件{

}123

eq：

$i:6;

@while $i>0{

.item-#{$i}{

width:$i*5px;

}

$i:$i - 2;

}1234567

注意：$i - 2 需要用空格隔開喲
---------》

.item-6 {

width: 30px;

}

.item-4 {

width: 20px;

}

.item-2 {

width: 10px;

}123456789

自定義函數

在sass里也可以定義函數，並且也可以有返回值
結構：

@function 名稱 (參數1，參數2){

@return ...

}123

例如，我們做一個返回map里key對應的值的函數：

$colors:(light:#ffffff,dark:#000000,gray:#555555);

@function color($key){

@return map-get($colors,$key);

}

body{

background:color(light);

color:color(dark);

border-color:color(gray);

}123456789

—》

body {

background: #ffffff;

color: #000000;

border-color: #555555;

}

⑹ 大學生怎麼全面地學習前端開發

第1階段
前端核心基礎
第2階段
HTML5 + CSS3 + 移動端核心
第3階段
移動端
第4階段
伺服器端
第5階段
JavaScript高級
第6階段
前端必備
第7階段
高級框架
第8階段
小程序

⑺ 安裝完sass-loader載入器解析後怎麼將scss文件編譯成css

比如我使用webpack，那麼我打包的時候，編譯器就會幫我編譯好了。
LESS同理。

⑻ webstorm怎麼把less文件編譯成css

在webstorm里可以直接新建style sheet 文件呀，這個不就是CSS格式文件嗎。為什麼要用less文件？

⑼ 如何在CSS中定義小圖片把圖片編譯成代碼

這算是一種圖片路徑的新寫法。將圖片進行編碼，然後存在文檔中。
我先解釋一下各自含義：
data: ----獲取數據類型名稱
image/gif; -----指數據類型名稱
base64 -----指編碼模式
AAAAA ------指編碼以後的結果。

background-image: url(data:image/gif;base64,AAAA)這句話的意思總體就是「獲取數據類型是image gif文件，編碼採用ASCII 字元，ASCII編碼內容是『AAAA』」

我知道你清楚沒。這實際就是一種新寫法。原理和以往不同。
以往的圖片路徑寫法是：
background-img:url(../image/xxx.gif)
圖片需要載入伺服器指定路徑下的對應gif文件。
新寫法就是：
background-image: url(data:image/gif;base64,AAAA)
圖片本身就已經以ASCII的形式存在了文檔中，只需要瀏覽器進行編譯就可以了。

新寫法將圖片寫入文檔中，可以減少客戶端對伺服器的請求。
換句話講，原來我們要載入圖片，是從伺服器下載。
現在瀏覽器直接把那一串ASCII按照你的文件類型進行編譯就可以出來結果了。

但是也會有問題
ie8貌似不兼容。
具體LZ可以再研究研究

⑽ 如何使用bootstrap 的css

到bootstrap官方網站下載，對於我們開發者來說，直接下載編譯和壓縮後的CSS、JavaScript文件，另外還包含字體文件，但是不包含文檔和源碼文件。打開解壓包之後可以發現包含三個文件夾 css、fonts、js。這是最基本的Bootstrap組織形式：未壓縮版的文件可以在任意web項目中直接使用。我們提供了壓縮(bootstrap.min.*)與未壓縮 (bootstrap.*)的CSS和JS文件。字體圖標文件來自於Glyphicons

所有Bootstrap插件都依賴jQuery。而且在正式的項目當中我們推薦使用壓縮之後的版本，因為它的體積很小，到官網下載jQuery支持，如圖：

將下載後的就jQuery放到bootstrap中的js目錄下，如圖：

在bootstrap的根目錄下新建一個demo.html文件，（注意，必須在根目錄下面新建，因為後面的步驟中要將bootstrap框架中的css和js文件鏈接到創建的demo中）

編輯demo.html文件，添加對bootstrap框架中css和js的引用，內容如下，圖片有注釋說明，這樣，我們就基本上建立了對bootstrap框架的基本使用架構

源碼：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>無標題文檔</title>

<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">



</head>

<body>

<script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>

</body>
</html>
另外，bootstrap官方提供了鏈接服務，永久免費，即使你不下載bootstrap框架文件到本地，也可以直接在html中使用，使用下面這段代碼：
<link href="http://libs..com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs..com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs..com/bootstrap/3.0.3/js/bootstrap.min.js"></script>

閱讀全文

熱點內容

sql創建鏈接發布：2025-07-08 00:08:38 瀏覽：396

ftp上傳中斷發布：2025-07-08 00:08:37 瀏覽：639

linux雲計算課程發布：2025-07-08 00:07:23 瀏覽：21

安卓網易雲怎麼發布歌曲發布：2025-07-07 23:42:29 瀏覽：625

安卓內存讀取腳本發布：2025-07-07 23:42:19 瀏覽：870

python27漢化發布：2025-07-07 23:42:18 瀏覽：720

源碼鎖屏發布：2025-07-07 23:26:52 瀏覽：941

手機版編程軟體發布：2025-07-07 22:57:22 瀏覽：121

linux下執行sh腳本發布：2025-07-07 22:49:00 瀏覽：127

雲盤怎麼存儲資料發布：2025-07-07 22:49:00 瀏覽：915

考拉如何編譯css

與考拉如何編譯css相關的資訊