一周学习Html5+Css基础知识
来源:互联网 发布:jquery高级编程 微盘 编辑:程序博客网 时间:2024/05/03 23:31
Css的基本选择器与应用:
派生选择器
通过依据元素在其位置的上下文关系来定义样式,你可以使标记更加简洁。
比方说,你希望列表中的 strong 元素变为斜体字,而不是通常的粗体字,可以这样定义一个派生选择器:
li strong
{ font-style: italic; font-weight: normal; }
请注意标记为 <strong> 的蓝色代码的上下文关系:
<p><strong>我是粗体字,不是斜体字,因为我不在列表当中,所以这个规则对我不起作用</strong></p><ol><li><strong>
我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li>
<li>我是正常的字体。</li></ol>
在上面的例子中,只有 li 元素中的 strong 元素的样式为斜体字,无需为 strong 元素定义特别的 class 或 id,代码更加简洁。
id 选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
id 选择器以 "#" 来定义。
下面的两个 id 选择器,第一个可以定义元素的颜色为红色,第二个定义元素的颜色为绿色:
#red
{color:red;}#green
{color:green;}
下面的 HTML 代码中,id 属性为 red 的 p 元素显示为红色,而 id 属性为 green 的 p 元素显示为绿色。
<pid="red"
>这个段落是红色。</p><pid="green"
>这个段落是绿色。</p>
在 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)
属性选择器
对带有指定属性的 HTML 元素设置样式。
可以为拥有指定属性的 HTML 元素设置样式,而不仅限于 class 和 id 属性。
注释:只有在规定了 !DOCTYPE 时,IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中,不支持属性选择。
属性选择器
下面的例子为带有 title 属性的所有元素设置样式:
[title]
{color:red;}
- 一周学习Html5+Css基础知识
- 一周学习HTML5+CSS基础知识(二)
- 一周HTML5以及CSS的学习
- (5)HTML5-CSS基础知识
- HTML5基础知识学习笔记
- HTML5 基础知识学习
- css基础知识学习笔记
- CSS基础知识学习笔记
- CSS学习笔记:基础知识
- CSS基础知识入门学习
- html5 + css 学习小结
- HTML5学习笔记-第一章基础知识
- 《HTML5学习笔记—基础知识》
- HTML/CSS基础知识学习笔记
- CSS基础知识学习(一)
- html5-CSS学习-background记录
- html5学习笔记——基础知识1
- HTML5学习笔记 —— JavaScript基础知识
- unity3d学习日记:使用[System.Serializable]在inspector面板内显示自定义数据类型类实例对象的内部数据
- Dubbo启动时对服务检查
- 并查集
- Java学习笔记~关于类与对象的总结01
- POJ 3048 John <Anti-SG(SJ定理)>
- 一周学习Html5+Css基础知识
- 线程池
- 2017 ACM-ICPC(西安赛区) B-Coin
- spring学习笔记二十一 Hibernate在线安装
- shiro与springmvc整合需要注意xml配置
- 阻止默认行为
- 安装java环境和配置java环境
- spring mvc学习心得(一)数据类型转换
- mybatis框架的一些步骤