考拉如何编译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>

阅读全文

热点内容

oracle测试sql 发布：2025-07-08 03:16:54 浏览：972

php壁纸源码发布：2025-07-08 03:04:26 浏览：319

android应用层发布：2025-07-08 02:42:32 浏览：301

大唐存储销量发布：2025-07-08 02:41:11 浏览：582

脚本怎么打开发布：2025-07-08 02:41:06 浏览：822

贵州电信iPtv升级服务器地址发布：2025-07-08 02:38:48 浏览：412

电脑怎么链接本地服务器发布：2025-07-08 02:34:22 浏览：147

android调试webview 发布：2025-07-08 02:26:28 浏览：358

压缩袋鞋子发布：2025-07-08 02:21:30 浏览：752

为什么安卓打吃鸡感觉有延迟发布：2025-07-08 02:09:32 浏览：168

考拉如何编译css

与考拉如何编译css相关的资讯