css class之间引用_学习CSS基础

CSS学习笔记 通过学习本篇文章你将了解css基本语法，标签的使用，学会使用css选择器对网页的样式进行操作。

    概述

一、css概念

css 全称 cascading style sheets，层叠式样式表，是一种用来表现 HTML 的 文件样式的计算机语言。

作用：静态地修饰网页，并且可以配合各种脚本语言动态地对网页各元素进行格式化。

     css语法

一、书写位置

css 的代码根据书写位置不同分为四种书写方式：内联式、内嵌式、 外联式、导入式。

内联式

内联式，也被习惯叫做行内式 书写位置：在 HTML 标签之上的 style 属性中书写 css 样式。 所有的 css 样式属性总体组成标签的 style 属性的属性值 1

内嵌式

书写位置：在 HTML 文件中， 标签内部有一个 /*内部书写css代码*/div{width:100px;height:100px;font-size:10px;}

外联式

外联式 CSS，也可以叫做外链式 CSS、外部 CSS。 书写位置：在一个单独的扩展名为 .css 的文件中。 书写语法：内部代码与内嵌式样式表中 选择器去选中标签，添加对应的样式。 注意：在 .css 文件中书写时，不需要再加 外联式引用 外联式样式表必须引入到 HTML 文件中，才能正常进行加载。  引入方式：在 HTML 中的  标签内部使用  标签进行引入。

标签属性：

属性名	属性值	说明
rel	"stylesheet"	表示引入的外部文件与 HTML 之间的关系，样式表
href	css文件路径	hypertext reference，超文本引用
type	"text/css"	表示加载时代码按照纯文本形式的 css 代码加载。HTML5 中可以省略 type 属性不写。

导入式

书写位置：在内嵌式样式表 导入方式：利用一条 @import url(路径) 语句进行引入。 @import url(css/01.css);div{background-color:red;}

二、css的规则

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明 p  {   选择器   属性名  width:100px; 属性值 font-size:14px;    }

样式规则

所有的 css 代码都必须书写在 标签内部的一对 css 在给某个标签设置样式前，必须使用选择器先选中标签。 css 样式的属性，属性名和属性值的键值对写法为 k:v; 。 给每个选择器添加的样式属性都必须写在一对大括号 {} 之内。 给一个标签添加的所有需要的样式，都要在 {} 内部一一罗列出来 /*内部书写css代码*/div{width:100px;height:100px;font-size:10px;}

注意事项

分号必要性：每条属性后面的分号必须写，如果不写，会导致后面所有的代码加 载错误。css 中所有属性与属性之间对空格、换行、缩进不敏感。

css注释语法

语法格式: /*中间部分为注释内容*/

     css常用样式

文字属性

颜色color 作用：给文字设置颜色。 属性名 k ：color 属性值 v ：颜色名、颜色值。 字体 font-family  作用：定义元素内文字的字体。 属性名 k ：font-family，字体属于 font 综合属性的一个单一属性。  属性值 v ：字体名称，必须包裹在一对引号中，属性值可以有多个，值之 间用逗号分隔。 字号 font-size 作用：设置文字的大小。属性名 k ：font-size，字号属于 font 综合属性的一个单一属性。属性值 v ：可以使用相对长度单位，也可以使用绝对长度单位。推荐使用 相对长度单位。

单位

相对长度单位	说明
px	像素值，最常使用的单位
em	倍数，继承自祖先元素设置的字号的倍数
%	百分比，继承自祖先元素设置的字号的百分比
绝对长度单位	说明
in	英寸
cm	厘米
mm	毫米
pt	点

盒子实体化三属性

如果想在浏览器中具体看到一个盒子占有的实际 位置，需要设置盒子可以实体化的三属性。

实体化属性

属性名	属性值	说明
width	px单位的数值	定义元素占有的宽度
height	px单位的数值	定义元素占有的高度
background-color	颜色名、颜色值	定义元素的背景颜色

     css选择器

标签选择器

通过标签名去选择标签元素。  书写方式：标签名。  选择范围：选中的是HTML文件中所有的同名标签。   注意：标签选择器可以选择所有的同名标签，会忽视 HTML 元素的嵌套关系，不管 嵌套多深，都能被选中。

ID选择器

通过标签上的 id 属性去选择标签。  书写方式：#id 属性值  选择范围：只能选中一个标签。  id 命名规则：必须以字母开头，后面可以有字母、数字、下划线、横线，严格区分 大小写。每个 id 属性值必须是唯一的，不能与其他的 id 同名。 注意：如果希望多个标签设置相同的样式，使用id选择器的话，必须给这多个标签 取不同的 id 名，分别选中设置。

类选择器

通过标签的 class 属性去选择标签。  书写方式：.class属性值  选择范围：是页面中所有 class 属性值相同的标签。  class 命名规则：必须以字母开头，后面可以有字母、数字、下划线、横线，严格 区分大小写。class 属性值可以与其他的class相同。

通配符选择器

通过一个特殊符号选择页面内所有的标签。  书写方式：*  选择范围：包含 标签在内的所有标签。

后代选择器

通过标签之间存的嵌套关系(族谱关系)去选择元素，基本组成部分就是基础选择器。  后代选择器也叫包含选择器。  书写方式：空格表示后代，基础选择器中间使用空格分隔，空格前面的选择器选中 的标签必须是后面选择器选中标签的祖先级。  选择范围：通过后代选择器中前面的一系列基础选择器缩小选择范围，最终由最后 一个选择器确定选中的标签。  注意：后代选择器必须满足所有的后代关系才能够被选中，后代关系不一定只能是 父子关系。

交集选择器

通过一个标签之上满足所有的基础选择器的需求去选择标签。  书写方式：基础选择器进行连续书写，如果有标签选择器参与交集，必须书写在开头。  选择范围：选择的是满足所有基础选择器需求的标签，如果一个条件不满足都不能 被选中。  比较常见的是标签与类的交集。

并集选择器

不同选择器选中的元素都要设置相同的样式，多次书写相同的样式属性对代码造成 浪费，可以将前面六种选择器可以进行并集书写，相当于一种简化写法。  书写方式：将多个选择器中间用逗号进行分隔，最后一个后面不能加逗号。  选择范围：是所有的单独选择器选中的标签的并集集合。

     css层叠式

css 的概念中，除了前面提到的样式外，还有一个重要的概念就是层叠式，层叠式是贯穿整个css的一个性质，包 含继承性和层叠性。

继承性

如果一个标签没有设置过一些样式，它的某个祖先级曾经设置过，在浏览器中该标 签也加载了这些样式，这些样式都是从祖先级继承而来，这种现象就是继承性。  能够被继承的样式是所有的文字相关样式属性，其他的属性都不能被继承。

层叠性

思考问题：同一个标签可以被多个选择器选中，如果选择器后面设置了相同的样式 属性，标签最终该加载哪个？或者，在继承性中，如果多个祖先都设置了相同的文 字样式，后代中该继承哪个祖先级的？  解决方法：就是使用层叠性去解决冲突。多个选择器在进行对比的过程中，最终只 有一个属性会成功加载，它会层叠、覆盖掉其他的属性。  判断最终胜出的属性是谁，需要依赖判断优先级。