00-HTML的局限性
背景知识:
html: 只关注内容语义
不能满足设计者需求
操作html属性不方便
在html总添加样式,会造成页面比较臃肿
总结本课: 纯HTML页面不太美观,需要一种简单的技术来美化页面
01-CSS作用以及初识
CSS作用: 让我们的网页更加丰富多彩,布局更加灵活
让HTML从样式中脱离,实现了HTML专注去做结构呈现,样式交给CSS
理想的结果: 结构与样式分离
效果展示:
有CSS和没有CSS的效果差别
Cascading Style Sheets: 层叠样式表
主要作用:
设置HTML页面中的
文本内容(字体,大小,对齐方式)
图片外形(宽高,边框样式,边距)
版面的布局和外观显示样式
CSS以HTML为基础,提供了丰富的功能,如字体,颜色,背景的控制及整体排版等,而且针对不同的浏览器设置不同的样式
总结本课: 什么是CSS,CSS的主要作用
02-行内样式表
CSS的使用:
位置1: 行内式,写在标签内部
style属性
value: color: pink;
CSS语法:
styleContent : styleValue ;
CSS内容:
字体类:
颜色: color:red;
字体: font-size:18px;
style属性:
样式属性,组内样式使用;隔开
缺点: 样式和html没有分离
03-内部样式表
背景:
行内样式表
内部样式表: (内嵌样式表)
在head标签里面
语法:
<style type="text/css">
选择器{
样式名: 样式值;
}
</style>
选择器: 作用就是选中某些标签元素
标签选择器: 直接使用html中的标签
案例:
<style type="text/css"> <!-- 这里的红色部分可以省略-->
tr{
height:40px;
}
</style>
优点:
初步实现了标签和样式相分离
理论上可以放到html文档中的任何位置,一般放在head标签中
type="text/css"在html5中可以省略
只能控制当前页面
疑问:
css和html属性,如果同时设置的时候,谁会起作用?
04-外部样式表（结构样式分离）
背景:
是否能够实现彻底的样式和结构分离呢?
是否能够样式共享呢?
外部样式表(外链式)
语法:
<link rel="stylesheet" type="text/css" href="位置">
rel: 定义当前文档与被链接文档之间的关系,在这里需要指定为stylesheet,表示被链接的文档是一个样式表文件,以后还会有js文件等
type: 定义所链接文档的类型,在这里需要被指定为text/css,表示链接的外部文件为CSS样式表,我们都可以省略
href: 定义所链接外部样式表文件的URL,可以是相对路径,也可以是绝对路径
使用案例:
css文件:
ul{
color:red;
}
html文件:
优点:
实现了html文件和css样式的分离
05-外部样式表（样式共享）
外部样式表的优点:
给多个html文档共享
使用:
在其它html文档中链接调用就可以了
优点:
代码复用,修改一处,全部引用这个文件的地方都会起作用
06-样式表总结以及代码约定
按照书写位置的可以分三种
优点
书写方便,权重最高
实现了部分结构和样式的分离
完全实现结构和样式相分离
缺点
没有实现样式和结构分离
没有彻底分离
需要引入
书写位置
作用标签内
style标签内
单独的CSS文件
控制范围
控制一个标签
控制一个页面
控制整个引用这个css样式表的html文档
规范:
紧凑型: 一行写多个样式
展开式: 样式名称: 样式值;阅读起来方便
使用小写字母
07-总结CSS样式规则
总结:
选择器 {
样式属性1:(一个空格)属性值;
样式属性2:(一个空格)属性值;
样式属性3:(一个空格)属性值;
}
08-CSS选择器作用
选择器学习目标:
- 作用
- 常见选择器
作用:
选择出特定的HTML页面标签,为给指定的元素标签做样式修饰做准备
CSS的作用:
选出标签
修饰样式
09-标签选择器
选择器分组:
- 基础选择器
- 标签
- 类
- id
- 通配符
- 复合选择器
标签选择器:
也叫元素选择器,用于选择html中的指定标签
语法:
标签名 {
样式属性: 样式值;
}
特点:
(优点)所有的指定标签都会被选中
(缺点)不能设计差异化样式(例如,只选择某个input标签中的一个,而不是所有的input标签)
10-类选择器
类选择器: (工作中使用最多)
html的元素中有class属性,在类选择器中,就可以对指定类的标签选中
语法:
.类名 {
属性: 属性值;
}
使用:
疑问:
在编写的过程中,谁引用谁?
特点:
可以Wie元素对象定义单独或相同的样式.可以选择一个或者多个标签
规范:
不要使用数字、中文,尽量使用英文字母
11-Google案例
12-类选择器特殊用法（多类名）
多个类名:
每一个类名都可以找到标签
作用:
更多的选择目的,通过
场景: 每一个样式里面都有字体的属性设置
就可以提取出来
使用:
class="class1 空格class2"
总结:
多类名属性修饰的标签,操作起来更灵活
13-id选择器以及和类选择器区别
语法:
#标签中id值 {
属性: 属性值;
}
使用场景:
和类选择器差不多,id是唯一的,所以这种选择器更加精准
类选择器好比人的名字,是可以有重复的;id选择器好比人的身份证号码,唯一的,不重复
id选择器一般用于页面唯一性的元素身上,经常和后面学习的javascript搭配使用
类选择器在修改样式中用的较多
14-通配符选择器
* 代表所有标签
margin:外边距
padding: 内边距
注意: 通配符选择器会匹配页面素有的元素,降低页面响应速度,不建议随便使用
15-基础选择器总结
标签: 直接写标签
不能差异化选择,例如,不能选择某一部分标签
类: .符号
能选择一个或者多个标签
id: #id
一次只能选择一个标签,并且只能使用一次
通配符
选择的太多,不推荐使用
规范:
不使用无具体语义定义的标签选择器
尽量少使用通配符选择器
尽量少使用id选择器
16-font-size字号
属性: 字号
font-size: 字体大小,单位px
字体大小默认是16px,但是不同浏览器可能会有不同,所以最好还是显式定义,目的是所有浏览器都统一
17-font-family 字体
属性: 字体
语法:
font-family:"微软雅黑";
font-family:Arial,"Microsoft YaHei","微软雅黑","合体"; <--如果指定了多个字体,必须用逗号分隔
作用: 依次去系统上找这几个字体,前面的优先,如果都没有,那就默认了
技巧:
1,各种字体之间必须使用英文状态下的逗号隔开
2,中文字体需要加英文状态下的引号,英文字体一般不需要加引号,当需要设置英文字体时英文字体名必须位于中文字体名之前;
3,如果字体名中包含空格、#、$等符号,则该字体必须加英文状态下的单引号或双引号,
例如: "Times New Roman"
4,尽量使用系统默认字体,保证在任何用户的浏览器都能正确显示
5,不区分大小写
总结:
1,语法
2,顺序
3,注意
18-字体特殊写法（unicode）
背景:
对于不支持中文的编码,如何让它们也能正确显示
解决方法:
方式1: CSS文件中,不使用中文来表示字体,例如使用英文Microsoft YaHei来代替微软雅黑
方式2: 在CSS直接使用Unicode编码来写字体名称可以避免这些错误;
19-font-weight字体加粗
背景:
如何实现字体加粗
解决方法:
方式1: html中解决,使用<b><strong>标签进行文本加粗
方式2: 使用CSS
font-weight: normal/bold/100-900 <-- 400=nomal 700=bold
作用:
1, 改变字体加粗程度;
2, 细 --> 粗; 粗 --> 细;
规范:
尽量使用数字来表示加粗和不加粗
个人认为,html中设置
知识点:
CSS的注释: /* 注释内容 */
20-font-style字体风格
需求: 实现字体的是否倾斜
方式 1: CSS样式 font-style: normal/italic
方式2: html标签,<em><i>
经验:
一般不使用斜体,反而使用正常模式
让em标签内的字体,改为正常模式
21-字体综合写法
font: 是否倾斜 空格 加粗 空格 字号/行高 空格 字体; <-- 顺序不能更改,属性之间以空格隔开,后面两个不能省略
font: italic 700 20px "微软雅黑";
22-font总结
字号: px
字体粗细
是否倾斜
字体
font综合写法: 不要省略字号和字体
字体是否倾斜,
23-综合案例-结构搭建
写前端网页的路线:
1,结构
2,样式
24-综合案例-font样式
规范:
1,整个网页的字体统一16px,目的为了在各种网页中都强制统一
2,可能会重复的标签,尽量使用类选择器,所以在页面中对元素写上class
3,标签和css都能做的事情,个人选择使用css
em: 具备语义,强调,但是注意会出现字体倾斜-->css里面再次对标签使用去倾斜 -->所以直接使用css就搞定了
strong: 加粗
25-color颜色
外观属性:
- 颜色
- 行间距
- 文本对齐
- 首行缩进
- 文本装饰
颜色:
color
预定义的颜色
十六进制: #000000 --> #FFFFFF (十六进制两两相同就使用简写的方式)
红绿色RGB
技巧:
使用颜色吸取工具自动获取颜色值
FastStoneCapture
26-综合案例-颜色
27-文字水平居中和行间距
text-align: 文本居中
left
right
center
注意: 是让盒子里面的内容水平居中,而不是让盒子居中对齐
行间距: 间距保持合适,会使读者阅读起来更舒服
一般行距比字号大7,8像素左右比较合适
line-height:24px
28-text-indent首行缩进
段落的首行缩进
text-indent:
字符宽度单位: em 汉字或者字母的宽度
29-text-decoration文本装饰
需求: 去掉链接的下划线
语法:
none:无装饰
underline:下划线
overline:上划线
blink:闪烁
line-through: 贯穿线
30-css外观属性总结
颜色
文本对齐
行高设置
首行缩进
文本修饰
31-chrome调试工具
出现问题的处理方式: 打开浏览器去查看问题
选择工具使用:
ctrl+shift+C
选中页面上的元素
开发者工具就会显示对应的html代码和css样式
开发者工具的使用:
F12: 开启
ctrl+滚动轮: 放到或缩小工具内的字体
ctrl+0: 复位大小
开发者工具里面可以可见即可得的调整样式
文本调试: 上下箭头可以调整
颜色调整: 点击样式的颜色,调出调色板
快速定位当前指定的样式,在源代码的位置
扫一扫
538
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
