CSS简介

「1.1HTML的局限性」

  • HTML满足不了设计者的需求，可以将网页结构与样式相分离，这样就可以在不更改网页结构的前提下，更换网站的样式。
  • 操作html属性不方便
  • HTML里面添加样式带来的是无尽的臃肿和繁琐

「1.2CSS网页美容师」

CSS是层叠样式表(Cascading Style Sheets)的简称,有时我们也会称之为CSS样式表或级联样式表，CSS是也是一种标记语言。主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片外形(宽高、边框样式、边距等）以及版面布局和外观显示样式。CSS让我们的网页更加丰富多彩，布局更加灵活自如。简单理解：CSS可以美化HTML，让HTML更漂亮，让页面布局更简洁。

总结：

  • HTML主要做结构，显示元素内容.

  • CSS美化HTML，布局网页.

  • CSS最大价值：由HTML专注去做结构呈现，样式交给 CSS，即结构(HTML)与样式(CSS)相分离

「1.3CSS语法规范」

使用HTML时，需要遵从一定的规范，CSS也是如此。要想熟练地使用CSS对网页进行修饰，首先需要了解CSS样式规则。 CSS规则由两个主要的部分构成：选择器以及一条或多条声明。

  1. 选择器是用于指定CSS样式的HTML标签，花括号内是对该对象设置的具体样式

  2. 属性和属性值以“键值对”的形式出现

  3. 属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等

  4. 属性和属性值之间用英文“:”分开

  5. 多个“键值对”之间用英文“;”进行区分

「1.4CSS注释」

1
/*这是注释*/

CSS引入方式

CSS的三种样式表

按照CSS样式书写的位置（或者引入的方式），css样式表可以分为三大类：

  1. 内部样式表（嵌入式）
  2. 行内样式表（行内式）
  3. 外部样式表（外链式）

「2.1内部样式表」

内部样式表（内嵌样式表）是写到html页面内部，是将所有CSS代码抽取出来，单独放到一个style标签中。

1
2
3
4
5
6
7
8
9
10
11
12
13
<head>
<style type="text/CSS">
    选择器（选择的标签） { 
      属性1: 属性值1;
      属性2: 属性值2; 
      属性3: 属性值3;
    }
    div {
     color: red;
     font-size: 12px; 
}
</style>
</head>
  • style标签理论上可以放在html文档的任何地方，但一般会放在文档的head标签中
  • 通过此种方法，可以方便控制当前整个页面中元素样式设置
  • 代码结构清晰，但并没有实现结构与样式完全分离
  • 使用内部样式表设定CSS，通常被称为嵌入式引入，这种是练习常用的方法

「2.2行内样式表」

行内样式表（内联样式表）是在元素标签内部的style属性中设定CSS样式，适合于修改简单样式。

1
2
3
4
5
6
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 
    内容 
</标签名>
<div style="color: red; font-size: 12px;">
    示例
</div>
  • style其实就是标签的属性
  • 在双引号中间，写法要符合CSS规范
  • 可以控制当前的标签设置样式
  • 书写繁琐，没有体现结构与样式相分离的思想，不推荐大量使用
  • 使用行内样式表设定CSS，通常被称为行内式引入

「2.3外部样式表」

实际开发中使用的都是外部样式表，适合样式较多的情况，核心是样式单独写到CSS文件中，之后把CSS文件引入到HTML页面中使用

引入外部样式表分为两步：

  1. 新建一个后缀名为**.css**的样式文件，把所有CSS代码都放在此文件中
  2. 在HTML页面中，使用link标签引入这个文件
1
<link rel="stylesheet" href="index.css">
属性 作用
rel 定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件
href 定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径

在使用外部样式表设定CSS，通常也被称为外链式和链接式引入，这种方法是开发中常用的方法。

「2.4CSS引入方法总结」

样式表 优点 缺点 使用情况 控制范围
内部样式表 部分结构与样式相分离 没有彻底分离 较多 控制一个页面
行内样式表 书写方便，权重高 结构样式混合 较少 控制一个标签
外部样式表 完全结构与样式相分离 需要引入 最多 控制多个页面

CSS三大特性

CSS有三个非常重要的特性：层叠性、
继承性、优先级。

「3.1层叠性」

相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突的问题。

层叠性原则：

  • 样式冲突，遵循的是就近原则，哪个样式离结构近，就执行哪个样式
  • 样式不冲突，不会层叠

层叠性

「3.2继承性」

现实中的继承：我们继承了父亲的姓氏

CSS中的继承：子标签会继承父标签的某些样式，如文本颜色和字号

简单理解就是子承父业。

  • 恰当的使用继承性可以简化代码，降低CSS样式的复杂性
  • 子元素可以继承父元素的样式（text- font- line-这些元素开头的可以继承，以及color属性）
  • 继承性口诀：龙生龙，凤生凤，老鼠的孩子会打洞

继承性

「3.3优先级」

css特殊性

概念：定义CSS样式时，经常出现两个或更多规则应用在同一元素上，此时如果：

  1. 选择器相同，则执行层叠性
  2. 选择器不同，就会出现优先级的问题

关于CSS权重，我们需要一套计算公式来去计算，这个就是 CSS Specificity（特殊性）。

选择器权重如下表所示

选择器 选择器权重
继承或者* 0，0，0，0
元素选择器（每个元素） 0，0，0，1
类，伪类选择器（每个类，伪类） 0，0，1，0
id选择器（每个id） 0，1，0，0
行内样式style=””（每个行内样式） 1，0，0，0
每个!important 最重要的 无穷大 
1
div { color: pink !important; }

优先级注意点：

  1. 权重是由4组数字组成的，但是不会有进位
  2. 可以理解为类选择器永远大于元素选择器，id选择器永远大于类选择器，以此类推
  3. 等级判断从左到右，左面的最大，一级大于一级，如果某一位数值相同，则判断下一位数值
  4. 可以简单记忆：通配符和继承权重为0，标签选择器为1，类（伪类）选择器为10，id选择器100，行内样式表为1000，！important无穷大
  5. 继承权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0

权重叠加：

如果是复合选择器，则会有权重叠加，需要计算权重。

1
2
3
4
5

div ul  li   ------>      0,0,0,3
.nav ul li   ------>      0,0,1,2
a:hover      -----—>      0,0,1,1
.nav a       ------>      0,0,1,1
  • 我们修改样式，一定要看该标签有没有被选中
  • 如果选中了，那么以上面的公式来计权重。谁大听谁的。
  • 如果没有选中，那么权重是0，因为继承的权重为0.

优先级

4.代码风格

团队约定：

  • 展开格式
  • 样式选择器，属性名，属性值关键字全部使用小写字母书写，属性字符串允许使用大小写
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

/*1.紧凑格式 (Compact)不推荐*/
h3 { color: deeppink;font-size: 20px;}

/*展开格式（推荐）*/
h3 {
 color: deeppink;
    font-size: 20px;    
}

/* 推荐 */
h3{
 color: pink;
}
 
/* 不推荐 */
H3{
 COLOR: PINK;
}