一般来说，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学习笔记之二CSS基础的更多相关文章

  1. python 学习笔记十二 CSS基础（进阶篇）

    1.CSS 简介 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中,是为了解决内容与 ...

  2. HTML5学习笔记（二）：HTML基础学习之二

    表单 表单用来传递用户数据,多用来与后端进行数据交互. 前端: <!DOCTYPE html> <html lang="en"> <head> ...

  3. HTML5学习笔记（二）：HTML基础学习之一

    元素.属性和格式化 元素是指开始标签到结束标签之前的所有代码,如: <p>this is my page!</p> <!-- 下面的可以称为空元素 --> < ...

  4. HTML5 学习笔记（二）——HTML5新增属性与表单元素

    目录 一.HTML5新增属性 1.1.contextmenu 1.2.contentEditable 1.3.hidden 1.4.draggable 1.5.data-* 1.6.placehold ...

  5. ReactNative学习笔记（二）基础进阶

    一个最简单的HelloWorld页面 先不多解释,直接上代码: import React, { Component } from 'react'; import {AppRegistry, Style ...

  6. HTML5学习笔记（二十四）：DOM扩展

    DOM扩展 DOM标准扩展最开始都是来自各个浏览器的自定义扩展DOM的功能,后被收录为标准的DOM相关API. 本笔记只记录被各大浏览器支持的标准扩展,对于特定浏览器的专有扩展不讨论. 选择符API ...

  7. HTML5学习笔记（二十二）：DOM

    DOM即文档对象模型(Document Object Model),其定义了访问和操作 HTML 文档的标准方法. DOM 将 HTML 文档表达为树结构,如下: 通过DOM,开发人员可以动态的添加. ...

  8. HTML5学习笔记（二十一）：BOM

    BOM(Browser Object Model) 是指浏览器对象模型. 由于最初JavaScript就是设计在浏览器中执行的脚本语言,所以BOM是浏览器提供给JavaScript操作自身的接口. w ...

  9. kafka学习笔记（二）——基础入门

    1.集群规划 从官网下载jar包 http://kafka.apache.org/downloads.html,我选择的是kafka_2.11-0.11.0.0.tgz版本 规划一下集群环境先~ ha ...

随机推荐

  1. 3.c语言结构体成员内存对齐详解

    一.关键一点 最关键的一点:结构体在内存中是一个矩形,而不是一个不规则形状 二.编程实战 #include <stdlib.h> #include <stdio.h> stru ...

  2. 将ubuntu安装在用剩下的硬盘改装成的移动硬盘时遇到的问题及解决办法

    安装时分完盘后提示:“分配到/的分区开始于3584字节,使用磁盘的最小对齐,这可能造成非常差的性能..." 解决办法: 回到windows使用分区助手等工具先分好盘而不是在安装时分盘(这样分 ...

  3. ora_tool

    #!/bin/ksh # # Copyright (c) 1998, 2002, Oracle Corporation.  All rights reserved. #   version() {   ...

  4. [HEOI2012]旅行问题 AC 自动机

    题意: 求两个字符串的最长公共后缀,使得该后缀是某个字符串的前缀. 题解: 直接利用 $fail$ 指针的定义即可. 相当于求自动机上两点的 LCA,好像倍增可以,怕炸空间就老老实实写树剖吧. Cod ...

  5. opencv3.4.1和vs2017配置

    官网下载opencv,双击之后会将文件提取出来,提取出来的文件放在一个合适的位置(选个好地方,不要乱改,环境的配置依赖于这个目录),我放在了D:\program下 配置环境变量: 右键此电脑--> ...

  6. python异步IO-asyncio、async和await

    参考链接: asyncio:https://www.liaoxuefeng.com/wiki/0014316089557264a6b348958f449949df42a6d3a2e542c000/00 ...

  7. WHU 1542 Countries (floyd)

    题意: 在小明出生的星球X上有n国家. 一些国家通过结盟而拥有良好的双边关系,因此他们的公民得益于这些政策,使得所有这些国家之间的旅行变得免费. 但是,不同联盟之间的旅行就不是这么容易了.如果可能,它 ...

  8. 融云消息接口apicloud

    融云提供消息发送服务,支持个人消息,群消息,讨论组,聊天室消息, 以下是它涉及到的接口. 初始化,连接之后,可以使用. <!DOCTYPE html> <html> <h ...

  9. js易错点总结及 常见面试的坑

    最近在研究Javascript发现了其中一些比较灵异的事情.有点让人感到无语比如: var arr = [], arr2 = {}; console.log(typeof(arr) === typeo ...

  10. ADO.NET数据读取封装

    public class sqlserver { //private string sqlstr = System.ConfigurationManager.ConnectionStrings[&qu ...