您当前的位置: 首页 > 前端教程 > CSS教程 > CSS入门语法,CSS语法

CSS入门语法,CSS语法

作者:guanchaofeng 来源:本站整理 发布时间: 2009-03-22 21:29 点击:
基本语法 一个样式(Style)的语法由三部分构成:Selector(中文叫选择器有点怪怪的,就用英文吧),属性(Property),属性值(Value)。 selector {property: value} 举个例子,下面的代码p就是selector,color就是属性,blue就是属性值。 p {color:blue} HTML中所

CSS入门语法,CSS语法

  基本语法
  一个样式(Style)的语法由三部分构成:Selector(中文叫选择器有点怪怪的,就用英文吧),属性(Property),属性值(Value)。
  
  selector {property: value}
  举个例子,下面的代码p就是selector,color就是属性,blue就是属性值。
  
  p {color:blue}
  HTML中所有的Tag都可以作为selector。
  
  注:如果你想为Style加多个属性,在两个属性之间要用分号加以分隔。下面的Style就包含2个属性,一个是对齐方式居中,一个字体颜色为红,当中用分号分隔开。
  
  p {text-align:center;color:red}
  为了提高Style代码的可读性,你也可以分行写:
  
  p
  {
  text-align: center;
  color: black;
  font-family: arial
  }
  组合(Grouping)
  你也可以将相同的属性和属性值赋予多个Selector。Selector之间用逗号分隔。
  
  h1,h2,h3,h4,h5,h6
  {
  color: red
  }
  上面的例子是将所有正文标题(<h1>到<h6>)的字体颜色都变成红色。
  
  Class Selector
  利用Class Selector,你可以用同样的HTML Tag构成不同的样式。比如说,你希望段落<p>有两种样式,一种是居中对齐,一种是居右对齐。你就可以写如下样式:
  
  p.right {text-align:right}
  p.center {text-align:center}
  其中right和center就是两个class。然后你就可以引用这两个class,示例代码如下:
  
  <p class="center">这一段居中显示。</p>
  <p class="right">这一段是居右显示。</p>
  演示示例
  
  你也可以不用HTML Tag,直接用.加上Class名称作为一个Selector。示例代码如下:
  
  .center {text-align: center}
  这种通用的Class Selector就没有Tag的局限性,可以用于不同的Tag。比如:
  
  <h1 class = "center">这个标题居中显示。</h1>
  <p class = "center">这个段落居中显示。</p>
  演示示例
  
  Contextual Selector
  你可以为嵌入其它Tag的Tag定义样式,示例代码如下:
  
  p em{color: red}
  Em这个Tag嵌套在P里面。p em就叫做Contextual Selector,定义嵌套于P里的Em的样式。这个例子表示,在P里面的用Em这个Tag标记的字体颜色是红色。
  
  演示示例
  
  CSS注释
  为了方便你自己或者他人日后更好地理解你的CSS代码,你可以写CSS代码注释。CSS代码注释以/*开头,以*/结束。
  
  /* 段落样式 */
  p
  {
  text-align: center;
  /* 居中显示 */
  color: black;
  font-family: arial
  }

分享到:
本文"CSS入门语法,CSS语法"由远航站长收集整理而来,仅供大家学习与参考使用。更多网站制作教程尽在远航站长站。
顶一下
(0)
0%
踩一下
(0)
0%
[点击 次] [返回上一页] [打印]
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 密码: 验证码:
关于本站 - 联系我们 - 网站声明 - 友情连接- 网站地图 - 站点地图 - 返回顶部
Copyright © 2007-2013 www.yhzhan.com(远航站长). All Rights Reserved .
远航站长:为中小站长提供最佳的学习与交流平台,提供网页制作与网站编程等各类网站制作教程.
官方QQ:445490277 网站群:26680406 网站备案号:豫ICP备07500620号-4