3.css3深入，高级选择器浮动布局，html5/css3基础开始(推荐收藏)

文章目录

HTML03 CSS深入
- - 1 案例：九宫格
- 第二节：****CSS选择器深入****
- - 2.1 全局 *
  - 2.2 并集选择器
  - 2.4 儿子代选择器
  - 2.5 后代选择器
  - 2.8 css特性
- 第三节：标签分类
- - 3.1 标签分类
  - 3.3 练习折叠菜单
- 第四节：浮动布局
- - 4.1 什么是浮动
  - 4.2 浮动的由来

HTML03 CSS深入

1.什么是css

2.css用法

行内标签里面 style=“属性:属性值;”

内部：

外部

3.css基础选择器

id #id名强调唯一性

标签选中页面中所有的同类标签

类 .类名在同一个页面中可以重复使用

4.常见属性

字体样式 color、font-size、family、style、weight(100-900 bold bolder)

文本样式 text-align line-height white-space nowrap letter-spacing 字符间距 text-indent 缩进 text-decoration 文本修饰 underline 下划线 overline 上划线 line-through 中划线

背景样式 background-color,repeat ,image,position ,/size

文本修饰 text-decoration

transition:2s 动画延时2秒

1 案例：九宫格

<style type="text/css">p{border:1px solid red;width:64px ;height:110px;background:url(assets/精灵图.png) no-repeat -322px -140px;}</style></head><body><p id="aaa"></p></body>

第二节：CSS选择器深入

2.1 全局 *

/* 3.* 全局 表示通配符 匹配页面中的所有字符  优先级最低一般用于全局的设置*/*{color:red;}

2.2 并集选择器

/* 1.并集选择器 *//* h1,h2,h3,.aaa,h5,p{color:red;} */

2.4 儿子代选择器

/* 儿子代选择器: > 选择直接后代 *//* #father > pcolor:blue;} */

2.5 后代选择器

/* 后代选择器 ：选中所有的后代*/#father p{color:red;}

子代和后代选择器混合使用
#father > div  p{color:red;
}
/* #father > div > p{color:red;} */

2.8 css特性

cascading style sheet 层叠样式表

层叠性：如果多个选择器同时设置一个标签，如果设置的样式相同，按照优先级显示，否则，同时起作用。

继承性：子代元素会默认的继承父元素的样式（字体样式/文本样式），布局样式都不能继承。

第三节：标签分类

3.1 标签分类

为什么有些标签自己能占一行，为什么有些标签可以在一行内显示？

块状标签(block): 独占一行，可以设置宽高。

常用块状：div p h1-h6 table ul li ol li hr

div : 块状标签，层级标签(页面的布局)，没有语义的标签，语义由我们开发者设置。初始宽度为 100% ，高度为0

行内标签(inline): 不能设置宽高（img 和input 标签可以设置宽高置换元素），可以在一行内排列。初始宽高都由内容撑起来。

常用：input span img a br

**span: **行内标签行级文本容器。

<style type="text/css">#aaa{border:1px solid red;width:300px;height:300px;}span{border:1px solid red;width:200px;height:200px;font-size:50px;}</style></head><body><!-- 语义化 --><div id="aaa" class="">的风格和是否获得法国</div><span>sdfd</span></body>

3.3 练习折叠菜单

/* 使用display完成效果 子菜单本来不显示，当鼠标悬浮到首级菜单时，让子菜单显示 */ul{list-style:none;padding:0;}#menu{background-color:pink;width:150px;text-align:center;border:1px solid red;}/* 当鼠标悬浮到.firstMenu上时，让.firstmenu里边的 .sub 显示 */.firstMenu:hover .sub{display:block;}.sub{background:green;/* 让子菜单隐藏 */display:none;}</style></head><body><!-- 1.创建一个双层的菜单结构 2.确定li的高度3.确定悬浮时li的高度4.加动画效果--><ul id="menu"><li class="firstMenu">生产管理<ul class="sub"><li>原料管理</li><li>成品管理</li><li>工艺管理</li></ul></li><li class="firstMenu">市场管理<ul class="sub"><li>价格管理</li><li>占有率管理</li><li>退货管理</li></ul></li><li class="firstMenu">财务管理<ul class="sub"><li>现金管理</li><li>应收账管理</li><li>仓库管理</li></ul></li></ul>

第四节：浮动布局

标准文档流：

文档流指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式。并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。

元素浮动后可以设置宽高，还可以在一行内显示。类似于inline-block。

不同：inlin-block还是处于标准文档流内，浮动已经脱标。

4.1 什么是浮动

浮动就是让页面上的标签脱离标准流，向父标签的左边或者右边移动。直到遇到其它浮动标签或者到达父标签的边界。

停靠在父级元素的边框。左或者右。

4.2 浮动的由来

最初：人们想要一种效果，环绕，w3c 这帮人就搞出来float。

<style type="text/css">#aaa{border:1px solid red;width:500px;height:500px;}img {float:right;}</style></head><body><div id="aaa" class=""><img src="../images/7.gif">十大富豪说过的话是个负担和发达国家法国十大富豪说过的话是个负担和发达国家法国十大富豪说过的话是个负担和发达国家法国十大富豪说过的话是个负担和发达国家法国十大富豪说过的话是个负担和发达国家法国十大富豪说过的话是个负担和发达国家法国十大富豪说过的话是个负担和发达国家法国十大富豪说过的话是个负担和发达国家法国十大富豪说过的话是个负担和发达国家法国十大富豪说过的话是个负担和发达国家法国十大富豪说过的话是个负担和发达国家法国十大富豪说过的话是个负担和发达国家法国十大富豪说过的话是个负担和发达国家法国十大富豪说过的话是个负担和发达国家法国十大富豪说过的话是个负担和发达国家法国十大富豪说过的话是个</div></body>