HTML5学习笔记之二CSS基础

原创 2014年06月05日 22:24:07

一般来说,CSS都存储为一个文件,然后各个html page可以指定使用哪个CSS文件,这样这些html页面就可以保持一致的风格。

通常可以通过在head中加上一行指定CSS的链接。

<!DOCTYPE html>

<html>

  <head>

    <metacharset="utf-8" />

    <title>MyPage</title>

    <link href="css/style.css" rel="stylesheet" />

  </head>

  <body>

    <!– Body Content -->

  </body>

</html>

CSS盒子模型,CSS把页面弄成盒子套盒子的模式,下图很形象的表明这种关系。


下面我们看一下如何通过CSS文件来配置html页面,CSS使用Selector来设置页面中不同元素的格式风格。下面,用例子来表示不同selector的作用范围。

1. 通用Selector *{ },作用于html页面所有项。

/* Universal Selector */
* {
background-color: #E0E0E0;
margin-top: 0px;
margin-right: 0px;
}

2.类型Selector,作用于某一类的HTML项,如body, p, footer等

/* Type Selector */
body {
font-family: Arial, Helvetica, sans-serif;
}

上面这段CSS就定义了<body></body>中所有元素的字体包括如上三种。

3.ID Selector。作用于某个id=selector中#后的id的项。

/* ID Selector */
#mainHeader {
text-decoration: underline;
}

我们再看看起作用的HTML项。
<header>
         <h1 id="mainHeader">Part 2: CSS Introduction</h1>
</header>

4.类Selector

/* Class Selector */
.topNavigation {
color: #808000;
font-weight: bold;
}

用户声明的类如果叫topNavigation,该CSS就会对该class的项起作用,如

<p class="topNavigation">

           Navigation 1
</p>

5.继承子孙Selector,比如A B{},就是对A中的B才起作用,对于不在A中B没有左右。

/* Descendant Selector */
footer p {
color: #008080;
font-weight: bold;
}

HTML中

<footer>
           <p>
               Footer
          </p>
 </footer>

而我们在上个selector中提到的其它p是不起作用的。

6.最后一种不是Selector,它是鼠标悬浮的一种特殊处理

/* Mousehover Effect */
p:hover {
color: #2694E8;
}

html页面中所有标记<p></p>中的文字,当鼠标悬浮在上面的时候,都会变色。

相关文章推荐

HTML5多媒体audio和video(一)

通常浏览器通过安装flash来实现网页音视频的播放。 HTML5新增了audio和video元素来进行音视频的播放,从而减少了对flash的依赖。audio对音频的支持HTML5 规定了一种通过 a...

【HTML5学习笔记】7:查漏补缺1

这次查漏补缺用的电子工业出版社的《Web前端技术》。 *关于文字和排版的 文字综合网页 需要居中的内容 需要缩进的内容     前面四个是空格 pre标签里的文本都是预...

html5学习笔记之二(智能表单设计)

看视频,做笔记: 一、新的输入类型 1.email:可以自动校验是否是一个电子邮件地址(不同浏览器可能提示方式不太一样),用法如下: 2.url:可以自动将提交的数据变为url,用法如下: ...

HTML5基础学习笔记(二)

六、文本格式化标记 标记 显示效果 和 文字以粗体方式显示(XHTML推荐使用strong) 和 文字以斜体方式...

html5+css3学习笔记

1、html5建立规则 独立于设备 开发进程透明  基于html css js  优秀的错误处理  更多标记 减少外部插件使用 2、html5新特性 绘画canvas元素   媒介回放的video和a...

HTML5_CSS3学习笔记

HTML5是什么?有哪些新特性?有哪些新增标签?如何让低版本的 IE 支持 HTML5新标签 HTML5是超文本标记语言的第五次重大修改,2014年10月29日标准规范制定完成。 新特性: 语义特性...

【HTML5学习笔记】12:尝试CSS层叠样式表和关键帧

跟着视频写的的3D隧道,用了CSS样式。建立了几个div块,用CSS改变了它的形状,然后添加关键帧使它朝着Y轴周期性移动,就形成了3D隧道的效果。 *测试代码 3D隧道 ...

HTML5与CSS3学习笔记:导航栏(一)

源码 横向导航栏 body { margin: 0px; padding:
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML5学习笔记之二CSS基础
举报原因:
原因补充:

(最多只允许输入30个字)