CSS速成第一天:

 思维导图:

 

目录

1.css简单介绍

2.什么是css和发展史

3.css快速入门及优势

5.三种基本选择器

6.层次选择器

7.结构伪类选择器

8.属性选择器:

9.css的作用即字体样式

10.文本样式

11.文本阴影和超链接伪类

12.列表样式练习

13.背景图像应用及渐变

14.盒子模型及边框使用

15.内外边距及div居中

16.圆角边框和阴影

17.display和浮动

18.overflow及父级边框坍塌问题

19.相对定位的使用及练习

20.动画及视野拓展


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.动画及视野拓展

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值