CSS
CSS 简介
CSS 指层叠样式表 (Cascading Style Sheets)
CSS 语法
selector {declaration1; declaration2; ... declarationN }
h1 {color:red; font-size:14px;}
以分号结束
CSS 对大小写不敏感。不过存在一个例外：如果涉及到与 HTML 文档一起工作的话，class 和 id 名称对大小写是敏感的。
CSS 属性选择器
[title~=hello] { color:red; }
[attribute] 用于选取带有指定属性的元素。
[attribute=value] 用于选取带有指定属性和值的元素。
[attribute~=value] 用于选取属性值中包含指定词汇的元素。
[attribute|=value] 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
[attribute^=value] 匹配属性值以指定值开头的每个元素。
[attribute$=value] 匹配属性值以指定值结尾的每个元素。
[attribute*=value] 匹配属性值中包含指定值的每个元素。
CSS 框模型
元素框的最内部分是实际的内容
直接包围内容的是内边距
内边距呈现了元素的背景
内边距的边缘是边框
边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。
在 CSS 中，width 和 height 指的是内容区域的宽度和高度。
增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
CSS 浮动
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
行框和清理
行框就是以块级标签定义的元素,内容可以是一个多行显示的内容
块级标签定义的元素在文档流中是独占一行的,就是说如果内容不足以占完一行(一块),后面的内容也不会占用剩下的空间
行内块级元素是会占用剩余空间进行内容显示的
浮动框旁边的行框被缩短，从而给浮动框留出空间，行框围绕浮动框。
伪类和伪元素的区别
CSS 伪类用于向某些选择器添加特殊的效果。
CSS 伪元素用于将特殊的效果添加到某些选择器。
伪类种类
伪元素种类
伪类就是一个你能通过为一个元素加入一个类就可以解决的
如:
:first-child
<p>
<i class="first-child">first</i>
<i>second</i>
</p>
伪元素就是你要通过定义一个元素的方式才可以进行完成的(增加一个类是不能够完成的)
如:
:first-letter
<p><span class='first-letter'>I</span> am stephen lee.</p>
行高
置行间的距离
属性会影响行框的布局。在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离。
外部样式表
当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，
你就可以通过更改一个文件来改变整个站点的外观。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
内部样式表
当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部分通过
<style> 标签定义内部样式表。
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>
内联样式
当特殊的样式需要应用到个别元素时，就可以使用内联样式。
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>
样式的优先级
（外部样式）External style sheet <（内部样式）Internal style sheet <（内联样式）Inline style
- 大小: 7.8 KB
- 大小: 29.6 KB
- 大小: 16.5 KB
分享到：
相关推荐
element.css文件
quill.snow.css
bootstrap.min.css
CSS重置 一个微小的默认CSS重置基于： 和 安装 NPM： npm install --save-dev css-reset 纱： yarn add css-reset 手动安装 首先，让我们克隆此存储库： git clone https://github.com/mlaurel/css-reset.git ...
纯css制作box外边框动态效果-飞线效果
wangeditor插件js
史上最全的CSS hack方式一览.mhtml史上最全的CSS hack方式一览.mhtml史上最全的CSS hack方式一览.mhtml史上最全的CSS hack方式一览.mhtml史上最全的CSS hack方式一览.mhtml史上最全的CSS hack方式一览.mhtml史上最全...
一个本地化的 folium 地图资源，包括了js，css 等文档，配合python脚本将对应资源的引用本地化，避免了引入url资源时跨境加载js/css资源网络慢的问题，提升本地folium地图的加载速度，速度提升 800 倍，让地图打开...
bootstrap的css文件
hiprint样式 print-lock.css
The goal of a reset stylesheet is to reduce browser inconsistencies in ... Reset styles quite often appear in CSS frameworks, and the original "meyerweb reset" found its way into Blueprint, among others.
亲测 可用 在HTML标签在浏览器里有默认的样式，例如 p 标签有... 但是不同浏览器的默认样式之间也会有差别，例如ul默认带有缩进的样式，在IE下，它的缩进是通过margin实现的，而Firefox下，它的缩进是由padding实现的
HTML + CSS 实现淘宝页面首屏静态网页项目练习 HTML + CSS 实现淘宝页面首屏静态网页项目练习 HTML + CSS 实现淘宝页面首屏静态网页项目练习 HTML + CSS 实现淘宝页面首屏静态网页项目练习 HTML + CSS 实现淘宝页面...
CSS3风水罗盘旋转动画特效.rar CSS3风水罗盘旋转动画特效.rar CSS3风水罗盘旋转动画特效.rar CSS3风水罗盘旋转动画特效.rar CSS3风水罗盘旋转动画特效.rar CSS3风水罗盘旋转动画特效.rar CSS3风水罗盘旋转动画特效....
资源名称：Less CSS内容简介：像写程序一样写 CSSLess CSS 是一个 CSS 预处理器，通过简单的语法和变量对 CSS 进行扩展，可减少很多 CSS 的代码量。LESS 将 CSS 赋予了动态语言的特性，如 变量， 继承， 运算， 函数...
使用安装： npm install main.css并从生成的node_modules/main.css/dist文件夹中node_modules/main.css/dist所需的内容用安装： yarn add main.css并从生成的node_modules/main.css/dist文件夹中node
leaflet.css样式文件
pygments-css 是基于Python的代码突出显示工具，带有一组内置样式（不是CSS文件）用于代码突出显示。 您必须使用命令行生成CSS文件。 您可以自己生成这些，但是git存储库已经为您生成了它们。 建造 这些css文件是...
element-ui css