跟着pink老师学前端CSS-D2

最新推荐文章于 2023-05-03 23:30:34 发布
最新推荐文章于 2023-05-03 23:30:34 发布
阅读量198 收藏 1
点赞数
分类专栏： 前端基础学习 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_46548238/article/details/117900484
版权
本文详细介绍了Emmet语法在HTML和CSS编写中的应用，包括快速生成HTML结构和CSS语句的方法，如使用缩写、自增符号、伪类选择器等提高效率的技巧。还涵盖了CSS中的复合选择器、背景属性、元素显示模式转换以及链接伪类选择器的用法，旨在提升前端开发的效率。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1. Emmet语法

Emmet语法的前身是Zen coding，它使用缩写来提高html/css的编写速度，Vscode内部已经集成该语法。

1.1 快速生成HTML结构语法

<body>
    <!-- 生成多个标签 div*3 -->
    <div></div>
    <div></div>
    <div></div>
    <!-- 父子级 ul>li -->
    <ul>
        <li></li>
    </ul>
    <!-- 兄弟级 div+p-->
    <div></div>
    <p></p>
    <!--  .nav默认生成div的类 -->
    <div class="nav"></div>
    <!--  #nav默认生成div的id -->
    <div id="nav"></div>
    <!-- .demo$*5 -->
    <div class="demo1"></div>
    <div class="demo2"></div>
    <div class="demo3"></div>
    <div class="demo4"></div>
    <div class="demo5"></div>
    <!-- 在生成的标签内显示几个文字：div{好喜欢riki} -->
    <div>好喜欢riki</div>
    <!-- div{$}*5 -->
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</body>
  1. 生成标签，即自动补全功能。
  2. 如果想生成多个相同的标签，可以用“✳”，比如：div✳3。
  3. 如果有父子级关系的标签，可以输入>，比如ul>li。
  4. 如果有兄弟级关系的标签，可以输入+，比如div+p。
  5. 如果生成带有类名或者id名字的，直接写 .demo 或者#id 回车就可以了。
  6. 如果生成的div类名是有顺序的，可以用自增符号$。
  7. 如果想要在生成的标签内部写内容可以用{}表示。

1.2 快速生成CSS语句语法

<style>
    /* 只要输入属性首字母即可自动生成语句 */
    .one {
        /* ta+enter */
        text-align: center;
        /* w100+enter */
        width: 100px;
        /* h100+enter */
        height: 100px;
        text-indent: 2em;
        text-decoration: none;
    }
</style>

1.3 快速格式化代码

右键->格式化代码或者shift+alt+F。

设置保存页面是自动格式化文档：设置中搜索format把保存时自动格式化（format on save）的选项勾上。

2. 复合选择器

复合选择器是建立在基础选择器之上的，对基础选择器进行组合形成的。

2.1 后代选择器

元素1 元素2 { 样式声明 }
//元素2是元素1的孩子，中间用空格隔开，最终选择的是元素2。孩子包括儿子、孙子...

<style>
    /* 我想要把ol里面的小li选出来改为pink */
    ol li {
        color: pink;
    }
	/* 我想要把ol里面的小li里面的a选出来改为lightblue */
    ol li a {
        color: lightblue;
    }
    /* 我想要把nav里面的小li里面的a选出来改为yellow */
    .nav li a {
        color: yellow;
    }
</style>

<body>
    <ol>
        <li>我是ol 的孩子</li>
        <li>我是ol 的孩子</li>
        <li>我是ol 的孩子</li>
        <li><a href="#">我是孙子</a></li>
    </ol>
    <ul>
        <li>我是ul 的孩子</li>
        <li>我是ul 的孩子</li>
        <li>我是ul 的孩子</li>
    </ul>
    <ul class="nav">
        <li>我是ul的孩子</li>
        <li>我是ul的孩子</li>
        <li>我是ul的孩子</li>
        <li><a href="#">不会变化的</a></li>
        <li><a href="#">不会变化的</a></li>
        <li><a href="#">不会变化的</a></li>
        <li><a href="#">不会变化的</a></li>
    </ul>
</body>

2.2 子选择器

只能选择作为某元素的最近一级子元素，选的是亲儿子元素。

元素1>元素2 { 样式声明 }
//元素2是元素1的亲儿子，中间用>隔开，最终选择的是元素2。

<style>
    /* 只有亲儿子才会变黄 */
    .nav>a {
        color: yellow;
    }
</style>

<body>
    <div class="nav">
        <a href="#">我是儿子</a>
        <p><a href="" #>我是孙子</a></p>
    </div>
</body>

2.3 并集选择器

并集选择器可以选择多组标签，为他们设置相同的样式。并集选择器是各选择器通过英文逗号连接而成。

元素1,元素2 { 样式声明 }

div,
p {
    color: pink;
}
.pig li,
div,
p {
    color: royalblue;
}

2.4 伪类选择器

伪类选择器用于向某些选择器加特殊的效果，比如给链接添加特殊效果，或选择第1歌，第n个元素。伪类选择器用冒号表示，比如:hover、:first-child。

1. 链接伪类选择器

选择器描述
a:link选择所有未被访问的链接
a:visited选择所有已被访问的链接
a:hover选择鼠标指针位于其上的链接
a:active选择活动链接（鼠标按下未弹起的链接）
<style>
    /* 未访问的链接a:link */
    a:link {
        color: #333;
        text-decoration: none;
    }

    /* 访问过的链接a:visited 豆瓣app点过的帖子标题会变灰*/
    a:visited {
        color: hotpink;
    }

    /* 鼠标经过的链接a:hover */
    a:hover {
        color: lightblue;
    }

    /* 鼠标按下未弹起的链接a:active */
    a:active {
        color: goldenrod;
    }
</style>
/* 结果：链接没访问过时是黑色，鼠标放在链接上是蓝色，按下鼠标没松开时是黄色，访问过后变为粉色。*/
  • 顺序必须为：HVHA——>:link->:visited->:hover->:active。
  • 因为a链接在浏览器中具有默认样式，所以我们实际开发中需要给链接单独指定样式。

2. :focus伪类选择器

focus伪类选择器用于选取获得焦点的表单元素。焦点就是光标，针对input表单元素。

input:focus {
	background-color:yellow;
}

3. 元素显示模式

元素显示模式就是元素（标签）以什么方式进行显示。html元素一般分为块元素和行内元素。

3.1 块元素

常见块元素有：h1~h6, p, div, ul, ol, li等，其中div标签是最典型的块元素。

块级元素的特点：

  1. 自己独占一行。
  2. 宽度、高度、内外边距都可以控制。
  3. 默认宽度是父级宽度的100%。
  4. 是一个容器及盒子，里面可以放行内元素或者块级元素。

注意：文字类的元素内不能使用块级元素。比如p标签内不能放div。

3.2 行内元素

常见的行内元素有a, strong, v, em, i, del, s, ins, u, span等，其中span标签是最典型的行内元素。有的地方也将行内元素称为内联元素。

行内元素的特点：

  1. 相邻行内元素在一行上，一行可以有多个行内元素。
  2. 高、宽设置无效。
  3. 默认宽度就是它本身内容的宽度。
  4. 行内元素只能容纳文本或其它行内元素。

注意：a里面不能再放a，但是可以放其他块级元素。

3.3 行内块元素

同时具有块元素和行内元素的特点的元素叫行内块元素，常见的行内块元素有：img，input，td。

行内块元素的特点：

  1. 和相邻行内元素（行内块）在一行上，但是它们之间会有空白缝隙。一行可以显示多个。
  2. 默认宽度就是它本身内容的宽度。
  3. 高度、行高、内外边距可以控制。

1、2属于行内元素特点，3属于块级元素特点。

3.4 元素显示模式转换

行为语句
转换为块元素display:block;
转换为行内元素display:inline;
转换为行内块元素display:inline-block;
<style>
    a {
        width: 150px;
        height: 50px;
        background-color: hotpink;
        /* 把行内元素转化为块级元素，就可以设置宽高了 */
        display: block;
    }

    div {
        width: 300px;
        height: 100px;
        background-color: hotpink;
        /* 把块级元素转化为行内元素，此时不能设置宽高 */
        display: inline;
    }

    span {
        width: 100px;
        height: 30px;
        background-color: hotpink;
        /* 转换为行内块元素 */
        display: inline-block;
    }
</style>

3.5 单行文字垂直居中

让文字的行高等于盒子的高度。line-height=height

/* 垂直居中 line-height=height */
height: 40px;
line-height: 40px;

4. CSS的背景

​ 背景图片:实际开发中常见于logo或者一些装饰性的小图片或者是超大的背景图片,优点是非常便于控制位置.

4.1 背景颜色和背景图片

<style>
    .color {
        width: 300px;
        height: 100px;
        /* 默认透明，设置背景颜色透明：transparent */
        background-color: hotpink;
    }

.img {
        width: 600px;
        height: 600px;
    	/* 这张图片的尺寸是300*300 */
        background-image: url(KITTY.jpg);
        /* 背景平铺：background-repeat 默认平铺*/
        background-repeat: no-repeat;
        background-color: greenyellow;
    }
</style>

4.2 背景图片的位置

1. 方位名词

<style>
    .img {
        width: 600px;
        height: 600px;
        background-image: url(KITTY.jpg);
        background-repeat: no-repeat;
        background-color: greenyellow;
        /* 方位名词 */
        /* 属性值为方位名词时，x,y顺序可换 */
        /* background-position: right center; */
        /* 
        当只有一个参数时,
        如果是水平方向上：left或right，竖直方向上默认垂直居中
        如果是垂直方向上：top或bottom，水平方向上默认水平居中 
        */
        /* background-position: left; */
        /* background-position: top; */
        background-position: center right;
    }
</style>
```![在这里插入图片描述](https://img-blog.csdnimg.cn/20210614121252474.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjU0ODIzOA==,size_16,color_FFFFFF,t_70#pic_center)


### 2. 精确单位

```css
<style>
    div {
        width: 600px;
        height: 600px;
        background-image: url(KITTY.jpg);
        /* 背景平铺：background-repeat 默认平铺*/
        background-repeat: no-repeat;
        background-color: greenyellow;
        /* (x,y)坐标中xy顺序不能换，要带单位 */
        /* 如果只写了一个值，这个值一定是x的值 */
        background-position: 100px 50px;
    }
</style>

在这里插入图片描述

3. 混合单位

<style>
    body {
        background-image: url(img.jpg);
        background-repeat: no-repeat;
        /* 水平居中，垂直方向40px */
        background-position: center 40px;
    }
</style>

4.3 固定背景图像

<style>
    body {
        background-color: white;
        background-image: url(img.jpg);
        background-repeat: no-repeat;
        background-position: center top;
        color: rgb(250, 16, 145);
        font-size: 50px;
        /* 固定背景图像，内容走，背景图像不动 */
        background-attachment: fixed;
    }
</styl

4.4 背景属性复合写法

<style>
    body {
        /* background:背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图像位置; */
        background: black url(img.jpg) no-repeat fixed center top;
        font-size: large;
        color: hotpink;
    }
</style>

4.5 背景颜色半透明

background:rgba(0,0,0,0);

  • r:red g:green b:blue a:alpha(透明度)

  • 透明0------->1不透明

  • 习惯省略透明度参数前面的0,如:

    background:rgba(0,0,0,.3);

在这里插入图片描述

5. 综合案例-五彩导航

技术

  1. 模式转换
  2. 单行文字垂直居中
  3. 背景相关属性
  4. 链接伪类选择器

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>综合案例-五彩导航</title>
    <style>
        .nav a {
            display: inline-block;
            width: 120px;
            height: 58px;
            background-color: hotpink;
            line-height: 48px;
            color: white;
            text-decoration: none;
            text-align: center;
        }

        .nav .bg1 {
            background: url(bgimg/bg1.png) no-repeat;
        }

        .nav .bg1:hover {
            background-image: url(bgimg/bg11.png);
        }

        .nav .bg2 {
            background: url(bgimg/bg2.png) no-repeat;
        }

        .nav .bg2:hover {
            background-image: url(bgimg/bg22.png);
        }

        .nav .bg3 {
            background: url(bgimg/bg3.png) no-repeat;
        }

        .nav .bg3:hover {
            background-image: url(bgimg/bg33.png);
        }

        .nav .bg4 {
            background: url(bgimg/bg4.png) no-repeat;
        }

        .nav .bg4:hover {
            background-image: url(bgimg/bg44.png);
        }
    </style>
</head>

<body>
    <div class="nav">
        <a href="#" class="bg1">五彩导航</a>
        <a href="#" class="bg2">五彩导航</a>
        <a href="#" class="bg3">五彩导航</a>
        <a href="#" class="bg4">五彩导航</a>
    </div>

</body>

</html>

效果

在这里插入图片描述
鼠标放在哪个导航上它就会变色：
在这里插入图片描述

前端 | （六）CSS盒子模型 | 尚硅谷前端html+css零基础教程2023最新
知识库搭建ing
07-19 1189
CSS盒子模型 | 尚硅谷前端html+css零基础教程2023最新
黑马pink老师Web前端入门笔记（二）
m0_46640262的博客
06-16 677
黑马pink老师Web前端入门笔记Web前端入门（二）（二）HTML标签1 学习目标2 学习内容2.1 HTML语法规范2.2 HTML基本结构标签2.3 开发工具 Web前端入门（二） （二）HTML标签 1 学习目标 2 学习内容 2.1 HTML语法规范 ※ 所有标签由尖括号加关键词组成，如<html >。 ※ 双标签：大部分情况下标签成对出现。<html></html>,其中<html>为开始标签，</html>为结束标签，多一个/。 双
B 站黑马程序员 pink 老师前端课程学习笔记_03 CSS3
PancrasG的博客
01-28 1039
CSS3_02 1. Emmet 语法 Emmet 语法的前身是 Zen cooding，它使用缩写来提高 html 和 css 的编写速度，Vscode内部已集成该语法 1.1 快速生成 HTML 语法 生成标签： 直接输入标签名按 tab 键即可 生成多个相同的标签：加上* 生成有父子关系的标签：> 生成有兄弟关系的标签：+ 生成带有类名或 id 名字的标签：直接写类名或者 id 名（默认生成在 div 标签下） 生成有顺序类名：$ 在生成的标签内部书写：{} <!-- 生成多个相同
2022年5月21日Pink老师五彩导航
我是搬码蚁的博客
05-21 499
来源：B站pink老师P127：五彩导航栏 目的：学习记录 练习价值 1）链接属于行内元素，但此时需要宽度高度又不独占一行，涉及模式转换为行内块元素 display: inline-block; 2）其中文字需要水平居中和垂直居中显示，涉及单行文字垂直居中 文字行高等于盒子高度 3）链接需要设置背景图片 4）鼠标经过变化背景图片，设计链接伪类选择器 最终效果 HTML代码展示 <!DOCTYPE html> <html lang="en"> <head> &l
背景图片和五彩导航栏
qq_42964711的博客
05-02 1699
背景图片url适合logo 方位：left top center right bottom 前后顺序无影响 <style> div { width: 1000px; height:1000px; background-color: orange; ...
链接伪类选择器
小白girl
08-21 5475
用：表示 ：link 位访问的链接 ：visited 已经访问过的链接会发生改变 ：hover 鼠标移动到链接上会发生改变 ：active 选定的链接 顺序不能变 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&a
11月29日，学习ing...........,跟上PINK老师的步伐
m0_64567550的博客
11-29 445
1.快速格式化代码（emmet语法） 设置：保存页面是就自动格式化代码 （1）文件-----【首选项】-------【设置】 （2）搜索emmet.include （3）在settings.json下的【用户】中添加以下语句： "editor.formationOnType":true, "editor.formationOnSave":true 只需要设置一次即可，以后都可以自动保存格式化代码...
Web前端笔记--html，css，javascript，jquery
../
02-21 1467
HTML - HyperText超文本 Mark标记 Language语言。 - 什么是超文本？ 不仅仅是纯文本，除了文本之外还包括字体信息，还包括多媒体信息（图片、音频、视频）。 - 和XML的不同点： xml的标签是可以扩展的,html标签是固定的。 常用标签 1. 文本标签 - 内容标题：h1-h6     属性  align:left/right/center  独占一行，上下...
前端知识之css
prigilm的博客
11-03 438
CSS 文章目录CSS一、CSS介绍二、CSS语法1、注释2、CSS样式组成三、CSS三种引入方式四、CSS选择器1、基本选择器2、组合选择器3、属性选择器4、分组和嵌套5. 伪类选择器6. 伪元素选择器7. 选择器优先级8. 总结五. CSS继承1. 什么是继承?六. CSS常用属性1. 宽和高2. 字体属性3. 文字属性4. 背景属性5. display属性六. CSS盒子模型1. margin外边距2. border边框3. padding内填充4、总结七. 使网页中的元素产生阴影八. 清除某些HTM
CSS-Cascading Style Sheet_层叠样式表_用法详解
qq_31455841的博客
09-26 2898
CSS Cascading Style Sheet 1. CSS 介绍 1. CSS 概念介绍 CSS 全称 Cascading Style Sheet 层叠样式表 1. 专门用来为HTML标签添加样式 2. 样式指的是HTML标签的显示效果,比如换行、宽高、颜色等等 3. 层叠属于CSS的三大特性之一 4. 表指的是我们可以将样式统一收集起来写在一个地方或者一个CSS文件里 2. CSS 使用目的 1. CSS 之前 在没有CSS之前,我们想要修改HTML标签的样式则需要为每个HTML标签单
[HTML+CSS]-3D透视游戏卡片交互
Bennnnnnn的博客
05-03 784
/margin;padding;box-sizing;.warpwidth;height;;/* 平铺显示 */display;;;.cardwidth;color;background;/* 然后不去给它指定高度，让文字自己把div撑起来，比较弹性 */;position;;height;;;margin;text-align;transform。
超链接的伪类选择器
howard2005的专栏
02-24 2802
超链接的伪类选择器1、代码&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;超链接伪类选择器&lt;/title&gt; &lt;style type="text/css"&
HTML知识点整理（pink老师课程的学习笔记）
ZMH的博客
02-02 1342
HTML知识点整理 HTML介绍 HTML书写规范 HTML常用标签 1.HTML介绍 Html是用来描述网页(html文件)的一种超文本标记语言。 2. HTML书写规范 (1)基本规范 双标签<> </>；单标签</> 标签间有包含和并列关系 （2）html骨架标签 3.HTML常用标签 .补充：路径知识 ...
黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程（复合选择器，元素显示模式，背景）
m0_51448653的博客
10-15 1864
1.Emmet语法 emmet语法生成html标签 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.
【02】 PC端网页布局之CSS3-pink老师-2022/03
qq_44722174的博客
03-15 5158
PC端网页布局之CSS3 黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili 1. CSS基础 css最大价值：让HTML专注做结构呈现，样式交给CSS，即结构和样式相分离。主要调整文本内容、图像、页面布局和外观美化等。（网页的美容师） CSS代码风格 样式格式书写：紧凑格式和展开格式（强烈推荐） 样式大小写风格：全部使用小写（更加直观） 样式空格风格：冒号后，保留一个空格；选择器（标签）和大括号间保留一个空格
41 图片背景综合-五彩导航图
hello_sunny123的博客
07-11 1698
代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&.
错误解决：apachectl: line 78:  5160 段错误     $HTTPD -k $ARGV
12-06 5755
今天将php版本由5.6升为7.0时（源码安装），apache重启时出现了这个问题 [root@localhost mysc]# /usr/local/apache2/bin/apachectl restart  /usr/local/apache2/bin/apachectl: line 78:  5160 段错误                  $HTTPD -k $ARGV
h5中的超链接和伪类选择器
xuemoKingDeath的博客
04-16 3167
html> html lang="en"> head> meta charset="UTF-8"> style> /*伪类选择器*/ /*想要运行效果 必须用lvha*/ /*设置超链接样式的步骤： 确定页面所有链接样式是否相同，否则分开定义 先定义四个状态有的样式*/
综合案例，五彩导航
GoldenaArcher的博客
04-03 1062
> [黑马程序员pink老师前端入门视频教程 HTML5+CSS3+移动端布局-flex布局rem布局响应式布局摹客蓝湖使用-简单有趣好玩](https://www.bilibili.com/video/BV14J4114768?p=127), p127的案例。 练习价值： - 对 `inline element` 行内元素 的模式转换 - 利用 `line-height: content-height;` 实现文字的垂直居中 - 背景图片相关定义 - 伪类选择器的使用
黑马Pink老师前端入门素材：学成网HTML/CSS/PSD资源
这些素材是为配合b站课程《黑马Pink老师2020最新前端开发入门基础篇完整版》中的第七天案例而设计的，涵盖了前端开发入门阶段所需的各项技能。 具体来说，HTML文件是网页的骨架，它通过标签定义了网页的结构和内容...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值