css语法错误代码，css语法
大家好,今天小编来为大家解答以下的问题，关于css语法错误代码，css语法这个很多人还不知道，现在让我们一起来看看吧！
css预处理器有哪些
CSS(Cascading Style Sheet)被译为级联样式表，做为一名前端从业人员来说，这个专业名词并不陌生，在行业中通常称之为“风格样式表（Style Sheet）”，它主要是用来进行网页风格设计的。通过设立样式表，可以统一地控制HTML（XHTML）中各标签的显示属性。可以使人更能有效的控制Web页面（或Web应用程序）外观，可以精确指定Web元素位置，外观以及创建特殊效果的能力。CSS拥有对网页对象和模型样式编辑能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群有较强的易读性。
就CSS本身而言，对于大多数Web前端从业人员来说就不是问题。学过CSS的人都知道，它不是一种编程语言。你可以用它开发网页样式，但是没法用它编程。换句话说，CSS基本上是设计师的工具，不是程序员的工具。在程序员的眼里，CSS是很头痛的事情，它并不像其它程序语言，比如说PHP、Javascript等等，有自己的变量、常量、条件语句以及一些编程语法，只是一行行单纯的属性描述，写起来相当的费事，而且代码难易组织和维护。
很自然的，有人就开始在想，能不能给CSS像其他程序语言一样，加入一些编程元素，让CSS能像其他程序语言一样可以做一些预定的处理。这样一来，就有了“CSS预处器（CSS Preprocessor）”。
一、什么是CSS预处器
CSS预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。通俗的说，CSS预处理器用一种专门的编程语言，进行Web页面样式设计，然后再编译成正常的CSS文件，以供项目使用。CSS预处理器为CSS增加一些编程的特性，无需考虑浏览器的兼容性问题，例如你可以在CSS中使用变量、简单的逻辑程序、函数等等在编程语言中的一些基本特性，可以让你的CSS更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。
CSS预处理器技术已经非常的成熟，而且也涌现出了很多种不同的CSS预处理器语言，比如说：Sass（SCSS）、LESS、Stylus、Turbine、Swithch CSS、CSS Cacheer、DT CSS等。如此之多的CSS预处理器，那么“我应该选择哪种CSS预处理器？”也相应成了最近网上的一大热门话题，在Linkedin、Twitter、CSS-Trick、知呼以及各大技术论坛上，很多人为此争论不休。相比过计我们对是否应该使用CSS预处理器的话题而言，这已经是很大的进步了。
到目前为止，在众多优秀的CSS预处理器语言中就属Sass、LESS和Stylus最优秀，讨论的也多，对比的也多。本文将分别从他们产生的背景、安装、使用语法、异同等几个对比之处向你介绍这三款CSS预处理器语言。相信前端开发工程师会做出自己的选择——我要选择哪款CSS预处理器。
二、Sass、LESS和Stylus背景介绍
为了能更好的了解这三款流行的CSS预处理器，我们先从其背景入手，简单的了解一下各自的背景信息。
1.Sass背景介绍
Sass是对CSS（层叠样式表）的语法的一种扩充，诞生于2007年，最早也是最成熟的一款CSS预处理器语言，它可以使用变量、常量、嵌套、混入、函数等功能，可以更有效有弹性的写出CSS。Sass最后还是会编译出合法的CSS让浏览器使用，也就是说它本身的语法并不太容易让浏览器识别，因为它不是标准的CSS格式，在它的语法内部可以使用动态变量等，所以它更像一种极简单的动态语言。
其实现在的Sass已经有了两套语法规则：一个依旧是用缩进作为分隔符来区分代码块的；另一套规则和CSS一样采用了大括号（｛｝）作为分隔符。后一种语法规则又名SCSS，在Sass3之后的版本都支持这种语法规则。
2.LESS的背景介绍
2009年开源的一个项目，受Sass的影响较大，但又使用CSS的语法，让大部分开发者和设计师更容易上手。LESS提供了多种方式能平滑的将写好的代码转化成标准的CSS代码，在很多流行的框架和工具中已经能经常看到LESS的身影了（例如Twitter的Bootstrap框架就使用了LESS）。
根据维基百科上的介绍，其实LESS是Alexis Sellier受Sass的影响创建的一个开源项目。当时SASS采用了缩进作为分隔符来区分代码块，而不是CSS中广为使用的大括号（｛｝）。为了让CSS现有的用户使用起来更佳方便，Alexis开发了LESS并提供了类似CSS的书写功能。
3.Stylus背景介绍
Stylus，2010年产生，来自于Node.js社区，主要用来给Node项目进行CSS预处理支持，在此社区之内有一定支持者，在广泛的意义上人气还完全不如Sass和LESS。
Stylus被称为是一种革命性的新语言，提供一个高效、动态、和使用表达方式来生成CSS，以供浏览器使用。Stylus同时支持缩进和CSS常规样式书写规则。
注：Stylus上下载Ruby安装文件（随意选择一个版本），此处选择的是最新版本Ruby1.9.3-p385：
Ruby安装文件下载好后，可以按应用软件安装步骤进行安装Ruby。在安装过程中，个人建议将其安装在C盘下，在安装过程中选择第二个选项，如下图所示：
Ruby安装完成后，在开始菜单中找到新安装的Ruby，并启动Ruby的Command控制面板，如下图所示：
在启动的Ruby命令控制面板中输入下面的命令：
gem install sass
输入上面命令，回车后就会自动安装Sass：
这样Sass就安装成功了，也就可以使用了。
2.LESS的安装
LESS的安装和Sass安装有所不同，他不需要依赖于Ruby环境，就能直接安装使用。不过LESS安装分为两种：客户端和服务器端安装。
a)客户端安装：
我们可以直接在客户端使用“.less”（LESS源文件），只需要在官网载一个Javascript脚本文件主“less.js”，然后在我们需要引入LESS源文件的HTML的<head>中加入如下代码：
<link rel="stylesheet/less" type="text/css" rel="external nofollow" href="文件路径/styles.less"><script src="文件路径/less.js" type="text/javascript"></script>
需要注意的是：在引入“.less”文件中，“link”的“rel”属性要设置为“stylesheet/less”。还有更重要的一点需要注意的是：LESS源文件一定要在“less.js”引入之前引入，这样才能保证LESS源文件正确编译解析。
b)服务器端安装
LESS在服务器端的使用主要是借助于LESS的编译器，将LESS源文件编译生成最终的CSS文件，目前常用的方式是利用node的包管理器（npm）安装LESS，安装成功后就可以在Node环境中对LESS文件进行编译。如此一来，LESS在服务器的安装和Sass的安装有点相似，不同之处是他们需依赖的环境不一样，LESS需要的是Node JS环境，而Sass需要的是Ruby环境，为了让大家能更清晰的知道如何在服务器端安装LESS，此处简单的过一下安装过程（本文演示的是在Window7下的安装方法）。
首先到Node Js的官网下载一个适合Windows系统的安装文件，此处下载的是“node-v0.8.20-x86.msi”：
安装文件下载后，按正常应用程序方法一样安装。安装完成后在开始菜单中启用Node js的Command控制面板：
在启动的Node Js的Command控制面板直接输入下面的命令：
$ npm install less
这样就安装完LESS的编译命令，可以在本地正常编译LESS源文件。如果您想下载最新稳定版本的LESS，还可以尝试在Node JS的Command控制面板输入：
$ npm install less@latest
3.Stylus的安装
Stylus的安装和LESS在服务器端的安装很相似，同样依赖于Node JS的环境，也就是说也要先安装Node Js（如果安装Node JS请参考前面的介绍）。唯一不同的是在Node JS的Command控制面板输入的命令不一样：
$ npm install stylus
然后，就会自动下载安装最新的stylus库：
这样就算是安装完Stylus了，也可以正常使用Stylus。
四、Sass、LESS和Stylus转译成CSS
Sass、LESS和Stylus源文件（除了LESS源文件在客户端下运行之外）都不能直接被浏览器直接识别，这样一来，要正常的使用这些源文件，就需要将其源文件转译成浏览器可以识别的CSS样式文件，这也是使用CSS预处理器很关键的一步，如果这一步不知道如何操作，那么意味着写出来的代码不可用。接下来按同样的方式，分别来看看三者之间是如何将其源文件转译成所需要的CSS样式文件。
1.Sass源文件转译成CSS文件
Sass文件就是普通的文本文件，不过其文件后缀名有两种，一种为“.sass”；另一种为“.scss”。我们一般用“.scss”就好，至于这两种文件扩展名的区别在于“.sass”是Sass语言文件的扩展后缀名，而“.scss”是SCSS语言文件的扩展后缀名，至于Sass和SCSS的详细区别这里不做介绍。你可以简单的理解为他们都是CSS预处理器语言，而且两者功能特性都一样，只是书写规则不同而以。
要转译Sass文件的前提是有文件可转，因此先在项目中创建一个Sass文件，此例中将其命名为“style.scss”，并且将其放在对应的项目样式中，如D盘的“www/workspace/Sass/css”目录下。
启动Ruby的Command控制面板，找到需要转译的Sass文件，如此例此文件放置在D盘的“www/workspace/Sass/css”目录下：
如果仅针对于单文件的转译，需要将“style.scss”转译成“style.css”，只需要在对应的目录下输入下面的命令：
$ sass style.scss style.css
这样原本在D盘的“www/workspace/Sass/css”目录下只有“style.scss”这个文件，现在增加了一个“style.css”文件，而这个CSS文件我们就可以用来调用，他也就是“style.scss”转译出来的样式文件。
当然，我们不可能每保存一次这个Sass文件就来执行一回这个转译命令。那么有没有更好的办法实现呢？回答是肯定的，可以通过下面的监听命令实现，这样一来只要Sass文件做了修改，就会自动更新对应的CSS样式文件。
单文件的监听，只需要在刚才的命令控制面板中输入：
$ sass--watch style.scss:style.css
按下回车键（Enter）,就会看到下面的提示信息：
看到上图所示的提示信息就表示监听成功，这样一来，你只要修改了“style.scss”文件，“style.css”文件就会随着更新变化。
对于一个项目而言，不太可能只有一个CSS样式文件，如果有多个Sass文件需要监听时，就很有必要的组织一下。默认情况之下，我喜欢把所有的Sass文件放在“/css/sass”目录中，而生成的CSS文件则直接放在“/css”目录下。现在我们修改一下项目文件目录结构，在“/css”目录中再创建一个“sass”目录，并找刚才创建的“style.scss”文件移至“/css/sass”目录下。此时监听“css/sass”下的所有Sass文件时，可以在命令面板中输入如下格式的命令：
$ sass--watch sassFileDirectory:cssFileDirectory
在本例中，冒号前面的“sassFileDirectory”是指“/css/sass”下的“sass”目录，冒号后面的“cssFileDirectory”是指“css”目录，对应的命令就是：
$ sass--watch css/sass:css
回车后，同样可以得到提示信息：
除了使用Ruby的Command控制面板转译Sass之外还可以考虑第三方工具，比如说有名的Compass.app和fire.app。
2.LESS文件的转译成CSS文件
LESS文件的转译和Sass文件转译可以说是大同小异，不同之处是LESS在安装的Node JS环境下通过其自己的命令来进行转译。
$ lessc style.less
上面的命令会将编译的CSS传递给stdout，你可以将它保存到一个文件中：
$ lessc style.less> style.css
除了上面的命令转译LESS源文件之外，现在还有很多第三方开发的工具，比较常见的有：SimpleLess、Less.app、LESS编译辅助脚本-LESS2CSS、WinLess和CodeKit.app等，我个人现在常用的是WinLess工具，简单易用，不过在IOS系统下LESS.app和CodeKit.app很好用。
3.Stylus源文件转译成CSS文件
Stylus具有可执行性，因此Stylus能将自身转换成CSS。Stylus可以读取自“stdin”输出到“stdout”，因此Stylus可以像下面转译源文件：
$ stylus–compress<some.styl> some.css
Stylus也像Sass一样，同时接受单个文件和整个目录的转译。例如，一个目录名为“css”将在同一个目录编译并输出“.css”文件。
$ stylus css
下面的命令将输出到“./public/stylesheets”：
$ stylus css–out public/stylesheets
还可以同时转译多个文件：
$ stylus one.styl two.styl
如果你的浏览器安装了Firebug，那么可以使用FireStylus扩展。
$ stylus–firebug<path>
五、Sass、LESS和Stylus的语法
每一种语言都有自己一定的语法规则，CSS预处理器语言也不例外，在真正使用CSS预处器语言之前还有一个不可缺少的知识点，就是对语法的理解。值得庆幸的是，这三款CSS预处理器语言的语法和CSS语法都差不多。
1.Sass语法
Sass3.0版本开始使用的是标准的CSS语法，和SCSS可以说是一样的。这样Sass代码转换成CSS代码变得更容易。默认Sass使用“.scss”扩展名。Sass语法规则可以像CSS那样书写：
/*style.sass新版语法规则*/h1{ color:#936;
background-color:#333;}
正如你所看到的，在Sass样式中，这样的代码是在简单不过的了。
重要的一点是，Sass也同时支持老的语法，老的语法和常规的CSS语法略有不同，他需要严格的语法，任何的缩进和字符的错误都会造成样式的编译错误。Sass可以省略大括号（｛｝）和分号（；），完全依靠严格的缩进和格式化代码，而且文件使用“.sass”扩展名，他的语法类似于：
/*style.sass*/h1
color:#936
background-color:#333
2.LESS语法
LESS是CSS的一种扩展形式，它并没有阉割CSS的功能，而是在现有的CSS语法上，添加了很多额外的功能。就语法规则而言，LESS和Sass一样，都是使用CSS的标准语法，只是LESS的源文件的扩展名是“.less”，其基本语法类似于：
/*style.less*/h1{ color:#963;
background-color:#333;}
3.Stylus语法
Stylus的语法花样多一些，它的文件扩展名是“.styl”，Stylus也接受标准的CSS语法，但是他也像Sass老的语法规则，使用缩进控制，同时Stylus也接受不带大括号（｛｝）和分号的语法，如下所示：
/*style.styl*//*类似于CSS标准语法*/h1{ color:#963;
background-color:#333;}/*省略大括号（｛｝）*/h1
color:#963; background-color:#333;/*省略大括号（｛｝）和分号（;）*/h1
color:#963
background-color:#333
在Stylus样式中，你也可以在同一个样式文件中使用不同的语法规则，下面这样的写法也不会报错：
/*style.styl*/h1{
color#963}
h2
font-size:1.2em
六、Sass、LESS和Stylus特性
这三款CSS预处理器语言具有一些相同的特性，例如：变量、混入、嵌套、函数等。在这一节中，我们依次来对比一下这三款CSS预处理器语言各种特性的异同之处，以及使用方法。
1.变量（Variables）
如果你是一个开发人员，变量应该是你最好朋友之一。在CSS预处理器语言中你也可以声明变量，并在整个样式表中使用。CSS预处理器语言支持任何变量（例如：颜色、数值、文本）。然后你可以在任意地方引用变量。
a)Sass的变量
Sass声明变量必须是“$”开头，后面紧跟变量名和变量值，而且变量名和变量值需要使用冒号（：）分隔开。就像CSS属性设置一样：
/*声明变量*/$mainColor:#963;$siteWidth: 1024px;$borderStyle: dotted;/*调用变量*/|/*转译出来的CSS*/------------------------------------------+------------------------------
body{| body{
color:$mainColor;| color:#963;
border:1px$borderStyle$mainColor;| border:1px dotted#963;
max-width:$siteWidth;| max-width: 1024px;
}|}
b)LESS的变量
LESS样式中声明变量和调用变量和Sass一样，唯一的区别就是变量名前面使用的是“@”字符：
/*声明变量*/@mainColor:#963;@siteWidth: 1024px;@borderStyle: dotted;/*调用变量*/|/*转译出来的CSS*/----------------------------------------+-------------------------------
body{| body{
color:@mainColor;| color:#963;
border:1px@borderStyle@mainColor;| border:1px dotted#963;
max-width:@siteWidth;| max-width:1024px;
}|}
c)Stylus的变量
Stylus样式中声明变量没有任何限定，你可以使用“$”符号开始。结尾的分号（;）可有可无，但变量名和变量值之间的等号（=）是需要的。有一点需要注意的是，如果我们使用“@”符号开头来声明（0.22.4）变量，Stylus会进行编译，但其对应的值并不会赋值给变量。换句话说，在Stylus中不要使用“@”符号开头声明变量。Stylus中调用变量的方法和LESS、Sass是完全相同的。
/*声明变量*/mainColor=#963;siteWidth= 1024px;$borderStyle= dotted;/*调用变量*/|/*转译出来的CSS*/----------------------------------------+--------------------------------
body| body{
color mainColor| color:#963;
border 1px$borderStyle mainColor| border:1px dotted#963
max-width siteWidth| max-width:1024px;
|}
Stylus还有一个独特功能，不需要分配值给变量就可以定义引用属性：
/*水平垂直居中*/|/*转译出来的CSS*/------------------------------------+------------------------------------#logo|#logo{
position absolute| position:absolute;
top 50%| top:50%;
left 50%| left:50%;
width w= 150px| width:150px;
height h= 80px| height:80px;
margin-left-(w/ 2)
邮箱css加载失败怎么办
故障分析：造成css加载失败的原因有很多，学无忧也遇到过，这可能跟你代码出错，浏览器、路径、编码等等都是有关联的。所以在具体情况具体分析。下面看看具体的佳佳方案。
一、网站代码本身问题。
js或css路径。先检查一下你的语法有没有错误。三种方式的使用如果你写的代码没有错误的法应该不会加载错误。可以请专业人士帮你查看分析下代码。
二、路径问题
如果只是在本地进行代码编写和测试出现css价值失败，那么可能是你的保存路径所导致，这个相对路径和绝对路径脱离不了关系。所以检查好你的网站路径恢复即可解决css加载失败。
三、浏览器导致
在Chrome浏览器的错误控制台下看看css文件有没有加载进来，确定已加载的话，检查元素的类名与CSS中定义的类名是否相同。可能局限于ie浏览器，你用谷歌浏览器就会出现错误。所以尝试换个浏览器，然后等会在用，也可能修复故障。
四、编码不对
如果不是上述问题则看一看你的CSS文件的字符集是否和你的调用CSS文件的网页的字符集是否一致，就是charset属性那里。在你使用浏览器进行浏览效果的时候，ie浏览器中菜单栏上有一个“查看--编码”，在查看编码上面UTF-8或者GBK看看是不是同一个编码。可能是编码不一致所造成。
五、浏览器缓存导致
清空缓存，重新加载。
CSS加载通常都是网络加载太慢导致的，
六、网速、邮箱的服务器出问题。
最后可能是网速问题，跟软件没有关系。你换个时间段试一试。或者直接把网线拔了，然后在重新插上试试。至于服务器的问题的话可能性还是比较小，但是也不能排除。比如你的邮箱是网易邮箱，可以反馈到网易客服，客服会给你答复的。
css注释写法正确的是
css注释写法正确的是/*注释语句*/
CSS3的基本语法CSS3的语法非常简单，如下：先写选择器，选择器就是选择页面上的某一个元素。然后在选择器的后面写一个空格，也可以不写空格，但是当你格式化网页代码的时候，选择器后面的空格就会自动被添加上。
然后再写一个大括号对，在键盘上就是字母p后面的两个键。大括号里面就是当前这个选择器的样式的罗列，样式的形式就是—-k:v;k:v;k:v每一个k:v就叫一条样式。k就是属性名，v就是属性的值。
属性名和属性值之间用英文的冒号隔开，冒号后面可以有一个空格，也可以没有空格。每一个k:v和另一个k:v之间，必须用英文的分号隔开。每一个选择器的最后一条样式，是可以不写分号的。如下：CSS的每一条样式，也可以不换行。
当然不换行的写法，也是符合CSS3的语法规范的，只是这样写显得有点凌乱。当然在vscode编辑器里，写css的时候，冒号和分号是自动补全的，基本上也不会出现编写错误。CSS3的注释CSS3的注释是这样写的：
比如：在CSS代码或CSS文件中，按Ctrl+/快捷键，可以快速形成注释。现在我在项目文件夹中创建一个”CSS3基本语法.html”的文件，在里面演示CSS3语法和注释。
好了，文章到这里就结束啦，如果本次分享的css语法错误代码和css语法问题对您有所帮助，还望关注下本站哦！