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 ...
随机推荐
- Metasploit的armitage初步使用
armitage的启动 root@kali:~# armitage 别急,过会儿就好了 . 等扫描完会弹出一个框框然后会多出目标的图标比如目标是打印机
- DefaultView 的作用(对DataSet查询出的来数据进行排序)
DefaultView 的作用 收藏 一直以来在对数据进行排序, 条件查询都是直接重复构建SQL来进行, 在查询次数和数据量不多的情况下倒没觉得什么, 但慢慢得, 当程序需要对大量数据椐不同条件 ...
- 从Chrome源码看audio/video流媒体实现一（转）
现在绝大多数的网站已经从flash播放器转向了浏览器原生的audio/video播放器,浏览器是如何加载和解析多媒体资源的,这对于web开发者来说是一个黑盒,所以很有必要看一下浏览器是怎么实现的,Ch ...
- memset函数的用法
重点需要注意一个细节:memset是以byte来填充的,也就是一个字节(8bit)一个单位来填充. 因此:如果int array[10]: memset(array, 1, 10):然后再把array ...
- 移动端 Modal 组件开发杂谈
Vant 是有赞开发的一套基于 Vue 2.0 的 Mobile 组件库,在开发的过程中也踩了很多坑,今天我们就来聊一聊开发一个移动端 Modal 组件(在有赞该组件被称为 Popup )需要注意的一 ...
- scrapy xpath选择器多级选择错误
在学习scrapy中用xpath提取网页内容时,有时要先提取出一整个行标签内容,再从行标签里寻找目标内容.出现一个错误. 错误代码: def parse(self, response): sel = ...
- uikit学习
*)ur-drop组件:在元素旁边显示一个框 delay-hide:1000(鼠标移开后1000毫秒才唤醒结束操作,默认是800) delay-show:1000(点击后过1000毫秒才会出现东西) ...
- OpenJDK源码研究笔记(六)--观察者模式工具类(Observer和Observable)和应用示例
本文主要讲解OpenJDK观察者模式的2个工具类,java.util.Observer观察者接口,java.util.Observable被观察者基类. 然后,给出了一个常见的观察者应用示例. Obs ...
- CXF实战之在Tomcat中公布Web Service(二)
服务接口及实现类请參考WebService框架CXF实战(一) 创建Maven Web项目,在pom.xml中加入CXF和Spring Web的引用,因为CXFServlet须要Spring Web的 ...
- setTimeOut函数传参数
这样使用,后面的4000无效 setTimeout(removeGift(customer_id,gift_id),4000); function removeGift(customer_id,gif ...