HTML5学习笔记之二CSS基础
一般来说，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基础的更多相关文章
- python 学习笔记十二 CSS基础（进阶篇）
1.CSS 简介 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中,是为了解决内容与 ...
- HTML5学习笔记（二）：HTML基础学习之二
表单 表单用来传递用户数据,多用来与后端进行数据交互. 前端: <!DOCTYPE html> <html lang="en"> <head> ...
- HTML5学习笔记（二）：HTML基础学习之一
元素.属性和格式化 元素是指开始标签到结束标签之前的所有代码,如: <p>this is my page!</p> <!-- 下面的可以称为空元素 --> < ...
- HTML5 学习笔记（二）——HTML5新增属性与表单元素
目录 一.HTML5新增属性 1.1.contextmenu 1.2.contentEditable 1.3.hidden 1.4.draggable 1.5.data-* 1.6.placehold ...
- ReactNative学习笔记（二）基础进阶
一个最简单的HelloWorld页面 先不多解释,直接上代码: import React, { Component } from 'react'; import {AppRegistry, Style ...
- HTML5学习笔记（二十四）：DOM扩展
DOM扩展 DOM标准扩展最开始都是来自各个浏览器的自定义扩展DOM的功能,后被收录为标准的DOM相关API. 本笔记只记录被各大浏览器支持的标准扩展,对于特定浏览器的专有扩展不讨论. 选择符API ...
- HTML5学习笔记（二十二）：DOM
DOM即文档对象模型(Document Object Model),其定义了访问和操作 HTML 文档的标准方法. DOM 将 HTML 文档表达为树结构,如下: 通过DOM,开发人员可以动态的添加. ...
- HTML5学习笔记（二十一）：BOM
BOM(Browser Object Model) 是指浏览器对象模型. 由于最初JavaScript就是设计在浏览器中执行的脚本语言,所以BOM是浏览器提供给JavaScript操作自身的接口. w ...
- kafka学习笔记（二）——基础入门
1.集群规划 从官网下载jar包 http://kafka.apache.org/downloads.html,我选择的是kafka_2.11-0.11.0.0.tgz版本 规划一下集群环境先~ ha ...
随机推荐
- 47.使用 RequireJS 加载 AngularJS
转自:https://www.cnblogs.com/best/tag/Angular/ AngularJS 目前的版本没有遵循 Javascript 约定的 AMD 模块化规范, 因此使用 Requ ...
- 学golang之前都需要哪些前置知识？
我学golang,感觉前面基础语法部分都很快能学会,但是到了goroutine,channel等后面的部分就看不懂了,是不是我学这个之前还得学习其他什么知识啊?(我有C语言基础,对于C语言里面的指针, ...
- UI Framework-1: Aura Gesture Recognizer
Gesture Recognizer Gesture Recognizer Overview This document describes the process by which Touch Ev ...
- python 自动广播机制 (broadcasting)
一定要注意,执行 broadcast 的前提在于,两个 ndarray 执行的是 element-wise(按位加,按位减) 的运算,而不是矩阵乘法的运算,矩阵乘法运算时需要维度之间严格匹配.(且矩阵 ...
- 十五 Canny边缘检测算法
一.Canny算法介绍 Canny 的目标是找到一个最优的边缘检测算法,最优边缘检测的含义是: 好的检测- 算法能够尽可能多地标识出图像中的实际边缘. 好的定位- 标识出的边缘要尽可能与实际图像中的实 ...
- ajax发送请求的数据类型
1.如果要传给后台的是json形式的数据 2.如果要传给后台的是formdata形式的数据
- linux上编译好的php添加memcache扩展
cd /usr/local/src/ src>wget http://memcached.org/files/memcached-1.4.35.tar.gz src>tar ...
- luoguP1462通往奥格瑞玛的道路（二分答案+spfa）
题意 给出n个点m条边的无向图. 每条边有两个权值a,b; 问在保证从1到n的路径a权值和小于x时,路径上b权值最大值最小为多少. (n≤10000,m≤50000,x≤1000000000) 题解 ...
- 轻松python专题--文本
基础篇:(取材于零基础学python) 7.1 python中的字符串简单介绍与经常使用函数 7.2 字符串常量 7.3 字符串的一般使用 7.4 改动字符串实例 7.5 文本解析 7.6 字符串格式 ...
- 酱油记：GDKOI2018
GDKOI2018,走出机房的第六场考试 DAY0 这一次GDKOI,第一次在广州二中考,第一次住在柏高酒店(住宿条件杠杠的!),晚上就到对面的万达广场吃了顿烤肉,到老师那里开会,然后就回酒店睡了 D ...