CSS 概念

• css 全称 cascading style sheets，层叠式样式表，是一种用来表现HTML的文件样式的计算机语言。
• 作用：静态地修饰网页，并且可以配合各种脚本语言动态地对网页各元素进行格式化

CSS 的组成

层叠式

css 中贯穿始终的加载特性

• 层叠性
• 继承性

样式

定义如何显示 HTML 元素

• 文字文本
• 背景
• 盒模型
• 浮动
• 定位
• 其他

CSS 语法

CSS 规则

两个主要的部分构成：选择器，以及一条或多条声明

p(选择器){width:100px; height:100px}

书写位置

• 内嵌式

书写在head标签内

• 外联式

在head标签使用link标签链接

• 导入式

可以在前两种方式中利用@import url(路径) 语句进行引入其它css文件

实际应用

小型案例：可以使用内嵌式 CSS。

实际工作、大型网站项目：推荐使用外联式 CSS。

习惯代码书写风格

代码风格是实际开发中并非强制标准的书写方式

展开格式 ：开发过程使用，代码可读性强，便于调错。

p {
    width: 100px；
    height: 100px;
}

紧凑格式 ：上传服务器时使用，减少不必要的空白字符，压缩文件大小，利于传输。

p{width:100px；height:100px;}

CSS 中的英文可以使用大写，也可以使用小写(建议使用小写)

空格规范

选择器与大括号 {} 之间保留一个空格。

冒号后面，属性值前面，保留一个空格。

CSS 常用样式

文字三属性

• 颜色 color

• 字体 font-family

可设置多个属性，需逗号隔开。

实际只会加载一种字体。

英文字体需写在前面，还需要设置一个通用字体在后面

• 字号 font-size

IE chrome 默认字号16px

最小字号8px 再小会出现兼容性问题

盒子实体化三属性

• width
• height
• background-color

CSS 选择器

种类 功能

• 基础选择器：

标签选择器（全局样式），

id选择器（单选，不建议用于设置样式），

类选择器（部分重复样式），

通配符选择器（案例使用，实际不使用）

• 高级选择器：

后代选择器（空格分隔，减少 class 属性的定义使用，选择效率更高），

交集选择器（连续书写）

并集选择器（逗号分隔，默认样式清除）

CSS层叠式

继承性

一个标签没有设置一些样式，但它的祖先级设置了，最终浏览器上该标签也加载了这些样式，这些样式是从祖先级的样式中继承过来的。

层叠性

就近原则

选中祖父级标签在 HTML 结构中距离目标标签的 远近，近的层叠远的。

若距离一样就比权重

两者都一样比书写顺序

比权重

important>行内式>通配符选择器>标签选择器>类选择器>id选择器