CSS的语法、类和id选择器
2008-02-05 18:52
204 查看
一.CSS的语法
· 由三部分组成: 一个选择器,一个属性和一个值:
selector {...}{property: value}
选择器是用来定义的HTML元素或标签改变属性,每个属性可以有一个值,属性和值由冒号区分开外面用大括号括起来:
例:body {color: black}
如果值为多个单词则用双引号括起来:
例:p {font-family: "sans serif"}
当指定多个属性,属性之间用分号隔开:
例:p {text-align:center;color:red}
CSS代码可以分行写:
例: p { text-align: center; color: black; font-family: arial }
多个选择器有相同值,可同时进行定义,选择器之间用逗号分隔:
h1,h2,h3,h4,h5,h6 { color: green }
[/code]
二.选择器的类
· 选择器类可以将同一类型HTML元素定义出不同样式。
如:在的文档中有两种不同样式的段落,一种是右对齐,另外是居中的。CSS代码如下
p.right {text-align: right} p.center {text-align: center}
[/code]
如果要完成以上效果,需要对HTML代码也做相应的修改。HTML代码如下
<p class="right"> This paragraph will be right-aligned. </p>
<p class="center"> This paragraph will be center-aligned. </p>
[/code]
注:每个HTML元素只能有一个类属性
· 可以省略标签名称,只用.类名对所有带class="类名"的标签进行定义。例如
CSS代码:
.center {text-align: center}
HTML代码:
<h1 class="center"> This heading will be center-aligned </h1> <p class="center"> This paragraph will also be center-aligned. </p>
以上代码使所有包含class="center"的标签进行同样设置。
注:不要用以数字开头为名称的类,在Mozilla/Firefox中不能正常运作。
三.id选择器
· id选择器可以为标有特定id的HTML元素指定特定的样式。id选择器用#来定义。
如:下面的两个 id 选择器,第一个可以定义元素的颜色为红色,第二个定义元素的颜色为绿色
#red {color:red;} [code]#green{color:green;}[/code]
下面的 HTML 代码中,id 属性为 red 的 p 元素显示为红色,而 id 属性为 green 的 p 元素显示为绿色。
<p [code]id="red">这个段落是红色。</p>
<p
id="green">这个段落是绿色。</p>[/code]
注:id属性只能在每个HTML文档中出现一次。不要用数字开头。
附.注释
· CSS注释的开头为"/*",结束符号为"*/",浏览器会忽略注释。
相关文章推荐
- 1.jQuery基础语法 2.jQuery选择器、操作页面文档元素 3.jqueryDOM操作 4.jqueryCSS操作 5.Jquery事件 6.Jquery动画
- CSS(一)_语法,选择器,创建
- Css基础-id选择器
- html css学习笔记-派生选择器 id选择器 类选择
- CSS语法及选择器
- 【自学笔记】css 类选择器还是 ID 选择器?
- CSS——id 和 class 选择器
- CSS基础语法(二) CSS的9种选择器
- css基础之 id和选择器
- css 类选择器和id选择器
- CSS id 选择器
- css中选择器何时使用id/class
- LHF Objective-C语法(7)id类型、动态判断与选择器
- web前端-CSS id和Class选择器-002
- css基本选择器,id选择器,class选择器,标签选择器,*通配符选择器,逗号 空格 + >
- css学习笔记20160115css语法格式选择器
- css中id选择器和class选择器的区别?
- CSS id 选择器
- css学习——标签选择器,id选择器,类选择器,后代选择器
- css的id选择器