web学习—css样式表—css基础语法

来源：互联网发布：哪些平台购买的淘宝号编辑：程序博客网时间：2024/04/29 09:11

1、样式表的加载方式：

内联样式：直接以style属性加上要设置的属性值（属性与值之间用“:”隔开）。作为html标签的属性加入到标签中。

内部样式：使用<style>标签直接把css文件中的内容加载到HTML文档内部。即把css内容写到<style>与</style>之间。

但是<style>标签要在<head>标签内部。对于<style>标签用法，稍后再说。

外部样式：使用<link>标签链接到这个样式表文件，已引入到html文档中。对于<link>标签的用法稍后说。

导入样式：在<style>标签中用@import url语句来把样式表导入html文档。

1）、<style>标签：为 HTML 文档定义样式信息。

属性：type属性：（必须）规定样式表的 MIME 类型。值通常为text/css。

media属性：为样式表规定不同的媒介类型。具体用法参见CSS高级教程。

2）、<link>标签：定义文档与外部资源的关系。

属性：href属性：定义被链接文档的位置，值为url。

ref属性：定义当前文档与被链接文档之间的关系。当值为stylesheet时指文档的外部样式表。其他值有用到的可自行查阅。

type属性：被链接文档的 MIME 类型。样式表为：text/css。

media属性：规定被链接文档将显示在什么设备上。只可以写为”all“。

title属性：指定元素名称。

2、样式表的规则。

样式表是由描述样式应用的规则组成的，每一条规则都是由一个选择符和一组声明组成的。如下：

选择符｛声明属性1：属性值1；声明属性2：属性值2；。。。｝

选择符：来指定哪个html标签使用此CSS样式。可以是html标签，类名，id名。

命名规则：以字母开头，由英文字母的大写与小写，数字，连字号，下划线，冒号，句号组成。

三种选择符（我觉得挺难的）：

html标签选择符：比如 <p>标签选择符（代表所有的<p>都使用这个CSS样式），比如：

p{font-size:12px;}

用法：<p>html标签选择符</p>

id选择符：唯一性选择符,就是在名字前增加了一个“#”,id选择符在一个页面中只能出现一次,在整个网站中也最好出

现一次(这样有利于程序员控制此元素，有多个一样名称的元素，就无法分开不好控制了)。比如：

#dreamdured1{color:red;}

用法：<p id="dreamdured1">id选择符</p>

class选择符：多重选择符，就是在名字前增加了一个“.”,class选择符在一个页面中可以出现多次。比如：

.dreamdublue2{color:blue;}

用法：<p class="dreamdured2">class选择符</p>

注意：如果一个html元素使用了两个class选择符,他们之间用空格分开，例如：class="dreamdublue1dreamdublue2"。

声明：由"属性","冒号(:)","属性值"和"分号(;)"组成。最后一个声明的分号可以省略。

注意：当选择符的名字一样,声明是可以组合的；当声明全部一样,选择符的名字也是可以组合的。

3、css文档注释。

在css文件中，只能用“/*“与”*/”来注释。向“//”这样的单行注释是不起作用的。

基础的语法就学这些吧。后边会更详细的学习css的具体用法。现在还有几点补充说明：

1）、CSS是大小写不敏感的,在CSS语法中推荐使用小写。

2）、对于用<link>标签引入css，还有用@import导入样式表，有一定区别需要注意：

引用自：http://www.jb51.net/css/15912.html

1. @import url 机制是不同于link的，link是在加载页面前把css加载完毕，而@import url 则是读取完文件后在加载，所以会出现一开始没有css样

式，闪烁一下出现样式后的页面(网速慢的情况下)。

2. @import 是css2里面的，所以古老的ie5不支持。

                    3. 当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。
                    4. link除了能加载css外还能定义RSS，定义rel连接属性，@import只能加载css。
                  5. @import url(xxx.css) 有最大次数的限制，经测试IE6的最大次数是31次，第32个import及以后的都不能生效。