CSS每日学习笔记（0）
7.29.2019
1. CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一
2. 一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，按优先级升序排列：
浏览器缺省设置
外部样式表
内部样式表（位于 <head> 标签内部）
内联样式（在 HTML 元素内部）
3.选择器可分组，同组选择器就可以分享相同的声明。
h1,h2,h3,h4,h5,h6 {
color: green;
}
4. 派生选择器根据文档的上下文关系来确定某个标签的样式。
h2 strong {
color: blue;
}
<h2>This subhead is also red.</h2>
<h2>The strongly emphasized word in this subhead is<strong>blue</strong>.</h2>
5. id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式，以 "#" 来定义。
id 属性只能在每个 HTML 文档中出现一次。
#red {color:red;}
<p id="red">这个段落是红色。</p>
6. id 选择器常常用于建立派生选择器。
即使id为 sidebar 的元素只能在文档中出现一次，这个 id 选择器作为派生选择器也可以被使用很多次。
#sidebar p {
font-style: italic;
text-align: right;
}
#sidebar h2 {
font-size: 1em;
font-weight: normal;
}
7. id 选择器即使不被用来创建派生选择器，它也可以独立发挥作用：
div#sidebar {
border: 1px dotted #000;
padding: 10px;
}
8. 在 CSS 中，类选择器以一个点号显示：
.center {text-align: center}
注意：类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。
9.类选择器可以用作派生选择器，类也可基于它们的类而被选择。
.fancy td {
color: #f60;
background: #666;
}
td.fancy {
color: #f60;
background: #666;
}
10.属性选择器：可以为拥有指定属性的 HTML 元素设置样式。
注释：只有在规定了 !DOCTYPE 时，IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中，不支持属性选择。
CSS 选择器参考手册
|
选择器 |
描述 |
|
用于选取带有指定属性的元素。 |
|
|
用于选取带有指定属性和值的元素。 |
|
|
用于选取属性值中包含指定词汇的元素。 |
|
|
用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。 |
|
|
匹配属性值以指定值开头的每个元素。 |
|
|
匹配属性值以指定值结尾的每个元素。 |
|
|
匹配属性值中包含指定值的每个元素。 |
11.插入样式表的方法：
11.1外部样式表
当样式需要应用于很多页面时，使用外部样式表。在使用外部样式表的情况下，通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。<link> 标签在（文档的）头部：
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。不要在属性值与单位之间留有空格。下面是一个样式表文件的例子：
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
11.2内部样式表
当单个文档需要特殊的样式时，使用内部样式表。使用 <style> 标签在文档头部定义内部样式表：
<head>
<style type="text/css">
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
</style>
</head>
11.3内联样式
使用内联样式，需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。
由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。
<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>
12. background-color 不能继承（所有背景属性都不能继承），其默认值是 transparent。transparent 有“透明”之意。也就是说，如果一个元素没有指定背景色，那么背景就是透明的，这样其祖先元素的背景才能可见。
13. 要把图像放入背景，需要使用 background-image 属性。background-image 属性的默认值是 none，表示背景上没有放置任何图像。大多数背景都应用到 body 元素，不过并不仅限于此。
下面例子为一个段落应用了一个背景，而不会对文档的其他部分应用背景：
p.flower {background-image: url(/i/eg_bg_03.gif);}
可以为行内元素设置背景图像，下面的例子为一个链接设置了背景图像：
a.radio {background-image: url(/i/eg_bg_07.gif);}
14. 如果需要在页面上对背景图像进行平铺，可以使用 background-repeat 属性。
属性值 repeat 导致图像在水平垂直方向上都平铺，就像以往背景图像的通常做法一样。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，no-repeat 则不允许图像在任何方向上平铺。默认地，背景图像将从一个元素的左上角开始。
15. 可以利用 background-position 属性改变图像在背景中的位置。关键字：top、bottom、left、right 和 center。还可以使用长度值，如 100px 或 5cm，最后也可以使用百分数值。
百分数值同时应用于元素和图像。也就是说，图像中描述为 50% 50% 的点（中心点）与元素中描述为 50% 50% 的点（中心点）对齐。如果有两个值则分别为水平方向和垂直方向。如果只提供一个百分数值，所提供的这个值将用作水平值，垂直值将假设为 50%。
长度值解释的是元素内边距区左上角的偏移。偏移点是图像的左上角。注意，这一点与百分数值不同，因为偏移只是从一个左上角到另一个左上角。也就是说，图像的左上角与 background-position 声明中的指定的点对齐。
16. 如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。
可以通过 background-attachment 属性防止这种滚动。通过这个属性，可以声明图像相对于可视区是固定的（fixed），因此不会受到滚动的影响。
CSS每日学习笔记（0）的更多相关文章
- CSS每日学习笔记（3）
8.1.2019 1.CSS伪类:用于向某些选择器添加特殊的效果. 伪类的语法: selector : pseudo-class {property: value} CSS 类也可与伪类搭配使用. a ...
- CSS每日学习笔记（1）
7.30.2019 1.CSS 文本属性 属性 描述 color 设置文本颜色 direction 设置文本方向. line-height 设置行高. letter-spacing 设置字符间距. t ...
- CSS每日学习笔记（2）
7.31.2019 1.CSS定位:允许你定义元素框相对于其正常位置应该出现的位置,或者相对于父元素.另一个元素甚至浏览器窗口本身的位置. CSS 有三种基本的定位机制:普通流.浮动和绝对定位.除非专 ...
- CSS 3 学习笔记
css 3 学习笔记 文本: word-wrap : normal | break-word取值:normal: 控制连续文本换行.break-word: 内容将在边界内换行.如果需要,词 ...
- 驱动开发学习笔记. 0.07 Uboot链接地址 加载地址 和 链接脚本地址
驱动开发学习笔记. 0.07 Uboot链接地址 加载地址 和 链接脚本地址 最近重新看了乾龙_Heron的<ARM 上电启动及 Uboot 代码分析>(下简称<代码分析>) ...
- css居中学习笔记
css居中学习笔记 一.水平居中 以下面的代码为例: <body> <div class="parent"> <div class="chi ...
- ArcGIS API for JavaScript 4.2学习笔记[0] AJS4.2概述、新特性、未来产品线计划与AJS笔记目录
放着好好的成熟的AJS 3.19不学,为什么要去碰乳臭未干的AJS 4.2? 4.2全线基础学习请点击[直达] 4.3及更高版本的补充学习请关注我的博客. ArcGIS API for JavaScr ...
- boost 学习笔记 0: 安装环境
boost 学习笔记 0: 安装环境 最完整的教程 http://einverne.github.io/post/2015/12/boost-learning-note-0.html Linux 自动 ...
- JavaScript学习笔记[0]
JavaScript学习笔记[0] 使用的是廖雪峰JavaScript教程. 数据类型 Number 表示数字,不区分浮点整形. === 比较时不转化数据类型. == 反之. NaN与任何值都不想等, ...
随机推荐
- Memcached笔记——（四）应对高并发攻击
近半个月过得很痛苦,主要是产品上线后,引来无数机器用户恶意攻击,不停的刷新产品各个服务入口,制造垃圾数据,消耗资源.他们的最好成绩,1秒钟可以并发6次,赶在Database入库前,Cache进行Mis ...
- 8.2.2 使用Java8增强的Iterator遍历集合元素
8.2.2 使用Java 8增强的Iterator遍历集合元素 Iterator接口方法 程序示例 Iterator仅用于遍历集合 Iterator必须依附于Collection对象 修改迭代变量的值 ...
- 探究 "dependencies" vs "devDependencies"
在之前学习发布npm库的时候,感觉才真正弄懂了--save-dev和-save之前的区别. –save 当我们开发一个npm模块的时候,如果使用--save 大专栏 探究 "depende ...
- Atom配置（VIM党） · iuunhao
为什么说是Vim党呢?首先我是一个深度的Vim用户,自己的电脑上基本上可以兼容Vim的插件都有,所有浏览器,所有编辑器都是Vim的操作方式,当然包括我现在书写的markdown的软件EME也是兼容的V ...
- 内核ioctl函数的cmd宏参数
在驱动程序里, ioctl() 函数上传送的变量 cmd 是应用程序用于区别设备驱动程序请求处理内容的值.cmd除了可区别数字外,还包含有助于处理的几种相应信息. cmd的大小为 32位,共分 4 个 ...
- SQL注入攻击浅谈
原理 SQL注入攻击指的是通过构建特殊的输入作为参数传入Web应用程序,而这些输入大都是SQL语法里的一些组合,通过执行SQL语句进而执行攻击者所要的操作,其主要原因是程序没有细致地过滤用户输入的数据 ...
- C++扬帆远航——3（打印图形）
/* * Copyright (c) 2016,烟台大学计算机与控制工程学院 * All rights reserved. * 文件名:tuxing.cpp * 作者:常轩 * 完成日期:2016年3 ...
- Vizceral小白入门
Vizceral小白入门 接到一个任务,要求将N个program可视化,能一目了然查看当前爬虫状态.记得之前做测试时,一个queue service前端可视化效果不错,经询问是用vizceral开源框 ...
- HTML简单的提示框
由于项目中需要一个简单的提示框,就是鼠标放上去,可以提示相关信息,引用第三方的比较麻烦,所以,这里封装了一个很简单的HTML方法. <script src="http://cdn.st ...
- 与Nexus为Maven搭建私服
目录 Nexus 的概述 Nexus 安装与部署 Nexus 在 Windows 上安装与使用 安装 使用 Nexus 在 Linux 上安装与使用 Nexus 的概述 引用百度百科一段话 Nexus ...