【CSS学习小抄】简要入门

选择器

1. 标签选择器

   选择Html标签,设置样式

2. 类选择器（Class selectors）

   通过设置元素的class属性，可以为元素指定雷鸣。类名又开发这自己指定。文档中多个元素可以拥有同一个类名。在写css的时候，类选择器以英文句号（.）开头

3. ID选择器（ID selectors）

   通过设置元素的ID属性来制定ID.ID名由开发者指定，但每个文档必须是唯一的。在css的时候，ID选择器以#号开头。

PS：同时作用于一个标签的时候，三种选择器之间的优先级关系：ID选择器 > class选择器 > 标签选择器

1. 伪类选择器（Pseudo-classes selectors）

   css伪类（pseudo-class）加在选择器后面指定元素的状态的关键字，也就是指定元素在某种状态下的样式。如：:hover会在鼠标悬停在元素上时应用样式。

2. 基于关系的选择器

   基于元素关系的选择器，如节点的父子关系，兄弟关系。

PS:选择器大全：[w3cSchool选择器手册]

CSS字体

1. 通过 font 来修改字体的属性：

   字体加粗，字体的风格：斜体和字体的变形：小型大写字母

   字体的大小

   行高

   字体

   无法预料用户是否可以访问样式表定义的字体，所以在设置字体的时候加上系统的备用字体，以备替换。

   字号大小（font-size）：可以覆盖页面的问好大小，也可以改变页面的字号大小，所以应该尽可能的使用字体的相对大小。

   行高（line-height）

   装饰：单独的text-decoration可以的为文本自定其他风格，如下划线（underline）等，取消风格（none）

   font-style: italic; 斜体

   font-weight: bold; 加粗文本

   font-variant: small-caps; 小型的大写字母；

   font 语法：

   /* size | family */

   font: 2em “Open Sans”, sans-serif;

   /* style | size | family */

   font: italic 2em “Open Sans”, sans-serif;

   /* style | variant | weight | size/line-height | family */

   font: italic small-caps bolder 16px/3 cursive;

   /* The font used in system dialogs */

   font: message-box;

关于颜色

pass

添加信息内容

1. content属性

   利用选择器:before :after，插入元素。MDN参考

2. background控制

信息控制：列表

1. list-style 控制列表显示
2. 计数器Counter: counter(name, style)

信息控制：盒模型 MDNBOXes

外边距（透明）->边框（不同样式）->内边距（背景色）->元素
1. border 控制边框：边框的宽度，样式，颜色
可以通过none，hidden来移除边框，或者设置边框颜色为transparent让边框不可见，后者不改变布局。

可以单独制定一个方向上的边框属性：border-top, border-right, border-bottom, border-left。

2. 控制内边距(padding)，外边距(margin)

可以指定一个宽度，将作用于元素的四个方向。

可以指定2个宽度，第一个宽度将作用于顶部和底部，第二个宽度将作用于左边和右边

也可以分别指定四个方向，按照上，右，下，左的顺序。

布局，Big Topic

1. div + css经典布局。

2. 对齐：text-align(内容对齐=> left, right, center, justify)

   text-indent(内容缩进)

   这两个属性可以被子元素继承。可以作用于任何文本类型，不单指纯文本。

3. 浮动：float 强制元素靠左或靠右，clear 清除元素浮动属性。

4. 位置：position 可以设置元素的位置。

   relative 指定相对于原来位置的一个相对位移

   fixed 指定元素相对于窗口的确切位置，即使文档其他元素出现滚动，元素的位置依然不变。

   absolute 为元素指定相对于父元素的确切位置。只有当父元素使用了relative, fixed, absolute是才有效。可以为父元素指定position: relative;因为它不会产生移动。

   static 默认值。当明确要关闭位置属性的时候使用。

   PS: position 除了配合自身属性，还可以配合元素的属性top, right, bottom left ,width, height 来指定元素的位置和大小。

5. 表格样式：table 表头（header）, 表尾（footer）, 表体（body）。

   边框：单元格没有内边距，但有边框和内边距，默认边框被表格的border-spacing属性间隔（这不久差不多外边距的意思？），可以通过设置border-collapse来移除这样的间隔。

信息：media MDN参考

1. 为不同类型的显示媒体定义不同的样式，如打印print, 投影， 。。。。