您的位置：首页 > Web前端 > CSS

CSS基础语法

2014-05-03 22:43 337 查看
下面列出一些基本的css语法规则和数据类型

1. 字符和大小写

css本身对大小写不敏感，但是如果与 HTML 文档一起工作的话，class 和 id 名称对大小写是敏感的，因为那已经超出了css的控制范围。

css标示符（包括选择器中的元素名、类名、ID）只能包含字符[0-9a-zA-Z]以及ISO 10646字符编号U+00A0及以上，加上连字符- 和下划线 _。它们不能以连字符、下划线、数字开头。它们还可以包含转义字符加任何ISO 10646字符作为一个数字编码。

反斜杠的作用：

在字符串中，反斜杠后接一个新行将被忽略。例如，"hello \ <回车> world" 等同与"hello world"。

它取消了特殊的CSS字符的含义。例如，"\""是一个包含双引号的字符串。
反斜杠转义允许作者引用一些在文档中不易输入的字符。

2. css规则

css规则由两个主要的部分构成：选择器，声明块。声明块以左花括号开始（{），以与之匹配的右花括号（{）结束。其间是零个或多个以分号（;）分割的声明。每个声明由一个属性和一个值组成，它们由冒号（：）分开，中间可以有空格。

格式如下：

selector {property1: value1; property2: value2; ...}

如果客户端无法解析某个选择器，将会忽略这条规则。例如，由于无法解析"&”符号， h3, h4 & h5 {color: red } 这条规则将被忽视。

<html>
  <head>
    <style type="text/css">
    h1 {color: red }
    h3, h4 & h5 {color: red }
    </style>
  </head>
  <body>
    <h1>h1</h1>
    <h3>h3</h3>
    <h4>h4</h4>
    <h5>h5</h5>
  </body>
</html>




如果客户端无法解析某条声明的属性名或属性值，将会忽视这条声明。例如，p { color: blue; font-vendor: any; font-variant: small-caps }，包含无效属性font-vendor的声明将被忽视，j结果等同于p { color: blue; font-variant: small-caps }。

<html>
  <head>
    <style type="text/css">
    p { color: blue; font-vendor: any; font-variant: small-caps }，
    </style>
  </head>
  <body>
    <p>hello world</p>
  </body>
</html>




3. 数据类型

css基本数据类型有很多，包括整型和实数型、长度、百分比等，下面只列出几个最常用的。

长度。

有两种类型的长度类型：绝对的和相对的。

相对长度单位根据另一个长度属性来指定长度值，包括

em：相关字体的"font-size"，即字高。任意浏览器的默认字体高都是16px。所以未经调整的浏览器都符合：1em=16px。但是em并不是固定的，它会继承父级元素的字体大小。即如果父元素指定字体大小为20px，那么其子元素的如果指定字体大小为1.5em，最后其真实的大小就是20px×1.5=30px，那么如果它下一级的元素如果也指定字体大小为1.5em，那么最后它实际的大小就是30px×1.5=45px。

<html>
  <head>
    <style type="text/css">
    #fir {font-size:20px}
    #sec {font-size:1.5em}
    #thr {font-size:1.5em}
    </style>
  </head>
  <body>
    <div id='fir'>
    hello
      <div id='sec'>
        <p>hello</p>
        <p id='thr'>hello</p>
      </div>
    </div>
  </body>
</html>



ex：相关字体的"x-height"，即该字体下小写字母x的高度。该值与具体字体类型有关，一般为字高的一半。

绝对长度单位有：

in: 英尺 — 1in 等于2.54cm。
cm: 厘米。
mm: 毫米。
pt: 点 — css使用的点等于1in的 1/72。

pc: 十二点活字 — 1pc 等于12pt。
px: 像素点 — 1px 等于 0.75pt。

百分比

百分比总是相对于另外一个值。这个值可以是同一元素的另外一个属性的值，或是其前辈元素的属性值，或者是格式化上下文的一个值（如包含块的宽度，包含块的概念将在后面介绍）。

注意：子元素（通常）继承其父元素的计算值，即相对值（如百分比、em等）经过计算后得到的具体数值。下例中，p元素的'line-height'相对值为200%，计算值为2×16px=32px，则其子元素会继承32px的值，而不是继承百分比值200%使得行高变为2×32px=64px。设想如果继承了百分比值的话，那么每一层的子元素都会将line-height设置成父元素的2倍，那不乱了套了。



颜色

颜色可以是一个关键字或是RGB数值。以下几种写法都可以得到红色

p { color : red; }

p { color : #ff0000; }

p { color : #f00; }

p { color :
rgb(255,0,0)
; }

p { color :
rgb(100%,0%,0%)
; }

注意：#f00通过重复数字转化成#ff0000。使用rgb表示时，0%中的%不可以省略。

4. 继承

上一节的百分比数值中已经提到了继承的概念。简单的说，继承就是子元素从父元素继承某些属性。比如color是可以被继承的。

<html>
  <head>
    <style type="text/css">
    p {color:red;}
    </style>
  </head>
  <body>
    <p style='color:red;'>
    hello world
    <em>em hello world</em>
    hello world
    </p>
  </body>
</html>



上图中，子元素em继承了父元素p的color属性。

有的属性却不能被继承，例如border。

<html>
  <head>
    <style type="text/css">
    p{border:solid;}
    em.hasbor{border:solid;}
    </style>
  </head>
  <body>
    <p>
    hello world
    <em>em hello world</em>
    <em class='hasbor'>em hello world</em>
    </p>
  </body>
</html>



具体哪些属性可以被继承，这篇博客做总结的挺好 http://www.cnphp.info/css-style-inheritance.html
css样式表属性可以继承的有如下：

azimuth, border-collapse, border-spacing, caption-side, color, cursor, direction, elevation, empty-cells, font-family, font-size, font-style, font-variant, font-weight, font, letter-spacing, line-height, list-style-image, list-style-position, list-style-type,
list-style, orphans, pitch-range, pitch, quotes, richness, speak-header, speaknumeral,speak-punctuation, speak, speechrate, stress, text-align, text-indent, texttransform, visibility, voice-family, volume, whitespace, widows, word-spacing

基本上分为文本相关的

font-family, font-size, font-style,font-variant, font-weight, font, letter-spacing,line-height,text-align, text-indent, texttransform,word-spacing

和列表相关的

list-style-image, list-style-position,list-style-type, list-style

还有color
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航