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

超全的css新手学习笔记

适合新手的css学习笔记,超级全面
  • qq_34477549
  • qq_34477549
  • 2016年10月11日 10:27
  • 1656

机器学习基础(林軒田)笔记之五

本文为国立台湾大学林軒田老师机器学习基石课程第五讲的笔记。
  • xiong452980729
  • xiong452980729
  • 2016年07月05日 16:10
  • 739

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

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

最佳PHP,HTML5和CSS框架大荟萃之三 CSS框架

最佳PHP,HTML5和CSS框架大荟萃之三 CSS框架 #文章 css网格系统 前端框架 评论(0)阅读(1663) ...
  • L315028140
  • L315028140
  • 2013年12月30日 22:37
  • 6120

HTML, CSS学习笔记(完整版)

第一章 div布局 前几课内容 .htm是早期的后缀,因为那时只能支持长度为3的后缀,因此html与htm是一样的。 shtml是服务器先处理然后再交给浏览器处理   #HTML小知识#之#...
  • u011925500
  • u011925500
  • 2014年10月02日 00:28
  • 4432

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

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

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

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

Linux邻居协议 学习笔记 之二 通用邻居处理函数对应的数据结构的分析

在linux代码中,对于不同的邻居项,抽象出了一个通用的模型,通用邻居层,主要是用来进行邻居项的创建、添加、删除、查找、更新等操作。        对于通用邻居层,最主要的就是邻居项的状态机的设计,...
  • lickylin
  • lickylin
  • 2014年03月19日 22:14
  • 1476

html5,css3 学习心得

8月1日至8月10日 学习HTML5,CSS3 下面总结一下。 html5: HTML5主要新增了一些如下的新特性 1.用于绘画的canvas元素 主要通过JavaScript来绘制图形 基本实现...
  • qq_30604453
  • qq_30604453
  • 2016年08月10日 14:01
  • 983

MySQL学习笔记---基础概念和一些基础SQL语句(一)

MySQL学习笔记,以防遗忘 数据库基本概念 数据库:保存有组织的数据的容器(通常是一个文件或一组文件)。 表:某种特定类型数据的结构化清单,数据库中的表都有一个唯一的名字用来标识自己。 模式:关于数...
  • Jung_zhang
  • Jung_zhang
  • 2016年04月14日 20:11
  • 1714
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML5学习笔记之二CSS基础
举报原因:
原因补充:

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