思维导图:
目录:
1.css简单介绍
css是什么 css怎么用 css选择器 美化网页 盒子模型 浮动 定位 网页动画(特效)
2.什么是css和发展史
全称:cascading style sheet层叠级联样式表
css1.0
css2. DIV(块) CSS ,提出了HTML和CSS结构分离的思想
css2.1 浮动,定位
css3.0 圆角,阴影,动画… 浏览器兼容性~
3.css快速入门及优势
包层次
语法: <style> :选择器{声明1;声明2; ……}
如何引入css文件: <link rel="stylesheet" href="路径">
优势:内容和表现分离 网页结构变现同一可以实现复用 样式十分丰富 建议使用独立于html的css文件 利用SEO容易被搜索引擎收录
行内样式:再标签中编写样式
内部样式:在同文件中外部编写
外部样式:在不同文件中编写:link链接式 @import ulr导入式
执行顺序:就近原则/覆盖原则
5.三种基本选择器
作用:选择页面上的某一个或者某一类元素
三种:标签选择器:写在style标签中,针对所有的该标签
类选择器:针对所有属于该class的标签,语法为.class{声明;}
id选择器:针对id为某值的特定标签,语法为#id{声明;}
三种选择器强弱:id选择器>class选择器>标签标签选择器
6.层次选择器
后代选择器:所有后代,语法: 父标签 子标签{声明;}
子选择器:第一代后代,语法: 父标签>子标签{声明;}
相邻选择器:同级别只选一个,向下选择 语法:#id/.class + 同级标签{声明;}
通用选择器:同级别所有,向下选择 语法:#id/.class ~ 同级标签{声明;}
7.结构伪类选择器
语法:例子:ul li:first-child{声明;} 还有last-child nth-child()等
等到用得到的时候再查即可
8.属性选择器:
语法: a[id="xxx"]{} a[class="xxx"]{} =是绝对等于 *=是包含
可以与xpath语法相比较,xpath中是 [@id="xxx"] *=用contains()替代
9.css的作用即字体样式
字体样式 字体粗细 字体大小
10.文本样式
颜色 背景颜色 文本对齐 文本缩进 上中下划线 超链接去下滑线
11.文本阴影和超链接伪类
文本阴影: 为文字赋予阴影效果
超链接伪类:为超链接不同的状态设置不同的样式
鼠标悬浮 鼠标按住未释放 未访问过 已访问过
12.列表样式练习
13.背景图像应用及渐变
背景图像例子:再div中定义 background-image:url()默认全部平铺,background-repeat设置平铺方向限制
background:颜色 图片 图片位置 平铺方式
渐变:略
14.盒子模型及边框使用
细节:body等很多标签都有一个默认的外边距margin
border边框: 属性:粗细 样式 颜色
15.内外边距及div居中
16.圆角边框和阴影
border-radius:
17.display和浮动
display 属性:inline编成行内元素 inline-block变成块元素
进行行内元素/块元素 类型叠加 是为了保持块元素的特性同时能写在一行,为了做顶部横向导航栏
18.overflow及父级边框坍塌问题
overflow 属性用于控制内容溢出元素框时显示的方式
19.相对定位的使用及练习
static定位:默认值,正常文档流
fixed定位:元素的位置相对与浏览器窗口是固定位置
relative定位:相对定位元素的定位是相对其正常位置
absolute定位:绝对定位的元素的位置相对于最近的已定位父元素,如果没有已定位的父元素,那么它的位置相对于<html>
sticky定位:粘性定位
重叠的元素:用z-index属性决定 图片/文字覆盖度优先度
还有个透明度的属性
20.动画及视野拓展