CSS是什么CSS怎么用（快速入门）CSS选择器（重点+难点）美化网页（文字、阴影、超链接、列表、渐变…）盒子模型浮动定位网页动画（特效效果）

 

　　Cascading Style Sheet 层叠级联样式表

 

　　CSS：表现（美化网页）

 

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

 

　　CSS1.0

 

　　CSS2.0 DIV（）块 + CSS，HTML 与 CSS 结构分离的思想，网页变得简单，SEO

 

　　CSS2.1 浮动、定位

 

　　CSS3.0 圆角、阴影、动画… 浏览器兼容性

 

　　练习格式：

 

　　建议使用规范：

 

　　CSS：优势

 

　　内容与表现分离网页结构表现同一，可以实现复用样式十分丰富建议使用独立于html的css文件利用SEO，容易被搜索引擎收录！

 

　　拓展：外部样式两种写法

 

　　连接式：

 

　　html

 

　　导入式：

 

　　@import 是CSS2.1特有的！

 

　　? 首页link和import语法结构不同，前者是html标签，只能放入html源代码中使用，后者可看作为css样式，作用是引入css样式功能。import在html使用时候需要

 

　　作用：选择页面上的某一个或者某一类元素

 

　　标签选择器：选择一类标签

 

　　类选择器 class：选择所有class属性一致的标签，跨类名 .类名{}

 

　　**id选择器：全局唯一！ #id名{} **

 

　　优先级：id > class > 标签

 

　　后代选择器：在某个元素后面

 

　　子选择器：一代

 

　　相邻选择器：同辈

 

　　通用选择器

 

　　id + class 结合

 

　　1、有效的传递页面信息

 

　　2、美化页面、页面漂亮，才能吸引用户

 

　　3、凸显页面的主体

 

　　4、提高用户的体验

 

　　span标签：重点要突出的字，使用 span 套起来

 

　　1、颜色 color RGB RGBA

 

　　2、文本对齐的方式 text-align: center

 

　　3、首行缩进 text-indent: 2em

 

　　4、行高 line-height: 300px

 

　　5、装饰 text-decoration:

 

　　6、文本图片水平对齐 vertical-align: middle

 

　　正常情况下：a, a:hover

 

　　背景颜色

 

　　背景图片

 

　　margin：外边距

 

　　padding：内边距

 

　　border：边框

 

　　1、边框的粗细

 

　　2、边框的样式

 

　　3、边框的模式

 

　　盒子的计算方式：你这个元素到底多大

 

　　margin + border + padding + 内容宽度

 

　　4个角

 

　　块级元素：独占一行

 

　　行内元素：不独占一行

 

　　行内元素 可以被包含在 块级元素 中，反之，则不可以

 

　　这个也是一种实现行内元素排列的方式，但是我们很多情况都是用float

 

　　左右浮动 float

 

　　clear

 

　　解决方案：

 

　　1、增加父级元素宽度

 

　　2、增加一个空的div标签，清除浮动

 

　　3、overflow

 

　　4、父类添加伪类

 

　　小结：

 

　　浮动元素后面增加了空div

 

　　简单，代码中尽量避免空div

 

　　设置父元素的高度

 

　　简单，元素假设有了固定的高度，就会被限制

 

　　overflow

 

　　简单，下拉的一些场景避免使用

 

　　父类添加一个伪类：after（推荐）

 

　　写法稍微复杂，但是没有副作用

 

　　display

 

　　方向不可以控制

 

　　float

 

　　浮动起来的话会脱离标准文档流，所以要解决父级边框塌陷的问题

 

　　相对定位：position: relative

 

　　相对于原来的位置，进行指定的偏移，相对定位的话，它仍然在标准文档流中，原来的位置会被保留

 

　　练习：链接卡

 

　　定位：基于xxx定位，上下左右

 

　　1、没有父级元素定位的前提下，相对于浏览器定位

 

　　2、假设父级元素存在定位，我们通常会相对于父级元素进行偏移

 

　　3、在父级元素范围内移动

 

　　相对于父级或浏览器的位置，进行指定的偏移，绝对定位的话，它不在标准文档流中，原来的位置不会被保留

 

　　图层

 

　　z-index：默认是0，最高无限

 

　　不透明度：opacity: 0.5;