CSS设计彻底研究（复习）

目录

第一章 HTML和CSS核心基础

• 1.2 在HTML中引入CSS的方法

第二章 选择器（暂时不学了）

第三章 深入理解盒子模型

• 3.2 边框（border）
• 3.5 盒子之间的关系
• 3.6 盒子在标准流中的定位原则

第四章 盒子的浮动和定位

• 4.1 盒子的浮动
• 4.2 盒子的定位

第五章 文字与图像

• 设置字体
• 文字大小
• 行高
• font
• 文字颜色与背景颜色
• 段落的垂直对齐方式

---

第一章 HTML和CSS核心基础

• 1.2 在HTML中引入CSS的方法

   - 链接式导入会在装载页面主体之前装载CSS文件。
/*  外部导入链接式 */
<link href="./main_test.css" rel="stylesheet" type="text/css"/>

---

第三章 深入理解盒子模型

• 3.2 边框（border）
  • border的3个属性分别是color、width和style。
  • 在设置边框的时候可以分别使用border-color、border-width、border-style分别设置他们；
  • 边框的缩写形式如下：

div {border:1px solid black;}

• 边框与背景
  • 在给元素设置背景色时，背景色的作用域为content + padding + border

• 3.5 盒子之间的关系
  • 标准文档流
    • 块级元素（block level）
      • 占据着一个矩形区域，他们总是以一个块的形式表现出来并且跟同级的兄弟块依次竖直排列，左右撑满；
    • 行内元素（inline level）
      • 例如<strong></strong>标记，就是典一个型的行内元素，此类标记本身不占据独立的区域，仅仅是在其它元素中指定了一定的范围，又例如<a></a>也是一个行内元素；

• 3.6 盒子在标准流中的定位原则
  • 1. 在「行内元素」相邻的margin，如左边span的右margin是30px，右边span左margin是40px，那么相邻的span会间隔70px；
  • 2. 在上下相邻的「块级元素」则不是行内元素这种规格，如上div的下margin是40px，下div的上margin为30px，那么就会取较大值，这种现象称之为塌陷。

• 4.1盒子的浮动

  • loat 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。

  • 如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。

  • 假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。

• 4.2 盒子的定位

  • 这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。
    ，就是典一个型的。

  • relative

    • 会相对「其原本的位置进行定位」，通过偏移指定距离，到达新的位置，相对定位（ralative）的盒子仍在标准流中，他对父块和兄弟块都没有影响。

#block1{
    position:absolute;
    left:30px;
    top:30px;
}

• • absolute
    • 绝对定位的盒子以它“最近”的一个“已经定位”的祖先元素为基准进行偏移，如果没有已经定位的祖先元素 ，那么就会以浏览器为基准进行定位。
    • 决定定位的盒子会从标准流中脱离，对其后的兄弟盒子没有影响。
    • 所谓已经定位是指元素的position属性被设置且不是static的任何一种值。
    • 如果盒子设置了绝对定位，但是没有设置偏移值，那么盒子还会在他原来的位置，但是会脱离标准流；

• fixed

  • 生成绝对定位的元素，相对于浏览器窗口进行定位。

• z-index
  -属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

• display

  
  图片.png

第五章 文字与图像

• 设置字体
  • font-family 可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。也就是说，font-family 属性的值是用于某个元素的字体族名称或/及类族名称的一个优先表。浏览器会使用它可识别的第一个值。

font-family:"Times New Roman",Georgia,Serif;

• 文字大小
  • 设置文字大小；

font-size:12px;

• • em单位： font-size:2em /* 比原来字体大一倍 */
  • 百分号单位：font-size:200% /* 比原来字体大一倍 */

• 行高（line-height）
  • 该属性会影响行框的布局。在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离。

line-height:18px;

• 设置行高也可以不加单位，如果原来行高是12px；那么设置之后因是18px;

line-height:1.5;

• font属性；

  • 这个简写属性用于一次设置元素字体的两个或更多方面。使用 icon 等关键字可以适当地设置元素的字体，使之与用户计算机环境中的某个方面一致。注意，如果没有使用这些关键词，至少要指定字体大小和字体系列。

  • 可以按顺序设置如下属性：

    • font-style （字体样式）
    • font-variant （设置为小型大写字母字体）
    • font-weight （设置字体粗细）
    • font-size/line-height （字体大小和行高）
    • font-family （设置字体）

    font:italic bold 12px/20px arial,sans-serif; 
    font:16px/1.5 Arial;  /* 至少设置两个属性 *

• text-transform 属性

h1 {text-transform:uppercase}  /* 全部大写 */
h2 {text-transform:capitalize} /* 首字母大写 */
p {text-transform:lowercase}  /* 全部小写 */

• text-decoration
  • 文字装饰效果

h1 {text-decoration:overline}
h2 {text-decoration:line-through}
h3 {text-decoration:underline}
h4 {text-decoration:blink}   /* 没有效果 */

• text-indeng （文字缩进）
  • 将段落的第一行缩进 2个字的大小：

text-indent:2em;

• 段落的垂直对齐方式

---