CSS知识点整理（pink老师课程的学习笔记）

CSS知识点整理

CSS简介

CSS语法规范

代码风格

CSS引入方式

CSS元素显现方式

CSS三大特性

选择器

• 简单选择器
• 复合选择器

字体 文本 背景属性

• 字体属性
• 文本属性
• 背景属性

盒子模型

浮动

定位

---

CSS简介

CSS是层叠样式表的简称；
也是一种标记语言，用来美化网页

CSS语法规范

选择器 {一条或多条声明}

其中选择器是要美化的对象，声明是对对象设置的具体样式
如：

代码风格

• 样式格式书写：（1）紧凑 （2）展开（一个属性一个属性写）

• 样式大小书写：用小写字母

• 空格规范：
  （1）属性值前，冒号后要有空格 如 color： red;
  (2) 选择器和{}中间要有空格 如 div { color：pink; }

CSS引入方式

（1）内部样式表（嵌入式）
    写在html文件的<style></style>标签里，控制的是当前的html页面
（2）行内样式表
    直接写在标签内部 ,只美化这个标签
    如：<p style="color: red;font-size: 10px;">我是一个段落</p>
（3）外部样式表
   样式写在css文件里，之后把css文件引入到html文件就好
   分两步：a.建立css文件 ,把代码写在css文件就不用<style></style>标签
          b.在html文件中用<link rel="stylesheet" href="css文件路径"/>标签引入

CSS元素显现方式

（1）块元素

如：<p></p> <div></div>
特点：a.独占一行
      b.高度 宽度 外边距 内边距可以设置
      c.宽度默认与父亲宽度相等
      d. 块元素里可放块元素 行内元素 行内块元素
注意：文字类元素（标签）不能放块元素
      （如<h3></h3> <p></p>） 

(2)行内元素

如：<span></span> <a></a>
特点：a.一行可放多个行内元素
      b.宽高设置无效
      c.默认宽度为文本宽度
      d.行内元素只能放文字或其他行内元素
注意：<a></a>中可放块级元素，但把它转换为块级元素再放更安全  

（3）行内块元素（既有块元素又有行内元素的特点）

 如：<img/> <input/>
 特点：a.一行可显现多个，但中间有空隙
      b. 默认宽度为文本宽度
      c.高度 宽度 外边距 内边距可以设置

行内显现模式的转换

给元素添加属性：
display: block;（转化为块元素）
display: inline;（转化为行内元素）
display: inline-block;（转化为行内块元素）

CSS三大特性

（1）层叠性

 当某个盒子被多个选择器设定样式
 若样式相同，则会体现层叠性，后来者居上
 若样式不同，不层叠

（2）继承性

子元素会继承父元素的某些样式（尤其是文字类样式）
应用：行高的继承性
通常给body标签设置行高，然后其子元素都不用设置行高，直接继承
body {font:12px/1.5 'Microsoft Yahei' }
1.5即行高为当前字体大小的1.5倍  ，1.5可加/不加单位

（3）优先性（与权重有关）

当同一元素被多个不同选择器设置相同样式时会有优先执行哪一个选择器的问题
如<div class="box">我是盒子</div>
   div {color="pink"}
   .box {color="red"}
   结果它是红色的 因为类选择器权重大于标签选择器
  权重等级：

此图来自pink老师课程截图

权重的等级判断和计算：
等级判断：（1）权重由4个数字组成，从左到右以此判断
              某一数值相同则判断下一位
          （2）注意继承的权重为0，所以即使父元素的权重多高，
              也和子元素无关的，子元素执行哪个样式要看子元素的权重判断
       （ 例子： 给body标签设置color=“red” 但链接标签仍然是blue
        因为浏览器默认给它设置 a {color:blue;} 
        而标签选择器的权重大于继承）
权重计算：直接相加但不会有进位
  如：0，0，0，1 + 0，0，0，1=0，0，0，2
     10个 0，0，0，1相加等于0，0，0，1，0  （不会进1）

选择器

(1)作用：选择标签（要美化的对象）

（2）分类：简单选择器和复合选择器

简单选择器

a.标签选择器：作用：将一类标签都选出来
如： div {color: pink;} 将所以盒子标签的文字都设置为pink

b.类选择器：
作用：选择其中一个或几个标签
语法： .+类名 {–}
对应标签添加属性 class=“类名”（使其对应起来）

多类名：一个标签可设置多个类名（多对应）

 作用：可以用于既设置公有样式又设置自己特有的
 如：<div class="color font"></div> 

c. id选择器（和类选择器很像，只是只能调用一次）
口诀：样式#定义，结构id调用，只能调用一次，别人切勿使用
语法： #名字 {} 调用：添加属性 id=“名字”
#box {} <div id="box"></div>

d.通配符选择器
作用：对页面中所有元素设置样式
语法：* {}

复合选择器

字体 文本 背景属性

字体属性

文本属性

背景属性

盒子模型

学习盒子模型的原因：网页布局实际上是先准备好相关网页标签（盒子）
                  用css给盒子设置样式，摆放到相关位置（浮动和定位）
                  往盒子装内容

组成： border（边框）content（内容）
       padding（内边距）margin（外边距）

（ 4）表格细线边框的例子

此图来自pink老师课程截图
此图来自pink老师课程截图

清除内外边距：
网页元素（盒子）默认有内外边距，这会使网页比较乱，
所以要清除网页元素的内外边距
语法：   * { 
                padding：0px；
                margin：0px；
                
           }

浮动

需要浮动的原因：块级元素的盒子会独占一行，设置浮动后才可让多个块级元素
               横向排列。
用float设置浮动，使其移到一边直到左或右边缘碰到另一个盒子  

额外标签法：在浮动元素后面加一个块级空盒子，并对它设置clear属性

 给父元素添加overflow:hidden/auto/scroll;
       缺点：会隐藏溢出部分，若父盒子里的内容有溢出的，
       加了这个属性会使溢出部分隐藏

 给父元素添加after伪元素
 （额外标签法的升级版，但空盒子用伪元素选择器加在css里 
   伪元素在css3新增属性学）
   代码如下： 其中第二个选择器的作用是兼顾低配置的浏览器

此图来自pink老师课程截图

 给父元素添加双伪元素
（额外标签法的升级版，但空盒子用伪元素选择器加在css里，
  且在浮动元素的前后都加空盒子）

此图来自pink老师课程截图

定位

作用：可使盒子自由移动或固定在屏幕的某个位置且可压住其他盒子
定位=定位模式+位偏移（即最终距top bottom left right多少）

绝对定位的盒子要实现居中对齐：
（加了绝对定位的盒子不能用margin：0 auto；设置居中对齐）
方法： position: absolute;
            left:50%;
            margin-left: -20px;(负的盒子宽度，即向左走盒子宽度)