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与任何值都不想等, ...
随机推荐
- Navicat远程连接服务器Mysql
使用NAVICAT远程访问MYSQL的步骤 1.修改远程访问权限 //进入MySQL服务器或使用其它工具 xxxx@ubuntu:/$ mysql -h localhost -u root -p xx ...
- Ubuntu14-04安装redis和php5-redis扩展
PS:在系统安装完后最好执行下列命令更新下软件 实际上只要软件源没什么问题的话,安装什么软件都是OK的. 来开始安装Redis吧~~ 一:如果你的其他都OK的话,可以执行下列命令直接安装 sudo a ...
- response 画验证码
代码 import java.awt.Color; import java.awt.Font; import java.awt.Graphics2D; import java.awt.image.Bu ...
- spring+mybatis+mysql5.7实现读写分离，主从复制
申明:请尽量与我本博文所有的软件版本保持一致,避免不必要的错误. 所用软件版本列表:MySQL 5.7spring5mybaties3.4.6 首先搭建一个完整的spring5+springMVC5+ ...
- test 5.1 高精度小数（10分）
请写一个程序,输入一个分数,计算出它的小数形式.无论是否可以除尽,输出最多小数点后200位. 题目内容 由于计算机内部表达方式的限制,浮点运算都有精度问题,为了得到高精度的计算结果,就需要自己设计实现 ...
- 6. Go 语言中结构体的使用
1. 结构体的定义格式 在go语言中结果的定义格式如下: 123 type structName struct { filedList} 列子如下: 1234 type Person struct { ...
- Archlinux 自动挂载移动硬盘，开机自动启动smb服务
Archlinux + Raspberry 打造NAS: samba篇 树莓派自动挂载硬盘,并开启smb服务. 开机自动挂在移动硬盘ntfs 安装ntfs-3g sudo pacman -S ntfs ...
- 为什么 generator 忽略第一次 next 调用的参数值呢？
首先要理解几个基本概念. 执行生成器不会执行生成器函数体的代码,只是获得一个遍历器 一旦调用 next,函数体就开始执行,一旦遇到 yield 就返回执行结果,暂停执行 第二次 next 的参数会作为 ...
- Web Scraper 高级用法——抓取属性信息 | 简易数据分析 16
这是简易数据分析系列的第 16 篇文章. 这期课程我们讲一个用的较少的 Web Scraper 功能--抓取属性信息. 网页在展示信息的时候,除了我们看到的内容,其实还有很多隐藏的信息.我们拿豆瓣电影 ...
- python自己做计算器
题目: exp = '1 - 2 * ( (60-30 +(-40/5) * (9-2*5/3 + 7 /3*99/4*2998 +10 * 568/14 )) - (-4*3)/ (16-3*2) ...