- 01-前端基础导学课程
- 02-第一天课程介绍
- 准备开发环境-必看
- 03-标签语法
- 04-HTML基本骨架
- 05-标签的关系
- 06-注释
- 07-排版标签-标题和段落
- 08-换行和水平线标签
- 09-文本格式化标签
- 10-图像标签
- 11-路径-相对和绝对
- 12-超链接标签
- 13-多媒体标签-音频和视频
- 14-综合案例1-个人简介
- 15-综合案例2-vue简介
- 16-第二天课程介绍
- 17-列表-无序和有序和定义列表
- 18-表格-基本使用与表格结构标签
- 19-合并单元格
- 20-表单-input标签
- 21-表单-下拉菜单
- 22-表单-文本域
- 23-表单-label标签
- 24-表单-按钮
- 25-div和span标签和字体实体
- 26-综合案例1-体育新闻列表
- 27-综合案例2-注册信息
- 28-第三天课程介绍
- 29-体验CSS
- 30-CSS引入方式
- 31-选择器-标签和类
- 32-选择器-id和通配符
- 33-画盒子
- 34-字体修饰属性-大小和粗细和倾斜
- 35-行高
- 36-字体族
- 37-font属性
- 38-文本修饰属性-缩进和对齐和修饰线
- 39-文字颜色
- 40-调试工具
- 41-综合案例一-新闻详情
- 42-综合案例二-CSS简介
- 43-第四天课程介绍
- 44-复合选择器
- 45-伪类选择器.
- 46-CSS三大特性
- 47-Emmet写法
- 48-背景属性-拆分写法
- 49-背景属性-复合写法
- 50-显示模式
- 51-综合案例一-热词
- 52-综合案例二-banner效果
- 53-第五天课程介绍
- 54-结构伪类选择器
- 55-伪元素选择器
- 56-PxCook用法
- 57-盒子模型-组成
- 58-盒子模型-边框线
- 59-盒子模型-内边距
- 60-盒子模型-尺寸计算
- 61-版心居中
- 62-清除默认样式
- 63-内容溢出overflow属性
- 64-外边距问题-合并和塌陷
- 65-行内元素垂直内外边距
- 66-圆角与盒子阴影
- 67-综合案例一-产品卡片
- 68-综合案例二-新浪新闻
- 69-第六天课程介绍
- 70-标准流
- 71-浮动-基本使用与布局
- 72-浮动-清除浮动
- 73-浮动-总结
- 74-flex布局-体验
- 75-flex布局-组成
- 76-flex布局-主轴与侧轴对齐方式
- 77-flex布局-修改主轴方向
- 78-flex布局-弹性伸缩比
- 79-flex布局-弹性换行与行对齐方式
- 80-综合案例-抖音解决方案
- 81-第七天课程介绍
- 82-准备工作-项目目录与版心
- 83-网页制作思路
- 84-header区域-整体布局
- 85-header区域-logo
- 86-header区域-导航
- 87-header区域-搜索区域
- 88-header区域-用户区域
- 89-banner区域
- 90-精品推荐区域
- 91-推荐课程区域
- 92-前端开发工程师区域
- 93-版权区域
- 94-第八天课程介绍
- 95-定位-相对和绝对和固定
- 96-堆叠顺序z-index
- 97-定位总结
- 98-CSS精灵-基本使用
- 99-案例-CSS精灵-京东服务
- 100-字体图标-下载和使用
- 101-字体图标-上传
- 102-垂直对齐方式vertical-align
- 103-过渡属性
- 104-修饰属性-透明度与光标类型
- 105-综合案例-淘宝轮播图
- 106-第九天课程介绍
- 107-搭建项目目录
- 108-网页头部SEO三大标签
- 109-Favicon图标与版心
- 110-快捷导航
- 111-头部-布局
- 112-头部-logo
- 113-头部-导航
- 114-头部-搜索
- 115-头部-购物车
- 116-底部-布局
- 117-底部-服务区域
- 118-底部-帮助中心
- 119-底部-版权
- 120-banner区域
- 121-新鲜好物区域
- 122-人气推荐
- 123-热门品牌区域
- 124-生鲜-标题
- 125-生鲜-内容布局
- 126-生鲜-产品内容
- 127-生鲜-过渡效果
- 128-最新专题-布局
- 129-最新专题-内容
- 130-最新专题-定位文字
- 131-第一天课程介绍
- 132-平面转换-体验
- 133-平面转换-平移
- 134-平移实现定位居中
- 135-案例-双开门
- 136-平面转换-旋转
- 137-转换原点
- 138-多重转换
- 139-平面转换-缩放
- 140-案例-播放效果
- 141-平面转换-倾斜
- 142-线性渐变及产品案例
- 143-径向渐变
- 144-综合案例-喜马拉雅
- 145-第二天课程介绍
- 146-空间转换-平移与视距
- 147-空间转换-旋转
- 148-立体呈现
- 149-案例-3D导航
- 150-空间转换-缩放
- 151-动画-体验
- 152-动画-实现步骤
- 153-animation属性
- 154-案例-走马灯
- 155-精灵动画与多组动画
- 156-综合案例-全民出游
- 157-第三天课程介绍
- 158-谷歌模拟器
- 159-分辨率与视口与二倍图使用方法
- 160-适配方案简介
- 161-rem简介与基本使用
- 162-媒体查询配合rem
- 163-rem配合flexible布局
- 164-less-简介与注释
- 165-less-运算
- 166-less-嵌套
- 167-less-变量
- 168-less-导入与导出
- 169-极速问诊-准备工作
- 170-极速问诊-头部
- 171-极速问诊-banner区域
- 172-极速问诊-问诊类型
- 173-第四天课程介绍
- 174-体验vw和vh单位
- 175-vw布局与vh问题
- 176-酷我音乐-准备工作
- 177-酷我音乐-头部区域
- 178-酷我音乐-搜索区域
- 179-酷我音乐-banner区域
- 180-酷我音乐-标题公共样式
- 181-酷我音乐-排行榜内容
- 182-酷我音乐-推荐歌单区域
- 183-酷我音乐-下载区域
- 184-酷我音乐-头部固定
- 185-第五天课程介绍
- 186-媒体查询
- 187-案例-左侧隐藏
- 188-了解-媒体查询完整写法和link写法
- 189-Bootstrap-体验
- 190-Bootstrap-使用步骤
- 191-Bootstrap-栅格系统
- 192-Bootstrap-全局样式
- 193-Bootstrap-组件
- 194-Bootstrap-字体图标
- 195-alloyTeam-准备工作
- 196-alloyTeam-导航区域
- 197-alloyTeam-轮播图区域
- 198-alloyTeam-开源项目区域
- 从0到1学前端完结篇
2.三种应用css方式:
1)创建外部样式表:
外部样式表即创建后缀为css的文件,然后在想要使用的网页中引入该文件即可。
具体的示例如下:
第一步:创建名为test.css的文件,并写入以下内容:
div {
width: 500px;
height: 500px;
background-color: red;
}
第二步:在html文件中引入该css文件,具体靠link标签实现,该标签写在head标签内,如下:
第三步:打开html文件,结果如下:
图片
link标签:
link标签除去引入css文件外,还有其它的作用,但是文中没有具体给出。然后,link标签的两个属性:
rel="stylesheet" 指明文件格式(stylesheet指的就是css文件)
href = “url” 指明引入css文件的地址
2)创建嵌入式样式表:
嵌入式样式表,通过html中的style标签实现,里面直接写入css代码即可。如下代码所示:
div {
width: 500px;
height: 500px;
background-color: red;
}
结果如下:
图片
3)创建内联式样式:
这个靠的是HTML标签内共有的一个属性style中,如下:
结果如下:
图片
可以看出的是,style属性值中不同的样式用分号隔开。
4)三者的比较:
首先最为推荐的是外部样式表,其次是嵌入式样式。最后才是内联式的。因为我们一般写代码的一个目标是实现代码分离,即HTML代码和CSS代码分离,这样写的代码干净易懂。
5)重要性:
前一个章节提及了对于某个标签来说,会有多个css样式,发生冲突是很常见的。而在其它条件相同的情况下,内联式是最重要的,因为它最晚出现,其它的都出现在head标签内,而内联式出现在body标签内。
3.使用与媒体相关的样式表:
可以指定一个只用于特定输出的样式表,如只用于打印,或只用于用浏览器在屏幕上查看。
其中,指定方法如下:
使用标签:link标签
使用属性:media
media属性的值:print(打印)、screen(屏幕显示)、all(默认声明)(当然还有其它值,但是这三者是最为常用的)
示例如下:
这段代码的意思是:当我们使用浏览器查看网页的时候,screen.css里面的代码会发挥作用,当我们打印网页时候,print.css里面的代码会发生作用。
除去上面的使用方法外,还有一种方法,就是在css代码中使用,如下:
@media print {
div {
width: 100px;
height: 100px;
background-color: pink;
}
}
div {
width: 100px;
height: 200px;
background-color: red;
}
这样,第一行代码代表当打印的时候起作用的样式。
4.提供替代的样式表:
规范允许设置一组基本的持久性样式,一组默认样式和多组可替代样式表。你可以这样理解,你有一个网页,基本的持久性的样式就是网页框架的基本样式,而一组默认样式就是我们个人主页的基本样式,我们想要调整样式,就是使用了可替代的样式表。
如下代码所示:
其中,rel="alternate"代表着这个样式就是可替代的样式表。
老实说,我觉得这不就是多写几个css文件嘛,只是用处不同而已^_^。