pythonav.com
首页
知识库
内部资料
免费视频
每天20道面试题
登录
注册
CSS(Cascading Style Sheets)称为层叠样式表,用于对页面进行美化。在学习Html页面时,大家都会发现我们的页面丑的一批,从今天开发就让我们的页面好看起来,例如:
```html
CSS学习
Python资源网
首页
知识库
内部资料
``` ### 2.1 应用方式 css的样式有很多种,当如果想要把css样式应用到特定标签上有三种方式: - 标签属性上编写,适用范围:指定一个标签。【不推荐,多标签无法复用样式】 ```html
Alex
``` - head标签中定义,适用范围:当前页面的所有标签。【推荐,多个标签可复用样式】 ```html
CSS学习
Alex
mjj
``` - 在css文件中定义,适用范围:所有引入css文件的页面。【推荐,多页面、多个标签均可复用样式】 - 创建css文件,如:common.css ```css div { color: green; } ``` - 创建html文件,如:index.html ```html
CSS学习
Alex
老男孩
``` 以后在企业中写应用css样式时,写单页面时会把样式写在head头部;写多页面时,会把样式写入css文件,然后再在要应用的html页面引入css即可。 ### 2.2 选择器 学习选择器的目的就是选中html页面中指定标签,便于以后给他应用样式. #### 2.2.1 标签选择器 在body中找到所有指定标签,例如:找到所有a标签,让他们绿了。 ```html
CSS学习
周杰伦
Alex
Alex
朗朗
``` #### 2.2.2 id 选择器 在body中找一个id匹配的标签。(HTML中ID属性应唯一,相当于人的身份证号码),例如:找到id等于i1的标签,让他绿了。 ```html
CSS学习
老男孩
李杰
武沛齐
``` #### 2.2.3 class 选择器 在body中找到所有class属性值匹配的标签。例如:找到所有class等于head的标签,让他绿了。 ```html
CSS学习
老男孩
李杰
武沛齐
``` #### 2.2.4 属性选择器 在body中找到所以class属性值匹配的标签。 ```html
CSS学习
老男孩
李杰
武沛齐
``` 注意:属性和值都比较灵活,可以随意定制。 #### 2.2.5 后代选择器 在body标签中根据父子关系找到指定标签。 ```html
CSS学习
老男孩
北京
沙河
沙河高晓松Alex
沙河大烧饼Alex
武沛齐
``` #### 2.2.6 选择器分组 对选择器进行分组,无需重复编写。 ```html
CSS学习
李杰
Alex
沙河高晓松
沙河小王子
``` ### 2.3 CSS样式 此部分将介绍前端开发中常用的一些css样式,通过以下示例来一步步完成美乐乐商城的项目。 #### 2.3.1 height 高度 & width 宽度 在html中如果想要给标签设置高度和宽度的话,需要使用height和width属性,并且在设置时有两种单位: - 像素,根据像素设置。 - 百分比,根据百分比设置。 *因网页高度无限制,所以默认高度无法设置百分比,如果非要设置,则需要父级标签设置固定高度,子标签便可使用百分比设置高度。* 注意:行内标签无法设置高度和宽度,如果想要设置必须转换为块级标签才能应用。
```html
CSS学习
标签1
标签2
标签3
标签4
``` #### 2.3.2 display 显示 display属性有3个常用的值,用于修改属性的展示状态: - `display:block`,变为块级标签。 - `display:inline;`,变为行内标签。 - `display:inline-block`,变为行块内标签(行内和块级特性结合)。 - `display:none`,把标签隐藏。(设置display:none隐藏标签,移除之后显示标签)
```html
CSS学习
div标签
我是div
我是div
span标签
我是span
我是span
特殊的display:inline-block
我是
武沛齐
``` #### 2.3.3 float 浮动 float浮动用于实现N个标签并排存放(主要针对块级标签,行内标签默认就可以并排存放)。 页面布局时,一般都会使用div标签及float属性来实现,float设置时一般有两个值: - `float:left`,标签并排向左浮动。 - `float:right`,标签并排向右浮动。
```html
CSS学习
向左浮动
天堂
地狱
```
特别注意:
布局中如何使用了float浮动,就会出现脱离文档流的现象,如下图父标签没有被撑起来:
为了防止脱离文档流现象,所以**以后只要出现浮动就记得要清楚浮动**,即:
```html
CSS学习
正确示例
向左浮动
天堂
地狱
向右浮动
天堂
地狱
一个向左一个向右
天堂
地狱
``` #### 2.3.4 font 字体 & 颜色 在前端开发过程中会经常调整 字体格式、字体大小、字体颜色。 - 字体格式 - 字体大小 - 字体加粗 - 字体颜色
```html
CSS学习
字体格式
一白日依山尽,黄河入海流。
欲穷千里目,更上一层楼。
字体大小
从此寻花问柳,闭口不谈一生厮守。
从此红灯绿酒,再也不想牵谁的手。
从此人海漂流,闭口不谈爱到白头。
字体加粗
我愿化身石桥 只为看一眼你的内裤。
中年男人哪有容易的事?
中年男人容易胖、容易老、容易头发变稀少。
字体颜色
远上寒山石径斜,白云生处有人家。
停车坐爱枫林晚,霜叶红于二月花。。
``` #### 2.3.4 文字对齐方式 页面上如果想要设置文字对齐方式,可以分为以下情况: - 水平方向:左、中、右 - 垂直方向:上、中、下
```html
CSS学习
水平方向
Alex媳妇满身大汗
王老汉
武老汉
垂直方向
Alex媳妇满身大汗
王老汉(推荐)
武老汉,这个知识点下一节细讲
``` #### 2.3.6 padding 内边距 padding内边距作用是 为被应用的标签创建一部分内部间距。边距可以设置上、下、左、右方向。 ```css /* 单独设置上下左右内边距 */ padding-left:8px; padding-right:2px; padding-top:4px; padding-bottom:18px; /* padding:上 右 下 左; */ padding:10px 0 2px; 4px; /* padding:上下 右左; */ padding:7px 5px; /* padding:上下右左; */ padding:8px; ```
```html
CSS学习
无内边距
听妈妈的话
小朋友你是否有很多问号,为什么别人在那看漫画,我却在学画画对着钢琴说话。
内边距示例1
听爸爸的话
小朋友你是否有很多问号,为什么别人在那看漫画,我却在学画画对着钢琴说话。
内边距示例2
听爸爸的话
小朋友你是否有很多问号,为什么别人在那看漫画,我却在学画画对着钢琴说话。
``` #### 2.3.7 margin 外边距 外边距用于相邻的标签之间增加距离用。边距可以设置上、下、左、右方向。 ```css /* 单独设置上下左右内边距 */ margin-left:8px; margin-right:2px; margin-top:4px; margin-bottom:18px; /* margin:上 右 下 左; */ margin:10px 0 2px; 4px; /* margin:上下 右左; */ margin:7px 5px; /* margin:上下右左; */ margin:8px; ```
```html
CSS学习
```
特别注意:
关于外边距还有两个特殊的知识点需要学习。 - body标签默认有一个 8px的外边距,所以你会发现默认的页面都有一个“白边”。
- 自动居中布局,你应该见过很多网站的内容都在中间放置,两边是空白。 ```css /* 只要指定宽度并设置margin为 0 auto 就可以实现div 自动居中布局*/ width:900px; margin:0 auto; ```
#### 2.3.8 课堂练习:小米顶部导航 实现小米商城中顶部黑色导航条的功能(不需要写购物车图标)。
```html
小米商城
小米商城
MIUI
IoT
云服务
购物车(0)
登录
注册
消息通知
``` ### 2.4 今日作业 实现小米商城以下部分功能。 注意:前端页面效果可以通过很多种方式,没有标准答案,大家可以参考小米官网源码,也可以根据自己想法去实现。
目录
学前必备
第一章 HTML
第二章 CSS(一)
第三章 CSS(二)
第四章 JavaScript
第五章 jQuery
第六章 BootStrap