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>中的文字,当鼠标悬浮在上面的时候,都会变色。

学习笔记(一) mysql + kbengine-0.8.2+U3D_demo详细搭建过程个人记录

最近在无意间得知KBEngine是一个开源以及可以支持U3D的一个服务,萌新我屁颠屁颠的跑去KBengine.org官方网站看怎么搭建一个服务器出来,由于我没有学习过mysql,所以花了很多时间才正确...
  • begonia__z
  • begonia__z
  • 2016-04-14 18:40:05
  • 2678

html5 css3基础知识详解

如同人类的的进化一样,CSS3是CSS2的“进化”版本,在CSS2基础上,增强或新增了许多特性, 弥补了 CSS2的众多不足之处,使得Web开发变得更为高效和便捷。 Html4-html5...
  • ITzhongzi
  • ITzhongzi
  • 2017-03-09 18:29:42
  • 619

【慕课网】HTML&CSS基础课程学习笔记

HTML部分: 一、HTML介绍 1-1.介绍html大体 1-2.介绍html是结构层、css是表现层、javascript行为层 1-3.介绍html标签 1-4...
  • Cyan1614
  • Cyan1614
  • 2017-06-06 18:14:53
  • 316

一、HTML+CSS基础知识学习笔记

注:如果早点了解那率性的你或者晚一点遇见成熟的我。学计算机的应该早点确定自己的技术方向,一定要有一个擅长的能够用来吃饭的,其他的能掌握多少就是多少,像我这样的什么都学,什么都不知道没什么卵用的。 1....
  • u013047859
  • u013047859
  • 2016-05-23 22:56:11
  • 1055

慕课学习史上最全零基础入门HTML5和CSS笔记

慕课学习史上最全零基础入门HTML5和CSS笔记Html和CSS的关系 学习web前端开发基础技术需要掌握:HTML、CSS、JavaScript语言。下面我们就来了解下这三门技术都是用来实现什么...
  • zoucanfa
  • zoucanfa
  • 2017-12-27 19:11:48
  • 516

HTML5学习笔记(总结提炼版)——002 CSS

  • 2016年03月14日 23:04
  • 7KB
  • 下载

BI学习笔记之一 - 什么是BI?

什么是BI?   商业智能也称作BI,是英文单词Business Intelligence的缩写。商业智能的概念最早在1996年提出。当时将商业智能...
  • bon_mot
  • bon_mot
  • 2013-03-26 10:42:27
  • 1002

HTML5与CSS3权威指南

  • 2013年09月26日 17:21
  • 25.98MB
  • 下载

HTML+CSS3-》第3阶段:HTML5之CSS3基础与加强 上

第3阶段:CSS3基础与加强 上 44前端开发基础视频-CSS定义与HTML结构之间的关系 第一节:CSS基础入门 1:CSS定义与编写CSS 2:CSS语法与选择器 3:CSS选择器...
  • u014222687
  • u014222687
  • 2016-06-14 21:55:20
  • 858

HTML5/CSS3学习笔记

1. 内联元素可以设置margin, padding, border, 不过margin和padding只在左右方向上起作用,对input等替换元素在上下方向上依然有效。关于为何img、input等内...
  • changbear
  • changbear
  • 2016-02-28 17:52:02
  • 1263
收藏助手
不良信息举报
您举报文章:HTML5学习笔记之二CSS基础
举报原因:
原因补充:

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