3.1学习总结css

**

3.1学习

无意义的标签(@@@)

• div，无意义的块状元素标签。
• span，无意义的行内元素标签。
  **

CSS中的颜色（@@@）

1. 颜色的单词

2. 十六进制的数字。6位16进制的数字，每2位一组，总共3组。分别代表的都是红、绿、蓝。

   #008040

   #ff66cc可以简化成#f6c

   #FF4400可以简化#f40

   #FF4200不可以简化

3. rgb，格式rgb(红,绿,蓝)，值都为0~255之间的值。

4. rgba，格式rgb(红,绿,蓝,透明度)，多了一个透明度，透明度是0~1之间的值，0为完全透明，值越大越不透明。可以直接用.n的形式来表示。.5

5. 外部导入

格式：<link href="xxx.css" type="text/css" rel="stylesheet"/>
特点：可以被多个页面引入并且使用。
当样式冲突时，采用就近原则。哪个属性样式离被修饰的近就使用哪个。

CSS特性（@@@）

• CSS继承性：被包含的元素拥有外层元素的样式效果。

• CSS层叠性：CSS样式允许重复声明，相互的覆盖。

• 选择器（@@@@）

• 标签选择器，类型选择器，直接使用的是HTML标签名。

• *，通用选择器，选择文档中的所有的HTML标签。

• .className，类选择器

  类：具有相同特征的一系列事物。

  1. 在HTML中使用class属性给一个名字。

  2. 在CSS中以.开头后面跟的是你给定的类的名字。

  3. 注意：

  4. 类名区分大小写。

  5. span.red这样使用类选择器的意思是只选择span标签并且选中的span标签要有red这个类。

  6. 一个标签可以有多个类。
     链接伪类选择器

  链接伪类选择器只针对于HTML中的A标签。只有两种状态，已访问和未访问。

  a:link，匹配a标签，且定义了href的超链接没有被访问过。

  a:visited，匹配a标签，且定义了href的超链接已经被访问过了。
  动态伪类选择器

  • E:active，选择匹配的E元素，且这个E元素被激活。当你交互的那一刹那。
  • E:hover，选择匹配的E元素，且用户鼠标停留在E元素上的时候。
  • 注意：
  1. 写的时候要注意他们的顺序：link->visited->hover-active，必须遵循爱恨原则Love/HAte。
  2. 我们一般写的时候会先整体的设置a链接的样式，然后再用其他的选择器进行覆盖。

  3. 权重值（@@@）

同一个元素可能会被多个选择器选择，它们又应用了相同的规则，这个时候会产生冲突，这个时候你就需要去计算权重值。

一个权重值由4部分组成：（也可以认为是4位数）

• ID选择器选中的分值为100。
• 类选择器、伪类选择器选中的分值为10。
• 标签选择器选中的分值为1
• 通用选择器分值为0。
• 行内样式的权重值为1000。

1. 数值越大，权重越高。

2. 权重值相同name最后一个胜出。

3. 如果要忽略权重值得时候需要在任何需要包含的属性后面加上!important，这样可以避免他被更大的权重覆盖掉。

4. serif，衬线字体。
   笔画开始、结束的地方有额外装饰而且笔画的粗细会又不同的字体(字形)。比如说宋体、Georgia。

• sans-serif，无衬线字体。

  无衬线字体没有额外的装饰，笔画粗细差不多。比如说微软雅黑、Arial。
  现代网页中经常使用的无衬线字体。
  注意：

1. 我们在写的时候一般使用的是字体的英文名字，为了规避乱码的风险。
2. 设定的字体如果名字包含空格，则应该使用单引号包裹起来。
3. 可以定义多个字体，多个字体将按照列表中列出来顺序逐个查找，只要找到了一个就去应用如果到最后都没有找到name将会使用浏览器的默认字体（windows系统中，默认的字体就是微软雅黑）。

字体大小（@@@@）

如果你没有设置文本的大小的话那么使用的将会是系统默认的大小。这个大小一般是16px。

格式：font-size:value

value的值：

• px，像素。

  最小字号12px，但是0px是可以生效的。

• %，根据从父元素继承的大小来进行计算。

• em，根据从父元素集成的大小来进行计算（1em=100%）。

• rem，基于根元素的文本尺寸来进行定义的。根元素指的是html这个标签。

• 字体粗细（@@@@）

格式：font-weight:value

• normal，正常字体。
• bold，粗体。
• bolder，比粗体更粗。
• lighter，比普通字体更细。
• 100_{900`，是因为字体或字体族通常映射了9级的粗度。注意，虽然可以设置100}900的字体粗细度，但是这些数字并没有规定固定的粗细程度，很有可能100\200\300同样的粗细，500和600是同样的粗细。这完全可能，具体是否生效得看字体是否支持。CSS规范中规定了对应的粗细程度不比前一个关键字更细就是允许的。

通常normal等于400.

bold通常是700。

定义字体风格（@@@）

格式：font-style:value

• normal，正常的字体。
• italic，显示成斜体。

字体简写格式（@@@）

格式：font:style weight size family

注意：

1. style和weight的顺序是可以颠倒的。
2. size和family的顺序不能颠倒并且必须声明这两个值，否则整个font都会失效。