这篇css博客是参考B站黑马程序员–pink老师做的个人笔记,供平时复习使用,现分享给大家,喜欢的话请多多点赞收藏哦~~

文章目录

P62.css简介
P63.css的语法规范
P65.选择器总体概述
P66.标签选择器
P67.类选择器
P70.ID选择器
P71.通配符选择器
P72.字体样式
P78.文本属性
P84.css的三种引入方式
P92.Chrome调试工具
P93.Emmet语法
P98.后代选择器
P99.子选择器
P100.随堂练习
P101.并集选择器
P102.伪类选择器
P106.元素显示模式
P114.垂直居中
P115.背景样式
P129.css的三大特性

P62.css简介

1.HTML的局限性

HTML作用单纯，只关注语义，比如< h1>是一级标题，< p>是一个段落，他不愿意去美化修饰，因为写起来麻烦，只能一行一行的修改。

2.css-美容师

css:层叠样式表，也叫css样式表或级联样式表

css也是一种标记语言[简单]

css作用就是在HTML的基础上美化页面，布局页面的

css主要设置HTML页面中的文本内容（字体，大小，对齐方式等），图片外形（宽高，边框样式，边距等）以及版面布局

P63.css的语法规范

1.语法规范

css的两部分组成：选择器以及一条或者多条声明

选择器是指定css样式的HTML标签，花括号内是对该对象设置具体的形式

属性和属性值之间用冒号隔开：属性：属性值 ，这也被称为键值对形式

每一组键值对之间用分号隔开：键值对；键值对

演示：

2.代码规范

a.样式格式：建议展开格式，而非紧凑格式

b.空格规范：

.选择器和大括号之间保留一个空格

属性：和属性值之间保留一个空格

P65.选择器总体概述

1.选择器的作用

把我们需要修改样式的标签选择出来

比如：

我把所有的div标签都选择出来，怎么做？

我只把第二个div标签选择出来，怎么做？

我只把ul里面的li选择出来（ol里面的li不选），怎么做？

2.选择器的分类

选择器的两类：

a.基础选择器：基础选择器是单个选择器构成，

包括：标签选择器，类选择器，id选择器和通配符选择器

b:复合选择器：多个基础选择器组合而成

包括：后代选择器，子选择器，并集选择器，伪类选择器

P66.标签选择器

标签选择器是由HTML中的标签名称作为选择器

自动调用

一选div就会把所有的div给选择出来，不能实现差异化选择

css:  p {color: pink;}html:< p>段落内容</p>

P67.类选择器

1.基本语法

相对于标签选择器，类选择器具有差异化选择的优点,开发中最常用

差异化选择：可以单独所有同一种标签中一个或者多个标签

手动调用

ps:类选择器名称要英文，有意义，

类选择器命名英文大全

css中以“.类名”来定义类选择器

html中以键值对 class=“类名”来设置

css:    .类名 {color: red;}
html:<p class="类名">段落内容</p>

2.多类名

我们可以给一个标签设置多个类名,从而达到更多选择的目的

a.多类名的使用

多个类型写到class里面,用逗号隔开

html:
< p class=“类名1  类名2”>段落内容<p>

那为什么不把这两个类选择器里的样式都合到一个类选择器里呐?问题问的好

因为多个类选择器里可能有几个样式是相同的,就可以将这些共同样式单独写到一个类选择器中,
这样一来不用重复的做无用功(初次书写和修改),二来可以避免代码冗余.

P70.ID选择器

手动调用

css中以“#id名”来定义

html中以 id=‘’id名‘’ 来设置

    css:#pink {color: pink;}html:<div id="pink">ID选择器</div>

那class选择器和id选择器的有区别吗?问题问的好~

id选择器原则上只能调用一次,比如我们的身份证号,唯一的

比如下面的用法是错误的:(pink只能调用一次)

        <div id="pink">ID选择器</div><div id="pink">ID选择器</div>

类选择器可以多次调用,比如我们的名字,可以重复

P71.通配符选择器

css中,通配符选择器使用*来定义,它表示选择页面的所有标签

自动调用

css:* {color: blue;}

通配符选择器特殊情况才使用,比如后面讲到的所有标签的内外边距

P72.字体样式

1.字体整体概述

font属性用于定义字体,字号,粗细,风格

2.字体

字体中间如果有空格,建议带上引号(单引号或者双引号)括起来,比如‘Microsoft YaHei’—微软雅黑

font-family: 宋体;

写多个字体可以提高兼容性,按顺序依次在电脑已有字体中查找,如果找到就使用该字体,都没找到则采用电脑自带字体.

多种字体之间必须使用英文逗号隔开.

        body {font-family: ‘Microsoft YaHei’,宋体,楷体;}

3.字号

px(像素)大小是我们在网页中最常用的单位.

谷歌浏览器默认的字体大小为16px

不同的浏览器默认的字体大小不一致,所以我们尽量给一个明确值,不要采用浏览器的默认值

我们可给body标签设置字体大小,但是< h>标签的标题文字大小不受影响,要单独设置< h>

        body {font-size: 16px;}

4.字体粗细

备注:注意区分: font-weight和width

        .bold {font-weight: 400;}

给大家推荐一个网站:css手册,例如:

字体粗细属性:

建议使用数字作为属性值,而非英文[难记,且选择少]

400等同于normal,700等同于bold

在数字后面不要带单位

5.字体风格

       .bold {font-style: italic;}

6.字体的复合写法

font开始,空格隔开

风格,粗细,字号,字体,必要的是后面两个

P78.文本属性

1.文本总体概述

text(文本)属性可定义外观,比如文本颜色,对齐文本,装饰文本,文本缩进,行间距

2.文本颜色

        div {color: deeppink;}div {color: #ff0000;//红色}

十六进制表示颜色中,共六位,每三位依次对应RGB中红,绿,蓝,数字越大表示这种颜色占比越大,比如#ff0000是红色(了解即可,不用记忆)

开发中最常用的是十六进制表示

3.对齐文本

text-align属性只能用于设置元素内文本内容的水平对齐方式

ps: 盒子里面的文字,而不是盒子本身的对齐方式

        div {text-align: right;}

4.装饰文本

text-decoration属性可以给文本设置下划线,删除线,上划线等

        div {text-decoration: underline;}

最好用的还是用来去掉网页中超链接标签默认带有的下划线

5.文本缩进

text-indent属性用于第一行的缩进,也就是文档里的首行缩进功能

单位:em,这是相对当前一个文字的大小,会按照父类的继承

建议使用:2em,则是相当于当前文字两个文字的大小

        p {text-indent: 2em;}

6.行间距

line-height属性用于设置行与行之间的间隙,也就是word中的行高

        p {line-height: 26px;}

line-height行高不仅仅是我们眼中的文本高度,实际上还包括上间距和下间距

文本高度已经在font-size设置过,所以这里的line-height设置的是上间距和下间距

上边距=下边距=[(line-height)-(font-size)]/2

效果图中行高的测量技巧:从上一行的最下沿测到下一行的最下沿就是行高

P84.css的三种引入方式

1.引入方式总体概述

按照css放的位置可以分为三类：

1.行内样式表（行内式）

2.内部样式表（嵌入式）

3.外部样式表（链接式）

三种引入方式各有千秋，了解适用场景非常重要！

2.行内样式表

css样式写到各自的标签内，适用于该标签的修改小众，简单的场景

缺点:没有实现结构与样式分离

    <p style="color:red;font-family:仿宋;"> 青春不常在，抓紧谈恋爱</p>

style其实就是标签的属性,但是注意和HTML本身的部分美化的属性做区分(html的color=“red”)

在双引号内部符合我们原来的css规范

3.内部样式表

抽取全部css样式写到html页面内部,单独放到一个< style>标签中,适用于平时练习样式不多的情景

    <style>p {color: red;font-family: 仿宋;}</style>

< style>理论可以放到html文档任意位置,但是一般放在< head>标签中

缺点:没有完全实现结构和样式分离(css还在html标签/文档里面—嵌入式)

4.外部样式表

抽取全部css样式写到css文档里,然后再html文档中引用css文档, 适用于开发时样式多的情景.

引入外部样式表的步骤:
1.新建一个后缀名为.css的文件,把所有的css代码放到此文件
2.在HTML页面,使用< link>标签引入这个文件

解释步骤中< link>标签(单标签)

例如:第一步:

style.css文档中:
p {color: red;font-family: 仿宋;
}

第二步:

.html文档中:<link rel="stylesheet" href="./style.css">

最终效果:

P92.Chrome调试工具

作用:调试,查找自己写的html或css代码中的错误

操作步骤:

1.打开调试工具

打开Chrome调试工具,按下F12键或[右键]->[空白处]->[检查]

2.使用调试工具

检查: 左边html代码,右边css代码

ctrl+滚轮/±: 调整代码显示大小

黑框+箭头图标可以查看所选页面对应的html和css代码,并可修改,但在刷新后代码恢复,效果消失

下面这两个调试技巧建议在视频中观看食用: 精准降落

点击元素,右侧没有样式引入,极可能类名错误或类名引入错误

如果有样式前面有感叹号提示和删除线,则可能是样式属性书写错误

3.关闭调试工具

按F12

P93.Emmet语法

Emmet前身:Zen coding,通过缩写,来提高html/css的编写速度,Vscode中已经集成该语法

一.快速生成html结构语法

精准降落

<body><!-- div+enter/tab: 自动补齐标签--><div></div><!-- p*3 多个相同标签生成--><p></p><p></p><!-- ul>li 父子级关系--><ul><li></li></ul><!-- div>span 父子级关系--><div><span></span></div><!-- div+p 兄弟级关系--><div></div><p></p><!-- .gray 默认是div标签中添加类gray选择器 --><div class="gray"></div><!-- p.gray 指定是在p标签中添加类gray选择器--><p class="gray"></p><!-- p.gray&2*3 指定生成3个带类gray选择器p标签,且类名自增[从1开始]--><p class="gray1"></p><p class="gray2"></p><p class="gray3"></p><!-- p{我是段落标签} 我们想生成的标签里面默认显示文字 --><p>我是段落标签</p></body>

二.快速生成css样式语法

    <style>.one {/* 要写出 text-align: conter;   只要写tac 按下tab键即可生成 *//*    其他语法也同理 */text-align: center;text-indent: 2em;/* 若要快速生成宽和高 只要写 w100 或者h100 按下tab键即可生成 */width: 100px;height: 100px;/*   同理    按下lh25 按下tab键即可生成  行高*/line-height: 25;/*   同理    按下tdn按下tab键即可生成  装饰标签 */text-decoration: none;}</style>

P98.后代选择器

回顾一下:

选择器两大类:

基础选择器:标签选择器,类选择器,ID选择器,通配符选择器

复合选择器:后代选择器,子选择器,并集选择器,伪类选择器

从现在开始我们就得学习复合选择器(多个基础选择器的组合)

1.后代选择器(非常重要)

后代选择器又称包含选择器,可以选择父亲（基础选择器）里的所有符合条件的后代（基础选择器）,其写法就是在外层标签写在前面,内层标签写在后面,中间用空格分隔.

精准降落

   <ul><li>我是ul 的孩子</li><li>我是ul 的孩子</li><li>我是ul 的孩子</li></ul><ol><li>我是ol 的孩子</li><li>我是ol 的孩子</li><li>我是ol 的孩子</li></ol>

比如上面的html代码中,如果我想选中ul中的所有的li, 如果使用标签选择器就会选中所有的li,如果使用类选择器就得在li标签中使用三次类选择器,都不好用.而后代选择器就适用于这种选择父元素里的所有子元素的情景.

   <style>ul li {color: red;}</style>

特别注意：这里是后代选择器，而非儿子选择器

也就是说除了可以选择父亲下的儿子，还可以选择出父亲下的所有儿子的儿子，依次一层一层递推

特别注意：类选择器中的父亲儿子等不止可以是标签选择器，也可以是类选择器

P99.子选择器

子选择器只能选择所有符合条件的儿子，其写法就是在外层标签写在前面,内层标签写在后面,中间用大于号隔开。

    .nav>a {color: red;}<div class="nav"><a href="#">我是亲儿子</a><p><a href="#">我是亲儿子</a></p><a href="#">我是亲儿子</a></div>

PS: 孙子不算,重孙子也不会被选中

P100.随堂练习

后代选择器:选择所有符合条件的所有后代,这里的ul和li都可以不写,但是建议一层一层写上

子选择器:只选择符合条件的所有儿子

P101.并集选择器

并集选择器可以选择多组标签,同时为他们定义相同的样式

   <style>/* 要求1:把熊大和熊二都改成粉色 */div,p {color: red;}/* 要求2:把熊大熊二和小猪一家都改成蓝色 */div,p,.pig {color: blue;}</style>
</head>
<body><div>熊大</div><p>熊二</p><span>光头强</span><ul class="pig"><li>小猪佩奇</li><li>猪爸爸</li><li>猪妈妈</li></ul>
</body>

并集选择器语法规范:

并集选择器喜欢竖着写

基础选择器之间用逗号隔开(逗号的意思:和)

最后一个基础选择器不需要加逗号

P102.伪类选择器

伪类选择器用于向某些标签添加一些特殊效果，如鼠标放在链接上，链接颜色发生变化等

类选择器就是.类名开头，伪类选择器和类选择器的书写方式类似，比如a:hover

伪类选择器种类很多：链接伪类选择器，结构伪类选择器等

一.链接伪类选择器

1.链接伪类选择器的基本语法

    a:link {color:  black;text-decoration: none;}a:visited {color: red;}a:hover {color:blue;}a:active {color:pink;}

LVHA:请按照:link,:visited,:hover,:active的顺序书写

记忆法:love **h **ate(爱恨)

因为a链接在浏览器中默认样式不满足我们需求,所以一般都要自己指定样式

2.链接伪类选择器在实际开发中的写法

虽然有LVHA,但是实际开发中链接一般就两种状态,鼠标未经过链接和鼠标经过链接的两种样式状态

二.:focus伪类选择器

:focus选择器用于选择获得焦点光标的**表单元素****

    /* 把获得光标的input表单元素选取出来 */input:focus {background-color: red;}

P106.元素显示模式

了解元素的显示模式有助于我们布局页面:

什么是元素的显示模式?

元素显示模式的分类

元素显示模式的转换

一.元素显示模式的定义和分类

1.定义

定义:元素(标签)显示的方式

html元素类型分类:块元素和行内元素

2.分类

a.块元素

块元素:比如div,一个独占一行

特点:

可以设置高度,宽度,行高和内外边距

即使设置了宽度,还是独占一行

块状元素可以放块元素和行内元素.

特殊的:块元素-p和h这种内部只能放文本的块元素中不能再放块元素.

    <div>块元素-div</div><h1>块元素-h</h1><p>块元素-p</p><ol>块元素-ol</ol><li>块元素-li</li>

错误示范:<p><div>宋永红发文发问阿文发噶文案违规</div></p>

b.行内元素

行内元素:比如span,一行可以显示多个

特点:

宽和高直接设置是无效的

默认宽度就是它本身内容的宽度

行内元素只能容纳文本和其他行内元素

特殊的:行内元素-a链接元素内不能再放链接(不然我点哪个),a链接元素里可以放块元素

    <span>行内元素-span</span><a href="#">行内元素-a</a>

c.行内块元素

在行内元素中有几个特殊的标签:< img>,< input>,< td>,有些资料称它未行内块元素

特点:

一行可以放多个(行内元素特点)

默认宽度就是内容的宽度(行内元素特点)

可以设置高度,行高和内外边距(块元素的特点)

d.总结:

二.显示模式的转换

适用场景:一个模式需要另一个模式的特性,比如想扩大行内元素-a链接的触发范围,转换成块元素即可

display:显示

1.行内元素转换成块元素

一般是想一行放一个或设置高度和宽度等

    <!-- 行内元素a转换为块元素 -->a {/* <!-- 转换为块元素 --> */display: block;width: 200px;height: 200px;background-color: red;}

2.块元素转换成行内元素

一般是想一行放多个

    div {/* 块元素转换成行内元素 */display: inline;width: 200px;//不起作用height: 200px;//不起作用background-color: red;}

3.转换成行内块元素

一般是想一行放多个的同时还能设置高度和宽度等

    div {/* 块元素转换成行内块元素 */display: inline-block;width: 200px;height: 200px;background-color: red;}

小总结:一般我们在开发中都会使用到高度和宽度,所以我们一般都会转到块元素或行内块元素,转成行内元素较少.

P114.垂直居中

首先css没有提供文字垂直居中的代码,我们采用让文字的行高等于盒子的高度,就可以让文字在当前盒子内垂直居中.

盒子的高度:
height:
文字的行高:
line-height:

   <style>div {width: 200px;/*盒子宽度*/height: 50px;/*盒子高度*/line-height: 50px;/*行高,行高==盒子高度能达成文字垂直对齐*/text-align: center;/*文字水平居中*/background-color: red;/*盒子背景颜色*/}</style>
</head>
<body>
<div>我要垂直居中</div>
</body>

P115.背景样式

通过css背景属性,可以给页面添加背景样式,分为背景颜色,图片,平铺,图片位置,图像固定

一.背景颜色

background-color:transparent | color(|意为或者)

默认背景颜色是transparent,可以自定义颜色,所以没有自定义背景颜色,就找不到整个盒子的位置

二.背景图片

背景可以是背景颜色,还可以是背景图片

background-image: none | url(url)

三.背景图片平铺

背景平铺是对于背景图片而言的, 上图:盒子大,图片小,默认就需要多张图片才能铺满整个盒子,多张图片在x轴和y轴平铺开的效果就是背景平铺,但是默认的这种背景图片不满足我们的需求,通常会采取不平铺或沿着某一个方向平铺.

默认(背景平铺):
background-repeat: repeat;
不平铺:
background: no-repeat;
沿着x轴平铺:
background: repeat-x;
沿着y轴平铺:
background: repeat-y;

不平铺:盒子还是那么大,但是图片只有一张,没有铺开.

另外:背景图片和背景颜色可以同时存在,只不过背景图片会压住背景颜色

四.背景图片位置

这也是针对背景图片而言的

之前在html中我们学过< image>标签,在css中我们又学背景图片,这两者最显著的区别就是< image>不好控制图片的位置,但是背景图片有专门控制背景位置的属性,控制图片位置方便.

background-position: x y;

1.方位名词

两个方位名词没有顺序关系,left top效果和top left一样

如果只指定了一个方位名词,另一个值省略,则第二个值默认居中对齐

对于第二点:我有自己的理解:省略一个方位名词,可以认为默认从最中间开始,然后向着给定的哪个方位名词,就是编译器默认的效果.

background-position: left top;

两个方位名词:

一个方位名词:

2.精确单位

如果参数值是精确单位,那么第一个参数一定是x坐标,第二个一定是y坐标.

如果只给定一个参数,那么这个参数一定是x坐标,另一个是y坐标,默认居中对齐.

3.混合单位

方位名词和精确单位混合

水平20px,垂直居中,第2行效果等同于第3行:
background-position: 20px center;
background-position: 20px;
水平居中,垂直50px:
background-position: center 50px

五.背景固定

这也是针对背景图片的

设置背景图片是否固定或者随着页面的其余部分滚动

默认是滚动的.

如QQ官网的这张背景图就不会随着文字等元素移动而移动:

background-attachment: scroll | fixed;

   <style>div {height: 500px;width: 700px;background-image: url(../Image/OIP-C\ \(1\).jpg);background-position: center top;background-attachment: fixed;color: red;}</style>
</head>
<body>
<div><p>天王盖地虎,宝塔镇河妖</p><p>天王盖地虎,宝塔镇河妖</p><p>天王盖地虎,宝塔镇河妖</p><p>天王盖地虎,宝塔镇河妖</p><p>天王盖地虎,宝塔镇河妖</p><p>天王盖地虎,宝塔镇河妖</p><p>天王盖地虎,宝塔镇河妖</p><p>天王盖地虎,宝塔镇河妖</p><p>天王盖地虎,宝塔镇河妖</p><p>天王盖地虎,宝塔镇河妖</p><p>天王盖地虎,宝塔镇河妖</p><p>天王盖地虎,宝塔镇河妖</p><p>天王盖地虎,宝塔镇河妖</p><p>天王盖地虎,宝塔镇河妖</p><p>天王盖地虎,宝塔镇河妖</p><p>天王盖地虎,宝塔镇河妖</p><p>天王盖地虎,宝塔镇河妖</p><p>天王盖地虎,宝塔镇河妖</p><p>天王盖地虎,宝塔镇河妖</p><p>天王盖地虎,宝塔镇河妖</p><p>天王盖地虎,宝塔镇河妖</p><p>天王盖地虎,宝塔镇河妖</p><p>天王盖地虎,宝塔镇河妖</p><p>天王盖地虎,宝塔镇河妖</p><p>天王盖地虎,宝塔镇河妖</p>
</div></body>

效果就不给大家展示了~~

六.背景复合写法

background开头,空格隔开

background: 背景颜色 背景图片地址 背景平铺 背景图像固定 背景图片位置
background: black url(../Image/OIP-C\ \(1\).jpg) no-repeat fixed center top;

七.背景颜色半透明

首先我们知道background-color: black;就是背景颜色,而且是100%纯黑色

如果我们得到半透明或者30%等透明度的背景颜色:

background: rgba(1,0,0,.5);

a代表透明度,通常用小数表示,范围0-1,当0<a<1时,通常省略0,使得书写方便,也就是0.3就可以写成.3

P129.css的三大特性

css有三个非常重要的三个特性:层叠性,继承性,优先级

一.层叠性(覆盖性)

给相同的选择器给设置相同的样式,此时一个样式就会覆盖另一个冲突的样式.层叠性主要解决样式冲突的问题.

样式不冲突,不会覆盖
样式冲突,就近原则

   <style>div {height: 500px;/*不冲突*/width: 700px;/*不冲突*/color: red;/*相同选择器,相同样式冲突,被覆盖掉了*/}div {color: pink;/*就近原则*/}</style>
</head>
<body><div>长江后浪推前浪,后浪死在沙滩上</div>
</body>

也可以通过调试工具查看:

二.继承性

css中的继承: 子标签会继承父标签的某些样式

继承:text-,font-,line-,color属性等,盒子模型等不会继承

   <style>div {color: red;font-family: 仿宋;}</style>
</head>
<body><div><p>龙生龙，凤生凤，老鼠的儿子打地洞</p></div>
</body>

这里我们并没有给p标签设置样式,但是给p标签的父标签设置了文本颜色和字体的样式,子标签p就继承过来了

这个其实我们早就用过,我们之前在body中设置样式,应用于body全部元素,其实也是由于继承性.

这样可以简化css代码

三.优先级

同一个元素指定了多个选择器,就会有优先级的产生

如果选择器相同,执行层叠行(就近原则)
如果选择器不同,则执行选择器权重

1.基础选择器的优先级

   <style>/*不同选择器的同一元素div的样式冲突,执行选择器权重*/.text {color: blue;}div {color: red;}</style>
</head>
<body><div class="text">你笑起来真好看</div>
</body>

如果你给一个选择器的样式内写上!important,权重无限大

ps:继承的权重为0,也就是即使父亲的权重很高,但是我子继承过来的时候权重就是0,到时候要拿着权重去和不同选择器的同一元素比较的.

例子:

ps:链接标签在浏览器中被默认设置了一个样式蓝色的有下划线 a{ color:blue },这个权重不为0,大于body的权重,所以不会继承body的样式.另外的,如果我们自己写了 a {color: red},由于同一选择器的统一元素,执行层叠性,就会使用我们自己写的样式.

2.复合选择器的优先级

权限叠加:如果是复合选择器,就会有权限叠加,需要计算

   <style>li { /*0001*/color:red;}ul li {  /*0001+0001=0010*/color: green;}</style>
</head>
<body><ul><li>复合选择器的权限叠加</li><li>复合选择器的权限叠加</li><li>复合选择器的权限叠加</li></ul>
</body>

【黑马程序员pink名师讲CSS】学好CSS有这一篇就够了(CSS笔记)相关推荐

【黑马程序员pinik名师讲html】HTML很容易忘记?有它我不慌的
这篇HTML博客是参考B站黑马程序员–pink老师做的个人笔记,供平时复习使用,现分享给大家,喜欢的话请多多点赞收藏哦~~ 文章目录 P3.网页的基本概念 P4.常用的浏览器 P5.Web标准 P10 ...
B站黑马程序员pink老师讲的JavaScript代码
B站黑马程序员pink讲课的JavaScript代码(部分代码) <!DOCTYPE html> <html lang="en"> <head> ...
html, css学习笔记，自用（B站黑马程序员pink老师）
附上教学视频链接黑马程序员pink老师前端入门教程该博文是自己随手记的上述视频笔记跳转到css, p61 P18 <div> </div>一行一个,<span> ...
学成在线案例——黑马程序员pink老师\思路讲解\完整源代码
本文为跟随B站黑马程序员pink老师学习CSS时所写,文章讲解了学成在线首页的制作思路,并贴出了源代码,作为学习笔记分享给大家如有错误,欢迎指出.如有侵权,联系删除文章目录 1. 案例准备工作 2 ...
【黑马程序员pink老师前端】网页相关概念
java 学习笔记指路基础知识 Python转java补充知识 Java中常见的名词解释前端 [黑马程序员pink老师前端]HTML [黑马程序员pink老师前端]JavaScript基础大总结 ...
【黑马程序员pink老师前端】JavaScript对象
java 学习笔记指路基础知识 Python转java补充知识 Java中常见的名词解释前端 [黑马程序员pink老师前端]HTML [黑马程序员pink老师前端]JavaScript基础大总结 ...
跟着黑马程序员pink老师学习的笔记及小破站学习的笔记
网页 1.网站是指在因特网上根据一定的规则,使用HTML等制作的用于展示特定内容相关的网页集合 2.什么是网页? 网页是网站中的一"页",通常是HTML格式的文件,它要通过浏览器来 ...
CSS 学习笔记总结（借鉴黑马程序员pink老师前端入门）
1. CSS 简介 CSS 的主要使用场景就是美化网页,布局页面的 1.1 HTML 的局限性说起 HTML ,他只关注内容的语义.比如 <h1> 表明这是一个大标题,<p> ...
黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程（CSS字体，文本）
一.基础班学习路线三.CSS3基础 1.CSS简介 CSS是层叠样式表的简称,有时也称为 CSS样式表 ,级联样式表也是一种标记语言 CSS主要用于设置HTML页面中的文本内容,图片的外形以 ...

【黑马程序员pink名师讲CSS】学好CSS有这一篇就够了(CSS笔记)