CSS基础课程笔记-day2

最新推荐文章于 2024-05-21 23:21:19 发布
最新推荐文章于 2024-05-21 23:21:19 发布
阅读量233 收藏 1
点赞数
文章标签： 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Obsession_k/article/details/128058634
版权

01-导读/目标

 

 

02-emmet语法 

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

     1.快速生成HTML结构语法

     2.快速生成CSS样式语法

1.快速生成HTML语法结构 

--------练习
<body>
    <!-- 直接输入div 回车/tab键 -->
    <div></div>

    <!-- 生成多个相同标签 div*3 回车/tab -->
    <div></div>
    <div></div>
    <div></div>

    <!-- 父子级关系 使用> 回车/tab键 -->
    <!-- ul>li -->
    <ul>
        <li></li>
    </ul>
    <!-- div>span -->
    <div><span></span></div>

    <!-- 兄弟关系 使用+ 回车/tab键 -->
    <!-- div+p -->
    <div></div>
    <p></p>
    <!-- h1+p -->
    <h1></h1>
    <p></p>

    <!-- 生成带有类名或id名的 .demo 或 #two 回车/tab键 -->
    <!-- .size -->
    <div class="size"></div>
    <!-- p.color -->
    <p class="color"></p>
    <!-- #two -->
    <div id="two"></div>
    <!-- p#two -->
    <p id="two"></p>

    <!-- 生成div类名是有顺序的 使用自增符号$ 回车/tab键 -->
    <!-- div$*3 -->
    <div1></div1>
    <div2></div2>
    <div3></div3>
    <!-- ul>li$*3 -->
    <ul>
        <li1></li1>
        <li2></li2>
        <li3></li3>
    </ul>
    <!-- .demo$*3 -->
    <div class="demo1"></div>
    <div class="demo2"></div>
    <div class="demo3"></div>

    <!-- 在生成的标签内部写内容 使用{} 回车/tab键 -->
    <!-- div{我爱学习} -->
    <div>我爱学习</div>
    <!-- div{我爱美食}*3 -->
    <div>我爱美食</div>
    <div>我爱美食</div>
    <div>我爱美食</div>
    <!-- div{$}*3 -->
    <div>1</div>
    <div>2</div>
    <div>3</div>
</body>

2.快速生成CSS样式语法

 

3.快速格式化代码 

 

vscode新版本设置方法：

03-CSS的复合选择器

1.什么是复合选择器

2.后代选择器（重要） 

 

    <style>
        /* 想把ol里面的li选择出来改为pink色 */
        /* 后代选择器  元素2是元素1的后代 元素1和元素2之间用空格隔开 元素1是父级 元素2是子级 元素2可以是儿子 也可以是孙子 只要是元素1的后代即可 */
        ol li {
            color: pink;
        }

        ol li a {
            text-decoration: none;
            color: red;
        }

        .nav li a {
            color: yellow;
        }
    </style>
</head>

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

3.子选择器（重要）

 

<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 {
            color: green;
            text-decoration: none;
        }
    </style>
</head>

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

4.课堂练习 

<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 ul li a {
            color: red;
        }

        /* 将下面的大肘子文字修改为红色 */
        /* 使用子选择器 */
        .hot>a {
            color: red;
        }
    </style>
</head>

<body>
    <div class="nav">
        <ul>
            <li><a href="#">百度</a></li>
            <li><a href="#">百度</a></li>
        </ul>
    </div>

    <div class="hot">
        <a href="#">大肘子</a>
        <ul>
            <li><a href="#">猪头</a></li>
            <li><a href="#">猪尾巴</a></li>
        </ul>
    </div>
</body>

 5.并集选择器（重要）

<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>
        /* 要求1: 请把熊大和熊二改成粉色 */
        div,
        p {
            color: pink;
        }

        /* 要求2: 请把熊大和熊二改成粉色 还有 小猪一家改成粉色 */
        div,
        p,
        .pig li {
            color: pink;
        }
    </style>
</head>

<body>
    <div>熊大</div>
    <p>熊二</p>
    <span>光头强</span>
    <ul class="pig">
        <li>小猪佩奇</li>
        <li>猪爸爸</li>
        <li>猪妈妈</li>
    </ul>
</body>

 6.伪类选择器

 ​

      6.1链接伪类选择器  

     6.2 focus 伪类选择器 

<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>Document</title>
    <style>
        /* 把获得光标的input表单元素选取出来 */
        input:focus {
            background-color: pink;
            color: red;
        }
    </style>
</head>

<body>
    <input type="text">
    <input type="text">
    <input type="text">
</body>


 7.复合选择器总结 

 

 04-CSS的元素显示模式

    1.什么是元素显示模式

    2.块元素 

 宽度不设置 会默认继承父级的宽度 如：div块级元素 的 父级元素是 body 

                                                                 body的宽度是浏览器的宽度

3.行内元素 

4.行内块元素 

5.元素显示模式总结 

 6.元素显示模式转换

 

 

<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>Document</title>
    <style>
        a {
            width: 100px;
            height: 100px;
            background-color: pink;
            /* 把行内元素a 转换为 块级元素 */
            display: block;
        }

        div {
            width: 300px;
            height: 200px;
            background-color: green;
            /* 把块级元素div 转换为 行内元素 */
            display: inline;
        }

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

<body>
    <a href="#">我是行内元素</a>
    <a href="#">我是行内元素</a>
    <div>我是块级元素</div>
    <div>我是块级元素</div>
    <span>行内元素转换为行内块元素</span>
    <span>行内元素转换为行内块元素</span>
</body>

 7.一个小工具snipaste的使用

8.课堂案例-简洁版小米侧边栏

<!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>Document</title>
    <style>
        a {
            width: 230px;
            height: 40px;
            background-color: #3f3d3d;
            font-size: 14px;
            line-height: 40px;
            text-indent: 2em;
            color: white;
            text-decoration: none;
            display: block;
        }

        a:hover {
            background-color: #ff6700;
            width: 230px;
        }
    </style>
</head>

<body>
    <a href="#">
        手机 电话卡
    </a>
    <a href="#">
        电视 盒子
    </a>
    <a href="#">
        电视 盒子
    </a>
    <a href="#">
        出行 穿戴
    </a>
    <a href="#">
        智能 路由器
    </a>
    <a href="#">
        健康 儿童
    </a>
    <a href="#">
        耳机 音响
    </a>
</body>

</html>

 9.单行文字垂直居中的原理

05-CSS的背景 

   1.背景颜色 

    2.背景图片

<style>
        div {
            width: 300px;
            height: 300px;
            /* 图片铺满了整个盒子 */
            background-image: url(images/1.jpg);
        }
    </style>
</head>

<body>
    <div></div>
</body>

3.背景平铺 

<style>
        div {
            width: 1000px;
            height: 500px;
            background-color: black;
            /* 图片铺满了整个盒子 */
            background-image: url(images/2.jpg);

            /* 默认情况下图片是平埔的*/
            background-repeat: repeat;

            /* 图片不平铺 */
            background-repeat: no-repeat;

            /* 图片在x轴上平铺 */
            background-repeat: repeat-x;

            /* 图片在y轴上平铺 */
            background-repeat: repeat-y;

        }
    </style>

4.背景图片位置 

 

<style>
        div {
            width: 1000px;
            height: 1000px;
            background-image: url(images/2.jpg);
            background-color: black;
            background-repeat: no-repeat;
            /* 参数是方位名词 top center bottom left center right  两个值的与顺序无关*/
            /* top; 和 top center;是等价的 x轴的值默认居中 */
            background-position: top center;

        }
    </style>

 

图片方位参数 top center

 5.背景位置案例一

<!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>Document</title>
    <style>
        h3 {
            width: 118px;
            height: 40px;
            font: 400 14px/40px 'Microsoft YaHei';
            background-image: url(images/3.png);
            background-repeat: no-repeat;
            background-position: -30px 5px;
            text-indent: 2em;
        }
    </style>
</head>

<body>
    <h3>
        成长守护平台
    </h3>
</body>

</html>

 生成效果：

 6.背景位置案例二

<!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>Document</title>
    <style>
        body {
            background-image: url(images/4.png);
            background-repeat: no-repeat;
            background-position: center top;
        }
    </style>
</head>

<body>

</body>

</html>

生成效果：

 

7. 背景图像固定（背景附着）

8.背景属性复合写法 

    <style>
        body {
            /* background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景位置 */
            background: black url(images/4.png) no-repeat fixed top center;
        }
    </style>

 9.背景颜色半透明

<!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>Document</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            background: rgba(0, 0, 0, 0.3);
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

10.背景总结 

06-综合案例 

案例：五彩导航

<!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>Document</title>
    <style>
        .nav a {
            display: inline-block;
            text-decoration: none;
            font-size: 16px;
            color: white;
            background-color: pink;
            width: 120px;
            height: 58px;
            text-align: center;
            line-height: 58px;
        }

        .nav .orange {
            background-image: url(images/orange.png);
            background-repeat: no-repeat;
        }

        .nav .blue {
            background-image: url(images/blue.png);
            background-repeat: no-repeat;
        }

        .nav .purple {
            background-image: url(images/purple.png);
            background-repeat: no-repeat;
        }

        .nav .pink {
            background-image: url(images/pink.png);
            background-repeat: no-repeat;
        }

        .nav .orange:hover {
            background-image: url(images/red.png);

        }

        .nav .blue:hover {
            background-image: url(images/green.png);
        }

        .nav .purple:hover {
            background-image: url(images/grey.png);
        }

        .nav .pink:hover {
            background-image: url(images/yellow.png);
        }
    </style>
</head>

<body>
    <div class="nav">
        <a href="#" class="orange">五彩导航</a>
        <a href="#" class="blue">五彩导航</a>
        <a href="#" class="purple">五彩导航</a>
        <a href="#" class="pink">五彩导航</a>
    </div>
</body>

</html>

 效果图：

鼠标悬停变颜色

 

 

 

 

 

 

 

 

Obsession_k
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
笔记-day09-前端基础CSS第七天.pdf
10-11
笔记-day09-前端基础CSS第七天.pdf
笔记-day08-前端基础CSS第六天.pdf
10-11
笔记-day08-前端基础CSS第六天.pdf
前端笔记 | CSS进阶
Huffie博客
03-14 217
CSS中根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对基本选择器进行组合而成的。通过CSS背景属性可以为页面内元素添加背景样式背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。
day-04 CSS听课笔记
weixin_45422321的博客
04-22 380
1.快速生成HTML结构语法 1.生成标签 直接输入标签名 按tab键即可 比如 div 然后按tab键 就可以生成<~div> </~div> 2.如果想要生成多个相同标签 加上就可以了 比如 div3 就可以快速生成3个div 3.如果有父子级关系的标签，可以用> 比如ul >li 就可以了 <ul> <li></li> </ul> 4.如果有兄弟关系的标签，用+就可以了 比如 div+
CSS入门
LikY03321的博客
12-08 132
css是一种描述HTML文档样式的语言。css描述应该如何显示HTML元素。css指的是层叠样式表，也称级联样式表 。美化HTML元素，可以对网页进行布局节省了工作，外部样式表存储在css文件中css语法：css规则集由选择器和声明块组成:选择器指向你需要设置样式的html元素。声明块包含一条或多条用分号隔开的声明 {属性：值；属性：值} 选择器 1、元素选择器：也称标签选择器 2、id选择器 根据元素id选择 元素的id在页面是唯一的，不能已数字开头id选择器高于元素选择器的优先级 3
CSS基础——复合选择器
wujianrenn的博客
10-27 1044
复合选择器：后代选择器，子代选择器，并集选择器，伪类选择器，链接类伪类选择器，focus伪类选择器
css之后代选择器
异想实验室|Arduion|ESP8266|Micro Python|
02-28 459
/* 书写方式父标签，空格 子标签 */ /* 可以多级，父、子、孙 */
CSS基础课程笔记-day4
Obsession_k的博客
12-01 130
CSS基础课程笔记-day4
CSS基础课程笔记-day1
Obsession_k的博客
11-26 233
css基础笔记day1
CSS基础课程笔记-day3
Obsession_k的博客
11-29 178
css基础课堂笔记-day3
笔记-day07-前端基础CSS第五天.pdf
10-11
笔记-day07-前端基础CSS第五天.pdf
YK-Day04笔记.pdf
10-30
关于css基础知识的整理，以及对于基础知识的基础例子，常用选择器的使用技巧，以及在使用时候的注意事项
css笔记课程笔记2019，5，22
05-22
day02 昨天内容回顾 1、html的操作思想 ** 使用标签把要操作的数据包起来，通过修改标签的属性值来实现标签内数据样式的变化 *** <font size="5"></font> 2、图像标签 图片的路径"/> ** 通过html访问本地...
vue源码之mustache模板引擎1
最新发布
qweasl_的博客
05-21 170
模板引擎的一个有点：它是将数据转为视图的最优雅的方法。相信vue的玩家首先想到的是。而还没学vue的朋友，就只能进行dom操作了。通过数组的join方法。以及es6推出的模板字符串。
WEB转Flutter基础学习笔记（内含vue和flutter对比）
小易不止于搬砖的博客
05-17 686
笔者是一名web前端，记录在转栈flutter时的学习笔记，内涵和vue的对比，能够辅助前端同学更容易理解flutter
vue3.0+antdv的admin管理系统vue-admin-beautiful推荐
独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)
05-15 1139
几年前，笔者自学了vue这一优秀的前端框架，但苦于没项目练手，无意间发现了这一优秀的前端集成框架。当时就使用它做了一很有意思的小项目---终端监控云平台，实现了前端和后台的整体功能。整体方案介绍参见博文《》，前端使用vue-admin-beautiful框架，后端使用go-zero微服务框架，几天内就搞出来了一个包含前端和后台的小项目。我的monitor-ui前端运行界面：后续有机会介绍下我这个终端监控云平台小项目的具体实现，挺有意思的。几年前还用到过几个地方的公交客户现场，客户挺喜欢这个功能的。
综合性练习-验证码
cj13106811623的博客
05-15 834
生成验证码param(参数): 无Return: 图片的内容校验验证码用户输入的验证码5. 代码编写生成验证码://图型验证码写出,可以写出到文件,也可以写出到流try {//返回到浏览器修改前端代码相对应的接口验证成功。
【VueRouter 的基本使用】
2302_76611599的博客
05-17 176
完成Vue Router 安装后，就可以使用路由了，路由的基本使用步骤，首先定义路由组件，以便使用Vue Router控制路由组件展示与 切换，接着定义路由链接和路由视图，以便告知路由组件渲染到哪个位置，然后再项目中创建路由模块，最后导入并挂载路由模块。为了在页面中将路由对应的组件显示出来，还要在App组件中定义路由视图。路由视图标签定义，该标签会被渲染成当前路由对应组件，另外，为了方便在不同组件之间切换，可以通过标签定义路由链接，该标签的to属性表示链接地址，与路由匹配规则中的path属性对应。
css --w --h
07-27
CSS中的`--w`和`--h`不是真正的CSS属性，而是自定义属性（custom properties）或者叫做CSS变量（CSS variables）。它们是用来存储和重用值的。 在CSS中，我们可以使用`--`前缀来定义自定义属性。例如，你可以这样...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值