CSS学习小结

何为css

CSS是级联样式表（Cascading Style Sheets）的缩写。HTML 用于撰写页面的内容，而 CSS 将决定这些内容该如何在屏幕上呈现。
网页的内容是由 HTML的元素构建的，这些元素如何呈现，涉及许多方面，如整个页面的布局，元素的位置、距离、颜色、大小、是否显示、是否浮动、透明度等等。

CSS语法

这条规则表明，页面中所有的一级标题都显示为蓝色，字体大小为12像数。

CSS选择器
1.id 选择器
注意：id选择器前有# 号。
找到id为所选的元素让它执行相应的功能。
元素的id值必须唯一， 因此，id 选择器适用范围只有一个元素。
2.class选择器
class选择器前有. 号。
找到class为所选的元素让它执行相应的功能。
元素的class值可以多个，也可以重复。因此，实际应用中，class 选择器应用非常普遍。

如何使CSS生效
1.外部样式表
可以在同一目录新建一个后缀名为css的样式表文件，
将css语句写入该样式表文件，最后在HTML文件中用
link rel=“stylesheet” type=“text/css” href="mycss.css"语句导入该样式表文件。
2.内部样式表
可以直接将样式放在 HTML 文件中
在头部head中写入CSS语句，同样用 link rel=“stylesheet” type=“text/css” href="mycss.css"语句使用该样式表文件。但注意在元素中引入了style标签，放入了样式。
3.内联样式
所谓内联样式，就是直接把样式规则直接写到要应用的元素中。
但内联样式是最不灵活的一种方式，完全将内容和样式合在一起，实际应用中非常少见。

级联的优先级
如果某元素如p在外部、内部及内联样式中都被设置
颜色，根据优先级来决定最终颜色。
样式的优先级从高到低分别是：
内联样式
内部样式表或外部样式表
浏览器缺省样式

颜色
我们可以采用颜色名称也可以使用颜色RGB16进制值，来设定前景或背景的颜色。例如:
h3 style="background-color:#ffa500
h3 style="background-color:LightGray

尺寸
我们可以用 height 和 width 设定元素内容占据的尺寸。常见的尺寸单位有：像数 px，百分比 %等。
先在HTML文档中建立数据的属性，再在相关CSS文档中写入相应的尺寸语句。
对于元素中的文本，我们可以简单的设置text-align属性为left, center, right即可（显然缺省的是左对齐），上例中已有相关的应用。

盒子模型
盒子模型指的是一个 HTML 元素可以看作一个盒子。从内到外，由内容 content, 内边距 padding, 边框 border, 外边距 margin构成的，如下图：

Content 表示盒子的内容，如文本、图片等
Padding 表示填充，也叫内边距，即内容和边框之间的区域
Border 表示边框，默认不显示
Margin 表示外边距，边框以外与其它元素的区域
另外，我们在用width属性设置元素的宽度时，实际上只设置了其内容的宽度。

边框与边距
用border来设置边框，padding来设置边距。
border-bottom 底部边框
border-radius 圆角边框
border-left/right 左/右部边框
padding-top 上边距
padding-bottom 下边距
padding-left/right 左/右边距

定位
position属性用于对元素进行定位。
position: static；静态定位
position: relative; 相对定位
position: fixed; 固定定位
position: absolute; 绝对定位

溢出
当元素内容超过其指定的区域时，我们通过溢出overflow属性来处理这些溢出的部分。
visible 默认值，溢出部分不被裁剪，在区域外面显示
hidden 裁剪溢出部分且不可见
scroll 裁剪溢出部分，但提供上下和左右滚动条供显示
auto 裁剪溢出部分，视情况提供滚动条

浮动
设置float属性让某元素进行某方向上的移动，其周围的元素也会重新排列。

不透明度
我们可以用opacity对任何元素（不过常用于图片）设置不透明度。
值在[0.0～1.0]之间，值越低，透明度越高。

组合选择器
CSS有三种选择器：元素、id 和 class。我们可以将其组合，得到更加精准简洁的选择。
1.后代选择器
以空格作为分隔，如：.haha p 代表在div元素内有.haha这种类的所有元素。
2.子选择器
也称为直接后代选择器，以>作为分隔，如：.haha > p 代表在有.haha类的元素内的直接

元素。

伪类和伪元素
伪类（pseudo-class）或伪元素（pseudo-element）用于定义元素的某种特定的状态或位置等。
使用伪类的语法：
/* 选择器后使用 : 号，再跟上某个伪类/伪元素 */
selector:pseudo-class/pseudo-element {
property:value;
}