CSS学习——基本语法(一)
来源:互联网 发布:淘宝助理 顺丰模板 编辑:程序博客网 时间:2024/05/17 23:03
CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。
selector {declaration1; declaration2; ... declarationN }
h1 {color:red; font-size:14px;}下面的示意图为您展示了上面这段代码的结构:
如果值为若干单词,则要给值加引号:p {font-family:"sans serif"
;}选择器的分组
你可以对选择器进行分组,这样,被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。在下面的例子中,我们对所有的标题元素进行了分组。所有的标题元素都是绿色的。
h1,h2,h3,h4,h5,h6
{ color: green; }继承
如果你不希望 "Verdana, sans-serif" 字体被所有的子元素继承,又该怎么做呢?比方说,你希望段落的字体是 Times。没问题。创建一个针对 p 的特殊规则,这样它就会摆脱父元素的规则:
body { font-family: Verdana, sans-serif; }td, ul, ol, ul, li, dl, dt, dd { font-family: Verdana, sans-serif; }p
{ font-family: Times, "Times New Roman", serif; }id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
id 选择器以 "#" 来定义。
下面的两个 id 选择器,第一个可以定义元素的颜色为红色,第二个定义元素的颜色为绿色:
#red
{color:red;}#green
{color:green;}下面的 HTML 代码中,id 属性为 red 的 p 元素显示为红色,而 id 属性为 green 的 p 元素显示为绿色。
<pid="red"
>这个段落是红色。</p><pid="green"
>这个段落是绿色。</p>id 选择器和派生选择器
在现代布局中,id 选择器常常用于建立派生选择器。
#sidebar p
{font-style: italic;text-align: right;margin-top: 0.5em;}上面的样式只会应用于出现在 id 是 sidebar 的元素内的段落
类选择器和派生选择器
在 CSS 中,类选择器以一个点号显示:
.center
{text-align: center}在上面的例子中,所有拥有 center 类的 HTML 元素均为居中。
在下面的 HTML 代码中,h1 和 p 元素都有 center 类。这意味着两者都将遵守 ".center" 选择器中的规则。
<h1class="center"
>This heading will be center-aligned</h1><pclass="center"
>This paragraph will also be center-aligned.</p>注意:类名的第一个字符不能使用数字!它无法在 Mozilla 或 Firefox 中起作用。
和 id 一样,class 也可被用作派生选择器:
.fancy td
{color: #f60;background: #666;}在上面这个例子中,类名为 fancy 的更大的元素内部的表格单元都会以灰色背景显示橙色文字。(名为 fancy 的更大的元素可能是一个表格或者一个 div)
元素也可以基于它们的类而被选择:
td.fancy
{color: #f60;background: #666;}在上面的例子中,类名为 fancy 的表格单元将是带有灰色背景的橙色。
<tdclass="fancy"
>你可以将类 fancy 分配给任何一个表格元素任意多的次数。那些以 fancy 标注的单元格都会是带有灰色背景的橙色。那些没有被分配名为 fancy 的类的单元格不会受这条规则的影响。还有一点值得注意,class 为 fancy 的段落也不会是带有灰色背景的橙色,当然,任何其他被标注为 fancy 的元素也不会受这条规则的影响。这都是由于我们书写这条规则的方式,这个效果被限制于被标注为 fancy 的表格单元(即使用 td 元素来选择 fancy 类)。
- CSS学习——基本语法(一)
- C++学习(一)——基本语法
- 【学习笔记】CSS的基本语法(一)
- CSS基础一:CSS基本语法
- JavaScript学习笔记(一)——基本语法
- javascript学习(一)——基本语法
- Mysql学习笔记一——curd基本语法
- shell学习(一)——基本数据类型和语法
- Oracle学习之基本语法(一)—内置函数
- CSS干货系列(一)基本语法
- XPath学习:基本语法(一)
- web学习—css样式表—css语法(一)
- CSS学习(一):css语法
- lisp基本语法——(一)
- XML的学习笔记(一)————基本语法和规范
- C++初级学习(一)——基本语法与数据结构
- PHP重新学习(一)——PHP的基本语法
- mongodb学习——基本语法
- UVA 152 一堆树
- 最大子段和
- php curl使用代理发起请求
- Cocoa之Core Data 框架详解
- poj 1703 Find them, Catch them(种类并查集)
- CSS学习——基本语法(一)
- 表单参数与URL参数的优先级
- iPhone的Push(推送通知)功能原理浅析
- 手机屏幕DPI计算
- hdu——2045(找规律的递推题)
- paip.程序模块间的通讯方式大总结
- HTML5学习笔记一web存储
- 全球央行会议在即,非美何去何从
- ASP.NET温故而知新学习系列之ASP.NET多线程编程—.NET下的多线程编程委托使用的实例(五)