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与任何值都不想等, ...
随机推荐
- django反向解析和正向解析
Django的正向解析和反向解析 先创建一个视图界面 urls.py index.html index页面加载的效果 正向解析 test/?result=1 所谓正向解析就是直接在这里写地址 向url ...
- 正负小数js正则表达式
var reg = /^(([1-9]\d+(.[0-9]{1,4})?|\d(.[0-9]{1,4})?)|([-]([1-9]\d+(.[0-9]{1,4})?|\d(.[0-9]{1,4})?) ...
- HEXO+Git+Github+域名搭建个人博客
搭建个人博客可以分为以下五个部分 一.搭建本地环境(个人为Win10) 1.安装Git,下载地址:点击 下载后,按提示进行安装即可,作用是:把本地的内容提交到github上去 注意:官网下载速度不是很 ...
- Hadoop2.7搭建
Hadoop最底部是 Hadoop Distributed File System(HDFS),它存储Hadoop集群中所有存储节点上的文件.HDFS(对于本文)的上一层是MapReduce 引擎,该 ...
- 乱世兄弟（豹老头 X 天捣臼）
论CP之冷冷冷 只为白凡扫剧- 片源: 乱世兄弟 BGM:兄弟 人物角色: 豹老头 - 白凡 天捣臼 大专栏 乱世兄弟(豹老头 X 天捣臼)- 姚鲁 B站:豹老头 X 天捣臼-MV<乱世兄弟& ...
- textarea 实现高度自动增长
有时候希望textarea 能够自动调整高度来适应输入的内容 网上看到了很多解决方案,比如动态创建一个隐藏的div,当用户输入的时候将textarea的内容绑定到div,由于div的高度会自动撑开,因 ...
- 微信小程序app.js中设置公有变量
初始化GlobalData 在App.js的最上方可以设置GlobalData的初始值. App({ globalData:{ appid: '1wqas2342dasaqwe232342xxxxxx ...
- powershell加KeePass实现，加密服务器密码清单文件
powershell加KeePass实现,加密服务器清单文件 powershell传教士翻译,改写. 2020-02-27 原文: https://www.altaro.com/msp-doj ...
- CentOS 7 国内源配置
CentOS 7 国内源配置 1. 备份自带源 # 首先要确认你有 wget 命令, 并且连着网 # cd /etc/yum.repos.d/ # mkdir repo # mv *.repo rep ...
- 小白自学机器学习----3.令人头秃的pytorch安装 （No module named 'tools.nnwrap' 错误）
tensorflow 刚刚会写基础的模块了,今天找到研究方向的代码是pytorch实现的 总是看到这句话,人生苦短,我用pytorch 看来pytorch应该比tensorflow好学,但是!! py ...