文档章节

《Head first HTML与CSS 第二版》读书笔记 第七章 CSS入门

一万
 一万
发布于 2016/07/31 11:52
字数 839
阅读 79
收藏 0

CSS由规则组成,每个规则为选择的HTML元素提供样式。

典型的规则包括一个选择器以及一个或多个属性和值。

选择器指定 规则将应用到哪些元素。

每个属性声明以一个分号结束。

规则中所有属性和值都放在{ }之间。

可以使用元素名作为选择器,选择任意元素。

通过用逗号分隔元素名,可以一次选择多个元素。

只能对body中的元素添加样式。

要在HTML中包含一个样式,可以在<head>元素中添加<style>元素。

推荐的方法是将CSS单独写在一个文件中,然后在HTML页面中引入这个CSS文件:

<link type="text/css" rel="sylesheet" href="......">

<link>元素用来链入外部信息。它是一个void元素,无结束标签。type属性指示类型,在HTML5中,不再需要这个属性。rel属性指定了HTML文件与链接文件之间的关系,这里要链接到一个样式表,使用stylesheet。href指定链接文件,可以使用相对路径或URL。

 

元素可以从它的父元素集成样式。

如果一个元素不想继承父元素的样式,可为它单独指定样式来覆盖集成。CSS总会使用最特定的规则。

不是所有的CSS属性都能集成。一般,如果样式影响到文本外观,它们都能集成,如果字体颜色(color)、字体(font-famliy)、字体大小(font-size)、字体粗细(font-weight)和斜体(font-style)。其他属性不能集成,如边框。

 

用/* */来包围CSS注释,可以跨多行。

 

可以使用class属性将元素添加到一个类。

通过在元素名和类型之间加一个".",可以选择该类中的一个特定元素。

使用“.classname”可以选择这个类的所有元素。

通过在class属性中放入多个类名,可以指定一个元素属于多个类,类名之间用空格分隔。

 

元素应用样式的规则:

  1. 如果有选择器选择到它,就使用选择器设置的样式;
  2. 如果没有选择器,就使用继承额。查看父元素,父元素的父元素,以此类推;
  3. 都没有就使用默认值。

如果有多个选择器选择到一个元素,则会比较哪个选择器更特定,如下情况特定性由高到低:元素.类,.类,元素。

如果选几个选择器特定性相同,则会使用在CSS文件中最后出现的选择器。

 

如果CSS里有错误,通常这个错误以下的所有其他规则都会被忽略。

 

jigsaw.w3.org/css-validator验证CSS文件。

 

一些CSS属性:

  • color 字体颜色;
  • font-family 指定字体;
  • border-bottom:控制元素下边框的外观;
  • left:指定元素左边所在的位置;
  • line-height:设置一个文本元素中的行间距;
  • padding:设置内边距(元素边缘 和它的内容之间的空间);
  • background-image:在元素背景放置图像;
  • font-style:设置斜体文本;
  • top:控制元素顶部位置;
  • text-align:文本左对齐、居中还是右对齐;
  • letter-space:设置字符间距;
  • list-style:改变列表中列表项的外观。

© 著作权归作者所有

一万
粉丝 30
博文 105
码字总数 173706
作品 0
朝阳
程序员
私信 提问
加载中

评论(0)

开源电子书

目录 语言无关类 操作系统 智能系统 分布式系统 编译原理 函数式概念 计算机图形学 WEB服务器 版本控制 编辑器 NoSQL PostgreSQL MySQL 管理和监控 项目相关 设计模式 Web 大数据 编程艺术 ...

zting科技
2017/12/11
0
0
学习 HTML+CSS 的书籍推荐

1、《CSS那些事儿》 本书专注于CSS技巧实例的讲解,由浅入深地分析了CSS样式在布局时所需要理解的原理。绕开随处可见的基础知识、网络中能随意搜索到的hack技巧,侧重原理分析,拓展读者使用...

osc_0i8c6s1z
2018/03/18
5
0
细谈JavaScript dom编程----我的笔记

第一次进书店买书,就被《JavaScript DOM编程艺术》一书所吸引,这是一本介绍JavaScript入门的神书, 内容介绍: 前面几章介绍JavaScript的历史 后面才是实例, 如HTML代码: <!doctype html...

crossmix
2015/12/28
43
0
微软商业智能(BI)分析服务从入门到精通读书笔记连载

本系列文章主要是结合书籍,加上自己的总结,整理出来的一系列读书笔记,涉及微软SQL Server2008中商务智能开发中的多维分析模块,先把目录整理如下: 《分析服务从入门到精通读书笔记》第一...

指尖流淌
2012/03/07
0
0
《CLR via C#》读书笔记 之 目录导航

《CLR via C#》读书笔记 之 目录导航 2013-02-27 读书笔记是按书本章节按序写的,只摘录了个人认为比较重要,关系比较紧密的知识点。第4部分 核心机制 和第5部分 线程处理 等有时间再整理 CL...

明-Ming
2013/04/06
0
0

没有更多内容

加载失败,请刷新页面

加载更多

web测试与app测试的区别

web测试与app测试的区别 首先从系统架构来看的话: web项目,一般都是b/s架构,基于浏览器的,而app则是c/s的,必须要有客户端。那么在系统测试测试的时候就会产生区别了。 web测试只要更新了...

osc_qo89by3k
5分钟前
5
0
【mysql 读写分离】10分钟了解读写分离的作用

1、什么是读写分离 读写分离,基本的原理是让主数据库处理事务性增、改、删操作(INSERT、UPDATE、DELETE),而从数据库处理SELECT查询操作。数据库复制被用来把事务性操作导致的变更同步到集...

战略板儿砖
6分钟前
9
0
Sphinx和rst在科研笔记和学术博客中的高效用法

什么是RST? reStructuredText 是扩展名为 .rst 的纯文本文件,含义为"重新构建的文本",也被简称为:RST 或 reST; 是 Python 编程语言的 Docutils 项目的一部分,Python Doc-SIG (Documen...

osc_6b3uvobr
7分钟前
9
0
MySQL 的 crash-safe 原理解析

本文首发于 vivo互联网技术 微信公众号 链接:https://mp.weixin.qq.com/s/5i9wmJs4_Er7RaYfNnETyA 作者:xieweipeng MySQL作为当下最流行的开源关系型数据库,有一个很关键和基本的能力,就...

vivo互联网技术
7分钟前
10
0
Org Mode - 年轻人的第一堂时间管理课程

忙成狗,闲成猪。 上半年我的状态就是如此,为了做出改变我找了很多的任务管理工具,比如奇妙清单、滴答清单(现在我还在用)等等,但是依然没有满足我的需求。作为一名精力旺盛的开发仔,我...

osc_smzoc82r
8分钟前
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部