标签：分离   级联   red   pre   美工   内容   run   tps   快速   

1、什么是CSS

如何学习？

1. CSS是什么
2. CSS怎么用（快速入门）
3. CSS选择器（重点+难点）
4. 美化网页（文字，阴影，超链接，列表，渐变……）
5. 盒子模型 （每个元素都有的边框之类的）
6. 浮动
7. 定位
8. 网页动画（进阶学习 特效 推荐菜鸟教程）

注意：

前端和java程序员的区别在于CSS，CSS不仅需要代码，还需要美工和模仿设计

1.1 、什么是CSS

层叠级联样式表

CSS：表现（美化网页）

字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动……

1.2、发展史

CSS1.0 只能美化一些基本内容，例如加粗字体，还可以使用继承

CSS2.0 DIV（相当于块，比p标签更灵活）+ CSS HTML与CSS结构分离的思想，网页变得简单，利于SEO（搜索引擎优化）

CSS2.1 更高级的用法，浮动，定位

CSS3.0 目前最新版：圆角边框，阴影，动画等新特性…… 浏览器兼容性，动画可能某些老式浏览器没有支持 支持前几个版本的CSS

1.3、快速入门

style标签可以在html中嵌入css代码，例如：

<style>
    h1{
        color:red;
    }
</style>

css代码格式：

选择器{
    声明1;
    声明2;
    声明3;
}

如果要将css与html分离，可以使用链接链到CSS文件：

<link rel="stylesheet" href="路径">

推荐使用分离的方式

css文件的优势：

1. 内容和表现分离
2. 网页结构表现同意，可以实现复用
3. 样式丰富
4. 建议使用独立于html的css文件
5. 利用SEO，容易被搜索引擎收录

1.4、三种css导入方式

1. 内部样式 在html中加入style标签
2. 外部样式 写在外部css文件中 注：css的注释是/* */
3. 行内样式 在标签内加上style属性

样式的优先级别：就近原则 谁离元素更近，优先级越高

扩展：外部样式两种写法：

• 链接式

<link rel="stylesheet" href="路径">

• 导入式 出自css2.1 现在不常用了，有弊端 会先展示网页骨架，之后再渲染

<style>
		@import url("css/style.css");
</style>

CSS3 教程1——基础知识

标签：分离   级联   red   pre   美工   内容   run   tps   快速   

原文地址：https://www.cnblogs.com/lb-blogs/p/14472232.html