黑马前端速成2023新版CSS部分笔记

最新推荐文章于 2024-07-21 17:58:14 发布
最新推荐文章于 2024-07-21 17:58:14 发布
阅读量1.1k 收藏 30
点赞数 7
文章标签： java css html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_62377928/article/details/132570480
版权

CSS

体验css

div是默认占一行，两个div会占两行。

span是接着一行

层叠样式表（css）是一种样式表语言，用来描述html文档的呈现（美化内容）。
书写位置：title标签下面添加style双标签，style标签里书写CSS代码

<title>css初体验</title>
<style>
    /* 选择器{}*/
    p{
        /*css属性*/
        color：red；
    }
</style>
<p>
    体验css
</p>

css引入方式

  • 内部样式表：学习使用
    css代码写在style标签里面

  • 外部样式表 ：开发使用
    css代码写在单独的css文件中（.css）

    在HTML使用linkv标签引入

    <link rel="stylesheet" href="./my.css">

  • 行内样式：配合JavaScript使用

    css写在标签的Style属性值里

    <div style="color:red;font-size:20px;">这是div</div>

标签和类选择器

标签选择器：使用标签名作为选择器->选中同名标签设置相同的样式。

类选择器：查找标签，差异化的设置标签的显示效果，在标签中使用类选择器时不加点。

​ 步骤：

	* 定义类选择器-> .类名
	* 使用类选择器-> 标签添加class = "类名"

<style>
    //定义类选择器
    .red{
        color: red;
    }
    //使用类选择器
    <div class="red">这是div标签 </div>
</style>

通配符选择器：查找页面所有标签，设置相同样式。

* {
	color:red;
}

画盒子

目标：使用合适的选择器画盒子,盒子只能用div标签来画，因为span是一行。

 <style>
    .one{
        color: aqua;
        height: 200px;
        width: 200px;
        background-color: antiquewhite;
    }
    .two{
        color:blue;
        height: 200px;
        width: 200px;
        background-color: aqua;
    }
    </style>
 	<div class="one">
        盒子1
    </div>
    <div class="two">
        盒子2
    </div>

字体修饰属性

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  1. 字体大小要注意加单位px，否则不生效

  2. 字体粗细的属性值可以是数字也可以是关键字

    数字： 正常 400 加粗700

    关键字：正常 normal 加粗 bold

  3. 字体倾斜：

    em标签默认倾斜

    正常不倾斜：normal

    倾斜： italic

  4. 行高：

    数字+px

    数字（当前标签字体大小的倍数）

    line-height:30px;
/*当前标签字体大小为16px*/
line-height:2;

    想要文字在盒子里垂直居中那需要使得文字的行高等于盒子的高度；(只适用于单行文字)

  5. 字体族（字体类型）

    直接写字体类型：font-family: 楷体；

  6. font复合属性：就是指把对字体的多个属性的设置整合成一行代码，用于在开发前期统一公共样式

    div {
	font: italic 700 30px/2 楷体;
		  倾斜  加粗 字号/行高 字体
}

  7. 文本缩进

    数字+px

    数字+em(推荐：1em=当前标签的字号大小)

    p {
	text-indent: 2em;
}//首行缩进两个字号大小

  8. 文本对齐方式

    left ：左对齐

    center ：居中

    right ：右对齐

    text-align: center

    如果想对齐图片，需要在图片上加个父级标签，对父级标签使用对齐方式会使图片对齐，代码如下：

    <style>
    div {
        text-align : center;
    }
</style>

<div>
    <img src="./1.jpg" alt="图片加载失败">
</div>

  9. 文本修饰线

    属性名：text-decoration

    属性值：

    none 无

    underline 下划线

    line-through 删除线

    overline 上划线

  10. 外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

复合选择器

定义：由两个或多个基础选择器，通过不同的方式组合而成。

作用：更准确，更高效的选择目标元素（标签）。

后代选择器

作用：选中某元素的后代元素

选择器写法：父选择器 子选择器{css属性}，父子选择器之间用空格隔开，会选中所有的后代

<style>
div span{
    color:red;
}
</style>
<span> span 标签</span>
<div>
	<span>这是div的儿子span</span>
	<p><span>这是div的孙子</span></p>
</div>

子代选择器

作用：选中某元素的儿子元素（最近的子级）

选择器写法：父选择器>子选择器{css属性}，父子选择器之间用大于号隔开。

<style>
    //选中div标签下一级的span
    div > span{
        color:red;
    }
</style>

并集选择器

作用：选中多组标签设置相同的样式。

选择器写法：选择器1，选择器2，…,选择器n{css属性}，选择器之间用，隔开。

 	<style>
        p,span,div {
            color: blue;
        }
    </style>
    <p>p标签</p>
    <div>div标签</div>
    <span>span标签</span>

交集选择器

作用：交集选择器选中同时满足多个条件的元素

选择器写法： 选择器之间连写，没有任何符号，如果交集选择器中有标签选择器，标签选择器必须写在最前面

    <style>
        .box{
            color: red;
        }
        p.box{
            color: blue;
        }
    </style>
 	<P class="box">p标签，使用了类选择器</P>
    <P>p标签</P>
    <div class="box">div标签，使用了类选择器</div>

伪类选择器

作用：伪类表示元素状态，选中元素的某个状态设置样式

鼠标悬停状态：选择器:hover{css属性},任何标签都可以设置鼠标悬停的状态

    <style>
        .box{
            color: red;
        }
        a:hover{
            color: red;
        }
    </style>
    <a href="#">a标签</a>
    <div class="box">div标签</div>

伪类-超链接(拓展)

超链接一共有四个状态

：link 访问前

：visited 访问后

：hover 鼠标悬停

：active 点击时（激活）

如果要给超链接设置以上四个状态，需要按LVHA的顺序

CSS三大特性

继承性：

子级默认继承父级的文字控制属性。

例如直接用标签选择器body设置字体size为30px，所有的字体大小都为30px，除了自己的标签对字体有设置的

层叠性：

相同的属性会覆盖：后面的CSS属性覆盖前面的CSS属性

不同的属性会叠加：不同的CSS属性都生效

优先级：

也叫权重，当一个标签用了多种选择器时，基于不同种类的选择器的匹配规则。

规则：选择器优先级高的样式生效。

公式：通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important

(选中标签的范围越大，优先级越低)

<style>
        *{
            color: red !important;
        }
        div {
            color: green;
        }
        .ck{
            color: blue;
        }
        #test {
            color: purple;
        }
//最终显示的是红色
    </style>
  <div class="ck" id="test" style="color: aqua;">div标签</div>

优先级叠加计算规则

叠加计算：如果是复合选择器，则需要权重叠加计算。

就是一个标签被多个复合选择器选择了，把每个复合选择器所含有的子选择器按照（0，0，0，0）的样式列出然后进行比较。

公式：（每一级之间不存在进位）

（行内样式，id选择器个数，类选择器个数，标签选择器个数）

规则：

  • 从左向右依次比较选择器的个数，如果同一级个数多优先级高，如果个数相同，则向后比较
  • ！important权重最高
  • 继承权重最低
<style>
        /* (0,0,2,1) */
        .c1 .c2 div{
            color: blue;
        }
        /* (0,1,0,1) */
        div #box3{
            color: green;
        }
        /* (0,1,1,0) */
        #box1 .c3{
            color: orange;
        }
    </style>
</head>
<body>
    <div id="box1" class="c1">
        <div id="box2" class="c2">
            <div id="box3" class="c3">
                这行文本是什么颜色
            </div>
        </div>
    </div>
</body>

继承权重最低：如果一个复合选择器精确找到了标签本体，那就不算继承，如果找到了标签的父标签，那根据继承原则，本体会继承父标签的字体修饰属性，这时继承权重最低，不用考虑。

Emmet写法

代码的简写方式，输入缩写VSCode会自动生成相应的代码。

  • HTML
    • 外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传
  • CSS：大多数间歇方式为属性单词的首字母

背景属性-拆分写法

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

背景图

网页中，使用背景图实现装饰性的图片效果

属性名：background-image（bgi）

属性值：url（背景图url）

    <style>
        div{
            width: 500px;
            height: 500px;
            /* 背景图默认是平铺（复制）的效果 */
            background-image: url(./a.jpg);
        }
    </style>

背景图平铺方式

属性名：background-repeat（bgr）

属性值：

​ no-repeat 不平铺

​ repeat 平铺

​ repeat-x 水平方向平铺

​ repeat-y 垂直方向平铺

背景图位置

属性名：background-position（bgp）

属性值：水平方向位置，垂直方向位置

关键字：

关键字取值方式写法，可以颠倒取值顺序

可以只写一个关键字，另一个方向默认为居中；数字只写一个值表示水平方向，垂直方向为居中

背景图缩放

作用：设置背景图大小

属性名：background-size（bgz）

常用属性值：

  • 关键字
    • cover：等比例缩放背景图片以完全覆盖背景区，可能背景图片部分看不见
    • contain：等比例缩放背景图片以完全装入背景区，可能背景区部分空白
  • 百分比
  • 数字+单位（例如px）

背景图固定

作用：背景不会随着元素的内容滚动。

属性名：background-attachment（bga）

属性值：fixed

背景复合属性

属性名：background（bg）

属性值：背景色 背景图 背景图平铺方式 背景图位置/背景图缩放 背景图固定（空格隔开各个属性值，不区分顺序）

div{
	width:400px;
	height:400px;
	backround:pink url(#) no-repeat right center/cover;
}

显示模式

标签（元素）的显示方式

作用：布局网页的时候，根据标签的显示模式选择合适的标签摆放内容。

  • 块级元素
    • 独占一行
    • 宽度默认是父级的100%
    • 添加宽高属性生效
  • 行内元素
    • 一行共存多个
    • 尺寸由内容撑开
    • 加宽高不生效
  • 行内块元素 （图片）
    • 一行共存多个
    • 添加宽高属性生效
    • 默认尺寸由内容撑开

转换显示模式

属性名： display

属性值：

block 块级

inline-block 行内块

inline 行内

结构伪类选择器

作用：根据元素的结构关系查找元素

选择器 说明

E：first-child 查找第一个E元素

E：last-child 查找最后一个E元素

E：nth-child(N) 查找第N个E元素(第一个元素N值为1)

伪元素选择器

作用：创建虚拟元素（伪元素），用来摆放装饰性的内容

选择器 说明

E::before 在E元素里面最前面添加一个伪元素

E::after 在E元素里面最后面添加一个伪元素

注意点：

  • 必须设置content：“”属性，用来设置伪元素的内容，如果没有内容，则空下即可
  • 伪元素默认是行内显示模式
  • 权重和标签选择器相同
  • 就是选中一个标签，在前面和后面选择一块区域加内容，默认是行内，宽高不生效

盒子模型

作用：布局网页，拜访盒子和内容

组成

  • 内容区域 width&height
  • 内边距 padding（出现在内容与盒子边缘之间）
  • 边框线 border
  • 外边距 margin（出现在盒子外面）
边框线

属性名：border（bd）

属性值：边框线粗细，线条样式 颜色（不区分顺序）

常用线条样式

属性值 先调样式

solid 实线

dashed 虚线

dotted 点线

设置单方向边框线

属性名：border-方位名词（bd+方位名词首字母，bdl）

属性值：边框线粗细 线条样式 颜色（不区分顺序）

内边距

作用：设置内容与盒子边缘之间的距离

属性名：padding/padding-方位名词

div{
	//四个方向内边距相同
	padding:30px;
	
	//单独设置一个方向的内边距
	padding-top：10px；	
}

padding多值写法：为了简化代码

一个值是上下左右都是那个值。

两个分别是上下和左右

三个是上，左右，下

四个是上，右，下，左

尺寸计算

盒子尺寸 = 内容尺寸+ border尺寸 + 内边距尺寸

结论：给盒子加border/padding会撑大盒子

解决：

​ 手动做减法，减掉border/padding的尺寸

​ 内减模式：box-sizing：border-box（自动给做减法，不会撑大盒子）

外边距

作用：拉开两个盒子之间的距离

属性名：margin

属性值：粗细，不会撑大盒子

可以单独写一个方向也可以一次写多个方向，同上。

外边距-版心居中：margin：0 auto；表示上下边距为0，左右为auto。版心居中盒子必须有宽度，没宽度无法居中。

清除默认样式

清除标签默认的样式，比如默认的内外边距。

* {
	//通配符选择器选中所有标签
	margin:0;
	padding:0;
    box-sizing：border-box；
}
//去掉列表的序号
li {
	list-style：none；
}

元素溢出

作用：控制溢出元素的内容的显示方式。（内容多，超出盒子的宽和高）

属性名：overflow

属性值 效果

hidden 溢出隐藏

scroll 溢出滚动（无论是否溢出，都显示滚动条位置）

auto 溢出滚动（溢出才显示滚动条位置）

外边距问题-合并现象

场景：垂直排列的兄弟元素，上下margin会合并

现象：取两个margin中的较大值生效

外边距问题-塌陷问题

场景：父子级的标签，子级的添加上外边距会产生塌陷问题

现象：导致父级一起向下移动

解决方法：

  • 取消子级margin，父级设置padding
  • 父级设置overflow：hidden
  • 父级设置border-top

行内元素-内外边距问题

场景：行内元素（span）添加margin和padding，无法改变元素的垂直位置

解决方法：给行内元素添加line-height可以改变垂直位置

盒子模型-圆角

作用：设置元素的外边框为圆角

属性名：border-radius

属性值：数字+px/百分比

提示：属性值是圆角半径，写多个值是从左上角开始顺时针。

盒子模型-阴影

作用：给元素设置阴影效果

属性名：box-shadow

属性值：X轴偏移量 Y轴偏移量 模糊半径 扩散半径 颜色 内外阴影

注意：

  • X轴偏移量和Y轴偏移量必须书写
  • 默认是外阴影，内阴影需要添加inset

标准流

标准流也叫文档流，指的是标签在页面中默认的排布规则，例如：块元素独占一行，行内元素可以一行显示多个。

浮动

作用：让块元素水平排列(如果给一个父级的几个子级添加了浮动，如果父级没有设置高度，就会引发脱标现象，就是下面的元素会上来重叠，主要是因为父级没有高度，子级又浮动了，相当于父级里面没有东西，子级没把父级的高度撑开，子级浮动到了第二层，父级高度为0自然下面的元素会重叠上来)

属性名：float

属性值：

  • left：左对齐（从左到右排列）
  • right：右对齐（相反）

特点：浮动之后顶对齐，具备行内块显示模式的特点

清除浮动

场景：浮动元素会脱标（两个盒子重叠在一起），如果父级没有高度，子集无法撑开父级高度（可能导致页面布局错乱）

解决方法：清除浮动（清除浮动带来的影响）

方法一：额外标签法

  • 在父级元素的最后添加一个块级元素，设置CSS属性 clear：both

    .clearfix{
	clearfix:both;
}
<div>
<div>子集1</div>
<div>子集2</div>
<div class="clearfix"></div>
</div>

方法二：单伪元素法

.clearfix::after{
    //content必须有，将来哪里出问题哪里调用clearfix这个类，和额外标签法相同，不过用的是伪元素法，也是在父级标签的最后加一个块级的标签，类似于一个函数，函数的功能是在浮动的父级标签最后加一个块级标签
    content:"";
    display:block;
    clear:both;
}

方法三：双伪元素法

//before解决外边距塌陷问题，after清除浮动
.clearfix::before,.clearfix::after{
    content:"";
    display:table;
}
.clearfix::after{
    clear:both;
}

方法四：overflow

  • 父元素添加CSS属性

    overflow:hidden

flex布局

flex-认识

Flex布局也叫弹性布局，适合结构化布局，提供了强大的空间分布和对齐能力。Flex模型不会产生浮动布局中脱标现象，布局网页更简单、更灵活。

flex-组成

设置方式：给父级元素设置display：flex，子元素可以自动挤压或拉伸

组成部分：

  • 弹性容器

  • 弹性盒子

  • 主轴：默认在水平方向

  • 侧轴/交叉轴：默认在垂直方向

    描述 组成

创建flex容器 display：flex

主轴对齐方式 justify-content

侧轴对齐方式 align-items

某个弹性盒子侧轴对齐方式 align-self

修改主轴方向 flex-direction

弹性伸缩比 flex

弹性盒子换行 flex-wrap

行对齐方式 align-content

主轴对齐方式

属性名：justify-content

属性值 效果

flex-start 默认值，弹性盒子从起点开始依次排列

flex-end 弹性盒子从终点开始依次排列

center 弹性盒子沿主轴居中排列

space-between 弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子之间（间距在盒子之间，开头和结尾没有）

space-around 弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧（每个盒子左右两边都有空白）

space-evenly 弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等（均匀）

侧轴对齐方式

属性名

  • align-items 当前弹性容器内所有弹性盒子的侧轴对齐方式（给弹性容器设置）

  • align-self 单独控制某个弹性盒子的侧轴对齐方式（给弹性盒子设置）

    属性值 效果

    stretch 弹性盒子沿着侧轴线被拉伸至铺满容器（弹性盒子没有设置侧轴方向尺寸则默认拉伸）

    center 弹性盒子沿着侧轴局中排列

    flex-start 从起点开始

    flex-end 从终点开始

修改主轴方向

主轴默认在水平方向，侧轴默认在垂直方向

属性名：flex-direction：column；

弹性伸缩比

作用：控制弹性盒子的主轴方向的尺寸。

属性名：flex

属性值：整数数字，表示占用父级剩余尺寸的份数。

弹性盒子换行

弹性盒子可以自动挤压或拉伸，默认情况下，所有弹性盒子都在一行显示。

属性名：flex-warp

属性值

  • wrap：换行

  • nowrap：不换行（默认）

    flex-direction

弹性伸缩比 flex

弹性盒子换行 flex-wrap

行对齐方式 align-content

主轴对齐方式

属性名：justify-content

属性值 效果

flex-start 默认值，弹性盒子从起点开始依次排列

flex-end 弹性盒子从终点开始依次排列

center 弹性盒子沿主轴居中排列

space-between 弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子之间（间距在盒子之间，开头和结尾没有）

space-around 弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧（每个盒子左右两边都有空白）

space-evenly 弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等（均匀）

侧轴对齐方式

属性名

  • align-items 当前弹性容器内所有弹性盒子的侧轴对齐方式（给弹性容器设置）

  • align-self 单独控制某个弹性盒子的侧轴对齐方式（给弹性盒子设置）

    属性值 效果

    stretch 弹性盒子沿着侧轴线被拉伸至铺满容器（弹性盒子没有设置侧轴方向尺寸则默认拉伸）

    center 弹性盒子沿着侧轴局中排列

    flex-start 从起点开始

    flex-end 从终点开始

修改主轴方向

主轴默认在水平方向，侧轴默认在垂直方向

属性名：flex-direction：column；

弹性伸缩比

作用：控制弹性盒子的主轴方向的尺寸。

属性名：flex

属性值：整数数字，表示占用父级剩余尺寸的份数。

弹性盒子换行

弹性盒子可以自动挤压或拉伸，默认情况下，所有弹性盒子都在一行显示。

属性名：flex-warp

属性值

  • wrap：换行
  • nowrap：不换行（默认）
星有野195
关注
前端学习笔记02-css
abc_123_cba_123的博客
01-22 2056
CSS引入方式选择器1.1标签选择器1.2类选择器1.3id 选择器1.4通配符选择器字体属性文本属性 引入方式 css的引入方式有三种，分别是：行内样式、内部样式、外部样式 1.行内样式表 行内样式表（内联样式表）是在元素标签内部的 style 属性中设定 CSS 样式。适合于修改简单样式. 例：<div style="color: red; font-size: 12px;">青春不常在，抓紧谈恋爱</div> 2. 内部样式表 内部样式表（内嵌样式表）是写到htm
黑马程序员, html css javascript 前端笔记 pink老师教程
alexwang的博客
08-03 2157
黑马程序员, html css javascript 前端笔记 pink老师教程
黑马前端笔记
czj981014的博客
11-18 775
1. HTML 1.1 概念 http是超文本标记语言：超文本是用超链接的方法，将各种不同的空间的文字信息组织在一起的网状文本。标记语言是由标签构成的语言。 在开始标签可以定义属性，属性是由键值对构成，值需要用引号（单双都可）引起来 1.2 基本标签 文件标签：构成html最基本的标签 html/head/title/body/ 文本标签：和文本有关的标签 标签名： / to /////// 属性定义： color： 英文单词：red,green,blue rgb(值1，
黑马JavaWeb开发笔记01——前端介绍，HTML实现标题：排版
最新发布
apple_68589597的博客
07-21 1263
本篇文章是2023年最新黑马JavaWeb企业级开发（知识清单）01：前端介绍、html实现标题格式内容的总结，帮助需要学习Web开发的朋友温故而知新。
前端笔记（黑马）
m0_74045803的博客
09-02 75
自己记录的笔记
Vue学习笔记(黑马前端)
JayChouyyds589的博客
10-02 4007
黑马前端Vue学习笔记(未学完)
黑马教程前端笔记—继承
u010408083的博客
05-09 238
1、call() ES6之前，我们通过构造函数+原型对象模拟实现继承，被称为组合继承 call()的使用： 调用这个函数，并修改函数运行时this的指向 fun.call（thisArg,arg1,arg2）; thisArg:当前调用函数this的指向对象 arg1,arg2:传递的其他参数 function fn(x,y){ console.log("我想喝水"); console.log(this); console.log("---x+y=" + x+y) }
黑马前端css笔记.zip
08-14
总结，"黑马前端css笔记.zip"包含了CSS3的重要知识点，如选择器扩展、媒体查询、响应式设计、渐变效果、布局技术（Flexbox和Grid）以及动画过渡等。这些内容对于前端开发人员深入理解和运用CSS3至关重要，能帮助他们...
黑马基础学习html+css课程笔记和案例
06-29
总的来说，“黑马基础学习html+css课程笔记和案例”是一个全面学习前端基础知识的好资源，无论你是初学者还是想要巩固基础，都能从中受益。通过系统学习和实战练习，你可以掌握构建现代网页所需的核心技能，为后续的...
前端学习笔记-黑马程序员CSS
01-09
前端学习笔记-黑马程序员CSS CSS 是一种标记语言，主要用于美化页面，美化 HTML，让画面更美观。总结来说，HTML 主要做结构，显示元素内容，而 CSS 负责美化，让结构（HTML）与样式（CSS）相分离。 一、CSS 语法...
前端学习笔记-黑马程序员
01-09
前端学习笔记-黑马程序员 本篇文章主要介绍了 HTML 基础知识，涵盖了标签的基本概念、HTML 基本结构、文档类型声明、字符集、标签语义、标题标签、段落和换行标签、文本格式化标签、图像标签、路径、超链接标签、...
黑马前端笔记1--HTML（1）
weixin_51584115的博客
01-11 1818
【参考课程】黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程：b站课程链接 文章目录01 网页的相关概念02 常用浏览器及其内核03 Web标准04 HTML语法规范HTML标签关系05 基本结构标签基本标签结构06 vscode工具创建页面08 DOCTYPE和lang以及字符集的作用文档类型声明标签``页面语言lang字符集Character set**以上三个标签，在vscode中输入 ! 可自动生成**09 标签语义10 标题标签 01 网页的相关概念
黑马B站前端视频笔记
2301_78482533的博客
11-27 230
b站黑马视频的笔记
最最详细的黑马前端HTML5+CSS3笔记，给大家整理好了
热门推荐
m0_67401270的博客
03-07 1万+
基于黑马前端视频学习的CSS3笔记，每一天的知识点都放在一起，方便学习查阅 ==CSS第一天== 一、css简介 二、css语法规范 三、css代码风格 四、css选择器的作用 五、css基础选择器 1、标签选择器： 2、类选择器 3、多类名选择器 4、id选择器： 5、id选择器和类选择器的区别 6、通配符选择器 7、选择器总结 六、css字体属性: 1、字体大小： 2、字体粗细： 3、字体样式： 4、字体的综合写法 5、字体总结： 七、css文本属性： 1、文本颜色： 2、文本
【超级无敌详细的黑马前端笔记！即时更新~】
qq_45206556的博客
11-11 690
这个笔记，是我自己在同步学习黑马前端使用的，不可以商用哦。
黑马程序员前端基础笔记：前端基础提高H5C3 01
wc2356772894的博客
06-20 1147
H5C3高级使用
Web API【黑马前端--笔记整理】
weixin_60599272的博客
09-22 3316
API是为我们程序员提供的一个接口，帮助我们实现某种功能，我们会使用就可以了,不必纠结内部何实现Web APl主要是针对于浏览器提供的接口，主要针对于浏览器做交互效果。WebAPI一般都有输入和输出（函数的传参和返回值），Web API很多都是方法（函数)学习Web API可以结合前面学习内置对象方法的思路学习文档对象模型（Document Object Model,简称DOM），是W3C组织推荐的处理可扩展标记语言（HTML、XML）的标准编程接口。
b站黑马前端笔记1（到HTML标签上）
m0_57171763的博客
05-20 323
HTML简介 网页 什么是网页？ 网站是指在因特网上根据一定的规则，使用HTML等制作的用于特定内容相关的网页集合。 网页是网站中的“一页”，通常是HTML格式的文件，它要通过浏览器来阅读。 网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以.htm或.html后缀结尾的文件，因此俗称为HTML文件。 什么是HTML？ HTML指的是超文本标记语言（Hyper Text Markup Language），它是用来描述网页的一种语言。 它不是一
黑马前端笔记4--CSS（2）
weixin_51584115的博客
03-03 269
【参考课程】黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程：b站课程链接 课程资料：素材和源码： 下载链接 【PPT】链接：https://pan.baidu.com/s/1jm1LUuk5NIM-PPhmAbjEkg 提取码：sp39 相关资料：W3C-CSS基础教程：网页链接 文章目录01 Emmet语法 01 Emmet语法
CSS3手写笔记：打造专业网页美容师
笔记由黑马视频中的课程讲解整理而成，内容涵盖了广泛的CSS3知识点，包括但不限于： 1. **课程目标**： - 学习CSS选择器的使用，如通用选择器、类选择器、ID选择器、伪类选择器等，这对于页面元素的精确定位至关...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值