初识CSS样式 与 文本背景样式
什么是CSS(层叠样式表)
html -- 写东西出来给别人看
css -- 找到html写出来的东西,加特效
1.怎么找
2.加什么
css -- 层叠样式表 -- 对网页进行排版,美化外观,优化性能
文本 -- 字体,大小,颜色,缩进
图片 -- 宽高,边框,颜色,透明度
页面 -- 布局,性能优化(懒加载)
html : 身体 css: 化妆品/衣服
网页文件后缀: .html
样式表文件: .css
css注释写法:
/* 注释内容 */
/*
注意保暖
多喝热水
多行注释
*/
css选择器
css的工作氛围两步: 1.找到元素 2.添加样式
选择器就是用来找元素的一种方式. 可以通过选择器找到对应的标签
1.标签选择器 : 选中一个标签(网页里的所有该标签) 主要是用来清除/设置默认样式
标签名{
属性:值;
属性:值;
}
p{
color:#096;
font-size:20px;
}
2.id选择器: 给标签设置id名,通过#id名的方式找到该标签. id相当于身份证,唯一的.不要给标签设置重复id
#id名{
属性:值;
属性:值;
}
<标签名 id="x">
#x{
属性:值;
属性:值;
}
3.class选择器(类): 给标签设置类名,通过.class名的方式找到标签
class为类型,可以有多个. id只能有一个
<标签名 class='xx'>
.class名{
属性:值;
属性:值;
}
.xx{
属性:值;
属性:值;
}
可以给标签设置多个class.属性会同时生效
<标签名 class='类名1 类名2'>
<标签名 class='money fs70'>
4.通配符选择器(*): 通配符选择器用*号来表示.选中网页里的所有元素 (正式开发一般不会)
*{
属性:值;
属性:值;
}
*{
color: #6cf;
}
相对来说class选择器是用的最多.
标签选择器一般是用来清除样式/设置默认样式
有个网站,想取消a标签的下划线 , 所有正文内容都为20px. 这种情况才用标签选择器.
如果是要添加特有样式,用id/class
css样式的三种写法
1.内部样式表 -- 把css代码写在style标签中,style写在head里
<style>
css代码
</style>
2.外部样式表 -- 把css代码写在专门的css文件里,使用时,通过link标签导入,方便重复使用
写好css文件后,在head里用link标签读取样式
<link rel='stylesheet' href='css文件地址'>
3.行内样式表 -- 通过标签属性style. 直接把样式写在标签里
<标签名 style='属性:值; 属性:值;'>
样式表的优先级是基于就近原则: 行内样式 > 内部样式/外部样式 (谁离标签近,就听谁的)
样式表总结:
1.行内样式表:
优点: 权重很高,写起来很方便
缺点: 不够灵活
频率: 较少
范围: 单个标签
2.内部样式表:
优点: 写起来方便 / 只写一个页面很灵活
缺点: 不可复用
频率: 较高(学习阶段)
范围: 单个页面
3.外部样式表:
优点: 可以反复使用
缺点: 需要导入
频率: 最高(在开发中)
范围: 整个网站
学习阶段,掌握内部样式表即可.
div盒子标签(division)
div主要是用来布局使用. 它本身没有含义/属性/样式. 很单纯,可塑性强
适合作为容器使用. 因此管它叫盒子. 把对应内容放到盒子里,再对盒子进行布局
div本身没有属性 / 宽高 /颜色这些样式
width: 宽度
height: 高度
<div>内容</div>
快捷键:
快速生成一个id为xx的盒子 #id名 #box
快速生成一个class为xx的盒子 .class名 .box
文本样式(font)
span标签是文本标签.它因为没有样式/属性. 很单纯,适合用来加文本样式
1.color: 设置字体颜色,有三种设置方式 (1.颜色单词pink red blue 2.用十六进制数据 #096原谅绿 #6cf蓝色 3.用rgb设置颜色 red green blue.范围0-255之间)
颜色网站 -- https://www.sioe.cn/yingyong/yanse-rgb-16/
color: blue;
color: #096;
color: rgb(123,77,66);
2.font-size: 字体大小 (px像素 em字符大小)
font-size:70px;
font-size:2em; 网页默认一个字14px. 2em,就是28
3.font-family: 字体
font-family: '宋体';
4.font-weight: 字体粗细 范围100-900
font-weight: 900;
5.font-style: 字体样式
font-style: italic; // 倾斜
6.text-indent: 字符缩进
text-indent: 2em;
7.text-align: 内容对齐 left左 center中 right右
text-align: center;
8.text-decoration : 文字样式 下划线,删除下
text-decoration : none; 清除样式
text-decoration : underline; 下划线
9.line-height: 行高,用于调整文字上下位置
line-height:70px;
背景样式(background)
1.background-color : 背景颜色
background-color: #096; # 颜色设置方式和color一样
2.background-image : 背景图片
background-image : url(图片路径);
3.background-position : 背景位置
background-position: center;
0 0; 从左上角开始
4.background-size: 背景大小
background-size : cover;
5.background-repeat: 背景重复
background-repeat : no-repeat;
tips:
1.写样式时,要做到高内聚,低耦合.尽量不要把一堆样式都写在一个选择器里
2.样式不要死记硬背,要用的时候查笔记,百度即可 -- 多敲多练就熟练了
3.颜色除了有rgb外,还有rgba. a表示透明度
4.写选择器时,注意顺序规范: 通配符 > 标签 > id > class
5.标签选择器一般不是用来加特定样式的,而是清空/设置默认样式
6.css属性记得加分号
7.学习阶段熟练内部样式即可
8.取名要见名知意,不要乱取
拓展
直播的两小时不是最重要的.影响学习效果的是下课后持续投入的时间
看笔记/看录播/写案例/做思考 -- 不要想着一节课下来就能学明白
下课之后,先看笔记,做思考. 哪里不清楚再翻看录播加强理解
bug在it圈子里,指的是报错. 但它的原意其实是 <小虫子>
早期电脑和现在电脑长得完全不一样,第一台电脑叫埃尼亚克
当时的电脑都是通过晶体管实现相关运算/计算. 有电/1 没电/0 二进制
二进制.只用0和1就能表示好几种情况
上学,好朋友. 放学了,来我家打游戏. 暗号 01表示
00 家里没人,可以来
01 家里有人,别来
11 家里白天有人,你吃完晚饭过来玩
10 家里晚上有人, 玩到6点你就走
110 我不确定,等我下课告诉
111 今天我家不行,去你家吧
练习:
写3个p标签内容分别为: 老师 / 多喝热水 / #096
用三种css样式写法(行内,内部,外部).给p标签分别添加样式(自行发挥)
完成图片<css练习>效果