CSS学习感想
如果说HTML让我学得热血澎湃,那么CSS可以说让我疯狂着迷,江哥有句话是我一直铭记在心的,就是html只修改语义,CSS只修改样式。CSS就是用来美化网页的,CSS的学习一共分为两大部分,一个是CSS的属性,另一个是CSS选择器。江哥先带着我们从CSS初体验,让我们感受到CSS的魅力,渗透了解各种选择器,再到学习的中转点——CSS三大特性,在CSS往后的学习中都要时刻贯彻这三大特性,接着是div和span两大块,CSS元素显示模式转换,CSS精灵图,以及浮动定位,让整个CSS的思路更新清晰,可以清楚的知道自己每一步要做什么,该用到哪些模块的知识。
做前端开发,需要我们有很强的大局意识,不要想到什么就把代码敲进去,在做一个项目时要先结合HTML、CSS以及后面将会学到的JS、JQ等等,来做一个简单的大局构思,从外到里,层层递进地去写,每一步代码都关系到最后成型网页的流畅度、后期优化难度、可阅读性等等。江哥教给我们的不仅是专业知识和热情,还有思维方式,最重要的是走心的努力!
学习CSS的过程非常的专心和开心,谢谢江哥如此走心、专业、认真的教学视频。
学HTML5就选李南江,选培训机构我只选小码哥(www.520it.com)
学习笔记
CSS固定格式
格式:
- 注意点:
- style标签必须写在head标签的开始标签和结束标签之间(也就是必须和title标签是兄弟关系)
- style标签的type属性其实可以不用写,默认就是type=”text/css”
- 设置样式时必须按照固定的格式来设置:
key: value;
其中冒号:不能省略,分号;大多数情况下也不能省略,只有是最后一个属性才能省略,但是推荐都不要省略
文字相关属性 (掌握)
主要学习两大块:
Css中的选择器:{}前面的东西
Css中的属性:大括号{}里面的东西-
规定文字样式的属性
- 格式:
font-style:italic;
- 取值:
normal:正常的,默认就是正常的
italic:倾斜的
- 快捷键:
fs+tab 就是font-style:italic;
fsn+tab 就是font-style:normal;
- 规定文字粗细的属性
- 格式:
font-weight: bold;
- 单词取值:
lighter:细线,默认就是细线
bold:加粗
bolder:比加粗还要粗,但文字有极限,有时看不出
- 快捷键:
fw+tab font-weight: ;
fwl+tab font-weight:lighter;
fwb+tab font-weight:bold;
fwbr+tab font-weight:bolder;
- 数字取值:
100~900的整百取值
- 规定文字大小的属性
- 格式:
font-size:30px;
单位:px(pixel)
- 注意点:通过font-size设置大小一定要带单位,也就是一定要写px
- 快捷键:
fz+tab font-size: ;
fz30+tab font-size:30px;
- 规定文字字体的属性
- 格式:
font-family:"宋体";
- 注意点:
- 如果取值是中文,需要用双引号(” ”)或者单引号(’ ’)括起来
- 设置的字体必须是用户电脑里面已经安装好的字体
- 快捷键:
ff+tab font-famliy: ;
- 字体属性补充
- 如果设置的字体不存在,那么系统会使用默认的字体来显示宋体
- 吐过设置的字体不存在,而我们又不想用默认的字体来显示怎么办?
可以给字体设置备选方案:
font-family:"字体1","备选方案1";
- 如果想给中文和英文分别单独设置字体,怎么办?(英文字体写前面,中文字体写后面)
但凡是中文字体,里面都包含了英文;
但凡是英文字体,里面都不包含中文;
也就是说中文字体可以处理英文,而英文字体不能处理中文;
font-family:"Times New Roman","微软雅黑";
- 注意点:
如果想给界面中的英文单独设置字体,那么英文的字体必须写在中文的前面
补充1:
在企业开发中最常见的字体有以下几个
中文:宋体/黑体/微软雅黑
英文:Times New Roman / Arial
补充2:
并不是名称是英文就一定是英文字体,因为中文字体其实都有自己的英文名称,所以是不是中文字体主要看能不能处理中文!
宋体:SimSun
黑体:SimHei
微软雅黑:Microsoft YaHei
- 文字属性的简写
- CSS的注释:
/*
被注释掉的东西
*/
和html的一样
- 缩写形式:
font:style weight size family;
例如:
font:italic bold 30px "宋体";
注意点:
在这一种缩写格式中有的属性可以省略,style、weight可以省略
在这一种缩写格式中style和weight可以交换位置
在这一种缩写格式中有的属性不可以省略,size和family不可以省略
在这一种缩写格式中size和family不可以随便乱放的,size必须写在family前面,而且size和family必须写在所有属性的最后。
-
文本属性
- 文本装饰的属性
- 格式:
text-decoration: underline;
- 取值:
underline:下划线
line-through:删除线
overline:上划线
none:什么都没有,最常见的用途就是用于去掉超链接的下划线
- 快捷键:
td+tab:text-decoration: none;
tdu+tab: text-decoration: underline;
tdl+tab: text-decoration: line-through;
tdo+tab: text-decoration: overline;
- 文本水平对齐的属性
- 格式:
text-align: right;
- 取值:
left:左
right:右
center:中
- 快捷键:
ta: text-align: left;
tar: text-align: right;
tac: text-align: center;
- 文本缩进的属性
- 格式:
text-indent: 2em;
- 取值:
2em, 其中em是单位,一个em代表缩进一个文字的宽度
- 快捷键:
ti+tab:text-indent: ;
ti2e+tab:text-indent: 2em;
- **颜色控制属性(理解) **
在CSS中如何通过color属性来修改文字颜色- 格式:
color:red;
- 取值:
- 英文单词:一般情况下常见的颜色都有对应的英文单词,但是英文单词能够表达的颜色是有限制的,也就是说不是所有的颜色都能通过英文单词来表达
- rgb:其实就是三原色,其中r(red红色)、g(green绿色)、b(blue蓝色)
- 格式:
color:rgb(0,0,0);
格式中第1个数字就是用来设置三原色的光源元件红色显示的亮度
第2个数字就是用来设置三原色的光源元件绿色显示的亮度
第3个数字就是用来设置三原色的光源元件蓝色显示的亮度
其中每个数字的取值范围是0~255之间,0代表不发光,255代表发光,值越大就越亮。
红色:rgb(255,0,0);
绿色:rgb(0,255,0);
蓝色:rgb(0,0,255);
黑色:rgb(0,0,0);
白色:rgb(255,255,255);
在前端开发中其实并不常用灰色,只要让红、绿、蓝的值一样就是灰色,且如果这三个值越小就越偏黑色,越大就越偏白色
- rgba(到CSS3才推出来的)
rgba中rgb和前面讲解的一样,a代表透明度,取值是0~1,取值越小就越透明。- 格式:
color:rgba(0,0,0,0.2);
- 1.4十六进制
本质就是rgb,十六进制中是通过没两位表示一个颜色,
例如:
#FFEE00 FF代表r 、EE代表g 、00代表b
什么是十六进制?
和十进制一样都是一种计数方式。
在十进制中取值范围0~9,逢十进一
在十六进制中取值范围0~F,逢十六进一
十六进制转化为十进制的公式:
十六进制第一位*16 +十六进制第二位 = 十进制
* 1.5十六进制缩写
在CSS中只要十六进制的颜色每两位的值都是一样 的,那么就可以简写一位
例如:
#FFEE00 == #FE0
* 注意点:
如果当前颜色对应的两位数不一样,那么就不能简写
如果两位相同的数字不是属于同一个颜色,也不能简写
- 标签选择器
【{}前面就是选择器】- 什么是标签选择器?
- 作用:
根据指定的标签名称,在当前界面中找到所有该名称的标签,然后设置属性 - 格式:
标签名称{
属性:值;
}
- 注意点:
1、标签选择器选中的是当前界面中所有的标签,而不能单独选中某一个标签
2、标签选择器无论标签藏的多深都能被选中
3、只要是HTML中的标签就可以作为标签选择器(h/a/h1/p/ul/input……)
- id选择器
什么是id选择器?- 作用:根据指定的id名称找到对应的标签,然后设置属性
- 格式:
#标签名称{
属性: 值;
}
- 注意点:
- 每个html标签都有一个属性叫做id,也就是每个标签都可以设置id
- 在同一个界面中id的名称是不可以重复的
- 在编写id选择器时一定要在id名称前面加上#
- id的名称是有一定的规范的
1、id的名称只能由字母、数字、下划线:a~z、0~z、_
2、id名称不能以数字开头
3、id名称不能是html标签的名称
在企业开发中一般情况下如果仅仅是为了设置样式,我们不会使用id,因为在前端开发中id是留给JS使用的
- 类选择器
什么是类选择器?- 作用:根据指定类名称找到对应的标签,然后设置属性
- 格式:
.类名{
属性: 值;
}
- 注意点:
- 每个html标签都有一个属性叫做class,也就是每个标签都可以设置类名
- 在同一个界面中class的名称是可以重复的
- 在编写类选择器时一定要 在class名称前面加上英文句号(.)
- 类名的命名规范和id名称的命名规范一样
- 类名就是专门用来给某个特定的标签设置样式的(CSS)
- 在html中每个标签可以同时绑定多个类名
格式:
<标签名称 class="类名1 类名2 …">
- id选择器和class选择器
- id和class的区别?
id相当于人的身份证不可重复
class相当于人的名称可以重复
一个html标签只能绑定一个id名称
一个html标签可以绑定多个class名称
- id选择器和class选择器区别?
id选择器是以#开头
class选择器是以.开头
在企业开发中到底用id选择器还是用class选择器?
id一般情况下是给js使用的,所以除非特殊情况,否则不要使用id去设置样式对类的使用能看出这个开发人员的技术水平
一般情况下在企业开发中要注重余代码的抽取,可以讲一些公共的代码抽取到一个类选择器中,然后让标签和这个类选择器绑定即可-
后代选择器
什么是后代选择器?- 作用:找到指定标签的指定 所有后代标签,设置属性
- 格式:
标签名称1 标签名称2{
属性:值;
}
- 含义:先找到名叫标签名称1的标签,再在这个标签下面去查找所有叫标签名称2的标签,然后再设置属性
- 注意点:
1.后代选择器必须用空格隔开
2.只要最终是放到指定标签中的都是后代
3.后代选择器不仅可以使用标签名称,还可以使用其他选择器
- 补充:后代选择器可以可以无限延伸,比如
标签名称1 标签名称2 标签名称3{}
12后代选择器
我是文字
-
我是文字
我是文字
我是文字
我是文字
我是文字
- 子元素选择器
什么是子元素选择器?- 作用:找到指定标签中所有特定的直接子元素,然后设置属性
- 格式:
标签名称1>标签名称2{
color: red;
}
- 含义:先找到名叫“标签名称1”的标签,然后再这个标签中查找所有直接子元素名叫做“标签名称2”的元素
- 注意点:
- 子元素选择器只会查找儿子,不会查找其他被嵌套的标签
- 子元素选择器之间需要用大于号>链连接,并且不能有空格
- 子元素选择器不仅可以使用标签名称,还可以使用其他选择器
- 子元素选择器可以通过大于号一直延续下去
后代选择器和子元素选择器
-
后代选择器和子元素选择器之间的区别?
- 后代选择器使用空格作为连接符号
子元素选择器使用>作为连接符号 - 后代选择器会选定指定标签中所有特定后代标签,也就是会选中儿子/孙子…只要是被放到指定标签中的特定标签都会被选中
子元素选择器指挥选中指定标签中,所有特定的直接标签,也就是只会选中特定的儿子标签
- 后代选择器使用空格作为连接符号
后代选择器和子元素选择器之间的共同点?
后代选择器和子元素选择器都可以使用标签名称/id名称/class名称 来作为选择器
后代选择起和子元素选择器都可以通过各自的链接符号一直延续下去
在企业开发中如何选择?
如果想选中指定标签中的所有特定的标签,用后代选择器
如果想选中指定标签中的所有特定儿子标签,用子元素选择器
- 交集选择器(仅了解)
什么是交集选择器? - 作用:给所有选择器选中的标签中,相交的哪部分标签设置属性
- 格式:
标签名称1标签名称2{
属性: 值;
}
-
注意点:
- 选择器和选择器之间没有任何的连接符号
- 选择器可以使用 标签名称/id名称/class名称
- 交集选择器仅作了解,因为企业开发中用得很少
并集选择器
什么是并集选择器?作用:给所有选择器选中的标签设置属性
格式:
标签名称1,标签名称2{
属性: 值;
}
-
注意点:
- 并集选择器必须使用逗号,来连接
- 选择器可以使用 标签名称/id名称/class名称
兄弟选择器
什么是兄弟选择器?
只能选中同级的标签-
相邻兄弟选择器CSS2
- 作用:给指定选择器后面紧跟的那个选择器选中的标签设置属性
- 格式:
标签名称1+标签名称2{
属性: 值;
}
-
注意点:
- 相邻兄弟选择器必须通过加号+连接
- 相邻兄弟选择器只能选中紧跟在其后的那个标签,不能选中被隔开的标签
-
通用兄弟选择器CSS3
- 作用:给指定选择器后面的所有选择器选中的所有标签设置属性
- 格式:
标签名称1~标签名称2{
属性: 值;
}
-
注意点:
- 通用兄弟选择器必须用波浪线~连接
- 通用兄弟选择器选中的是指定选择器后面某个选择器选中的所有标签,无论有没有被隔开都可以被选中
序选择器(又名“个数选择器”)
CSS3中新增的选择器最具代表性的就是序选择器(10个)同级别的第几个
标签名称:first-child{
color: green;
}
- 含义:选中同级别中的第一个标签
- 注意点:不区分标签类型
last-child:选中同级别中的最后一个标签
nth-child(n):选中同级别中的第n个标签
nth-last-child(n):选中同级别中倒数第n个标签
only-child:选中父元素中唯一的标签
- 同类型的第几个
标签名称:first-of-type{
color: red;
}
- 含义:选中同级别中同类型的第一个标签
last-of-type:选中同级别中同类型的最后一个标签
nth-of-type(n):选中同级别中同类型的第n个标签
nth-last-of-type(n):选中同级别中同类型的倒数第n个标签
only-of-type:选中父元素中唯一类型的某个标签
- 补充:
nth-child(odd):选中同级别中的所有奇数标签
nth-child(even):选中同级别中的所有偶数标签
nth-of-type(odd):选中同级别中同类型的奇数标签
nth-of-type(even):选中同级别中同类型的偶数标签
nth-child(xn+y):x和y是用户自定义的,n是一个计数器,从 0开始递增
- 属性选择器
什么是属性选择器? - 作用:根据指定的属性名称找到对应的标签,然后设置属性
- 格式:
p[id]{
color: red;
}
[attribute]:根据指定的属性名称找到对应的标签,然后设置属性
[attribute=value]:找到有指定属性,并且属性的取值等于value的标签,然后设置属性。
最常见的应用场景,就是用于区分input属性
例如:
p[type=password]{
color: red;
}
- 下面几个CSS2的只用了解
- 属性的取值是以什么开头的?
[attribute|=value]:CSS2
[attribute^=value]:CSS3
区别:
CSS2中的只能找到value开头,并且value是被横杠-和其他内容隔开的
CSS3中的只要是以value开头的都可以找到,无论有没有被横杠-隔开
- 属性的取值是以什么结尾的?
[attribute$=value]:CSS3
- 属性的取值是否包含某个特定的取值?
[attribute~=value]:CSS2
[attribute*=value]:CSS3
区别:
CSS2中的只能找到独立的单词,也就是包含value,并且value是被空格隔开的
CSS3中只要包含value的都可以
- 通配符选择器
什么是通配符选择器? - 作用:给当前界面上所有的标签设置属性
- 格式:
*{
color: red;
}
注意点:
由于通配符选择器是设置界面上所有标签的属性,所以在设置之前会遍历所有的标签,如果当前界面上的标签比较多,那么性能就会比较差,所以在企业开发中一般不会使用通配符选择器
- CSS三大特性の继承性(inherit继承)
什么是继承性? - 作用:给父元素设置一些属性,子元素也可以使用。
- 注意点:
- 并不是所有的属性都可以继承,只有以color/font-/text/line开头的属性才可以继承
- 在CSS的继承中不仅仅是儿子可以继承,只要是后代都可以继承
- CSS继承性中的特殊性
a标签的文字颜色和下划线是不能继承的
h标签的文字大小是不能继承的
应用场景:
一般用于设置网页上的一些共性信息,例如网页的文字颜色、字体、文字大小等内容 body{}CSS三大特性の层叠性(覆盖)
什么是层叠性?作用:就是CSS处理冲突的一种能力
-
注意点:
- 层叠性只有在多个选择器选中“同一个标签”然后又设置了“相同的属性”,才会发生层叠性
- CSS全程Cascading StyleSheet 层叠式样式表
类选择器 会覆盖 标签选择器
- CSS三大特性の优先级
什么是优先级? - 作用:
当多个选择器选中同一个标签,并且给同一个标签设置相同的属性时,如何层叠就由优先级来确定。 - 优先级判断的三种方式
- 间接选中就是继承
如果是间接选中,那么就是谁离目标标签比较近就听谁的
- 相同选择器(直接选中)
如果都是直接选中,并且都是同类型的选择器,那么就是谁写在后面就听谁的
- 不同选择器(直接选中)
如果都是直接选中,并且不是相同类型的选择器,那么就会按照选择器的优先级来层叠
- 选择器优先级别:
id>类>标签>通配符>继承>浏览器默认
- 优先级之important
什么是important? - 作用:用于提升某个直接选中标签的选择器中的某个属性的优先级的,可以将被指定的属性的优先级提升为最高
- 注意点:
- important只能用于直接选中,不能用于间接选中
- 通配符选择器选中的标签也是直接选中的
- !important只能提升被指定的属性的优先级,其他的属性的优先级不会被提升
- !important必须写在属性值的分号前面
- !important前面的感叹号不能省略
.bb{
color: blue;;
}
p{
color: red !important;
}
优先级之权重问题
什么是优先级的权重?作用:当多个选择器混合在一起使用时。我们可以通过计算权重来判断谁的优先级高低
-
权重的计算规则(通配符权重为零)
- 首先 先计算选择器中有都少个是id的,id多的选择器优先级最高
- 如果id的个数一样,那么再看类名的个数,类名个数多的优先级最高
- 如果类名个数一样,那么再看标签名称的个数,标签名称个数多的优先级最高
- 如果id个数一样、类名个数一样、标签名称个数一样,那么就不回继续往下计算其他选择器了,此时谁写在后面听谁的,也就是说优先级如果一样,那么谁写在后面听谁的
注意点:
只有选择器是直接选中标签的才需要计算权重
- div和span标签
- 什么是div?
- 作用:一般用于配合CSS完成网页的基本布局
- 设么是span?
- 作用:一般用于配合CSS修改网页中的一些局部信息
- div和span的区别
- div会单独占领一行,而span不会单独占领一行
- div是一个容器级别的标签,而span是一个本文级别的标签
- 容器级的标签和文本级别的标签的区别?
容器级别的标签中可以嵌套其他所有的标签
文本级别的标签中只能嵌套文字、超链接、图片
- 容器级的标签:
div h ul ol dl li …
- 文本级的标签:
span p buis strong em ins del
- 注意点:
哪些标签是本文级的,哪些标签是容器级的不用刻意去记
在企业开发中一般情况下要嵌套都是嵌套在div中,或者按照组标签来嵌套
- CSS元素显示模式
在HTML中html将所有标签分成两类,分别是容器级和文本级
在CSS中CSS也将所有标签分成两类: - 什么是块级元素,什么是行内元素?
块级元素会独占一行
行内元素不会独占一行
- 块级元素:
p div h ul ol dl li …
- 行内元素:
span buis strong em ins del
- 块级元素和行内元素的区别?
- 块级元素
1、独占一行
2、如果没有设置宽度那么默认和父元素一样宽
3、如果设置的宽高,那么就按照设置的来
- 行内元素
1、不会独占一行
2、如果没有设置宽度,那么默认和内容一样宽
3、行内元素是不可以设置宽度和高度的
- 行内块级元素
为了能够让元素既能够不独占一行,又可以设置宽度和高度,那么就出现了行内块级元素
- CSS元素显示模式转换
- 如何转换CSS元素的显示模式?
设置元素的display属性
- display取值:
block 块级
inline 行内
inline-block 行内块级
- 快捷键:
di+tab display:inline;
db+tab display:block;
dib+tab display:inline-block;
- 背景颜色
如何设置标签的背景颜色?
在CSS中有一个background-color:;属性,就是专门用来设置标签的背景颜色的
- 取值:
- 具体单词
- rgb
- rgba
- 十六进制
快捷键:bc+tab
- 背景图片
如何设置背景图片?
在CSS中有一个叫做background-image: url();属性,就是转么用于设置背景图片
- 注意点:
- 图片的地址必须放在:url()中,图片的地址可以是本地的地址,也可以是网络地址
- 如果图片的大小没有标签的大小 大,那么会自动在水平和垂直方向平铺和填充
- 如果网页上出现了图片,那么浏览器会再次发送请求获取图片
快捷键:bi+tab
- 背景平铺属性
- 如何控制背景图片的平铺方式?
在CSS中有一个background-repeat属性,就是专门用于控制背景图片的平铺方式的
- 取值:
repeat: 默认,在水平和垂直都需要平铺
no-repeat:在水平和垂直都不需要平铺
repeat-x: 只在水平方向平铺
repeat-y: 只在垂直方向平铺
- 快捷键:
bgr+tab
应用场景:
可以通过背景图片的平铺来降低图片的大小,提升网页的访问速度背景定位
如何控制背景图片的位置?
CSS中有一个叫做background-position: 0 0;属性,就是专门用于控制背景图片的位置
- 格式:
background-position: 水平方向 垂直方向;
- 取值
- 具体的方位名词
水平方向:left center right
垂直方向:top center bottom
- 具体的像素(一定要写单位)
例如:100px
- 注意点:
1、一定要写单位px
2、x越往右越大,y越往下越大
3、可以接受负数
- 注意点:
同一个标签可以同时设置背景颜色和背景图片,如果颜色和图片同时存在,那么图片会覆盖颜色 - 快捷键:
bp+tab
应用场景:
例如英雄联盟主页的图片,永远居中背景关联和缩写
背景属性缩写的格式:
background:背景颜色 背景图片 平铺方式 关联方式 定位方式;
- 快捷键:
bg+tab
- 注意点:
background属性中,任何一个属性都可以被省略
什么是关联方式?
默认情况下背景图片会随着滚动条的滚动而滚动,如果不想这样,那么我们就可以修改背景图片和滚动条的关联方式-
如何修改修改背景关联方式?
在CSS中有一个叫做background-attachment:;的属性,这个属性就是专门修改关联方式的- 格式:
background-attachment:scroll;
- 取值:
scroll 默认值,会随着滚动条的滚动而滚动
fixed 不会随着滚动条的滚动而滚动
- 快捷键:
ba+tab
注意点:
仅做了解,企业开发中用得不多
- 背景图片和插入图片的区别
- 小技巧:
div.box$*n
就会生成n个div,且box从1到n
- 背景图片和插入图片的区别?
- 背景图片仅仅是一个装饰,不会占用位置插入图片会占用位置
- 背景图片有定位属性,所以可以很方便地控制图片的位置插入图片没有定位属性,所以控制图片的位置不太方便
- 插入图片的语义比背景图片的语义要强,所以在企业开发中如果你的图片想被搜索引擎收录,那么推荐使用插入图片
- CSS精灵图
- 什么是CSS精灵图?
CSS精灵图是一种图像合成技术 - CSS精灵图作用:
可以减少请求的次数,以及可以降低服务器处理压力 - 如何使用CSS精灵图
CSS精灵图需要配合背景图片和北京定位来使用
div class="box1">