前端学习CSS二

最新推荐文章于 2024-07-20 18:16:53 发布
最新推荐文章于 2024-07-20 18:16:53 发布
阅读量276 收藏
点赞数
分类专栏： 前端学习 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Auroriiina/article/details/123330101
版权

前端CSS学习二

目标

在这里插入图片描述

Emment语法

在这里插入图片描述
快速生成CSS语法

复合选择器

在这里插入图片描述

后代选择器

在这里插入图片描述

子选择器

在这里插入图片描述

并集选择器

在这里插入图片描述

伪类选择器

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

CSS的元素显示模式

在这里插入图片描述
网页的标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的网页
元素显示模式就是元素标签以书面方式进行显示，比如div自己占一行，比如一行可以放多个span
HTML元素一般分为块元素和行内元素两种类型

块元素在这里插入图片描述

在这里插入图片描述

行内元素

在这里插入图片描述
在这里插入图片描述

行内块元素

在这里插入图片描述

元素显示模式转换

在这里插入图片描述
在这里插入图片描述

课堂案例

单行文字垂直居中

在这里插入图片描述
height=line-height

CSS的背景

background
背景颜色
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
参数是精确单位
如果参数值是精确单位，第一个数值就是x,第二个就是y
20px,50px

参数是混合单位
如果指定的两个值是精确单位和方位名词混合使用，则第一个值是X坐标，第二个值是y坐标

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

是桔子很甜
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端学习(二) CSS
qq_48455306的博客
08-15 94
CSS 选择器 选择器名称 选择的内容 示例 元素选择器(也称作标签或类型选择器) 所有指定该类型的HTML元素 <p>选择<p> ID选择器 具有特定ID的元素（单一HTML页面中，每个ID只对应一个元素，一个元素只对应一个ID） ＃my-id选择<p id="my-id>">或<a id="my-id"> 类选择器 具有特定类的元素（单一页面中，一个类可以有多个实例） .myclass选择<p class="my-cla
前端学习—CSS
jinmengyao的博客
03-16 369
一、初识CSS 1、CSS：全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。 2、CSS的好处：是通过定义某个样式，可以让不同网页位置的文字有着统一的字体、字号或者颜色等。 3、CSS的样式：由选择符和声明组成，而声明又由属性和值组成，如下图所示： （1）选择符：又称选择器，指明网页中要应用样...
前端学习之CSS
weixin_44362089的博客
10-20 2737
前段端学习之CSS,层叠样式表，HTML，三种方式
前端基础学习——你必须掌握的CSS的知识
weixin_53919192的博客
07-05 834
本文带大家理解掌握CSS的知识，希望对你有帮助~~
前端学习-css
qq_44695436的博客
02-24 345
前端css学习入门资源
02-24
本资源包包含了一系列HTML教程，旨在帮助初学者系统地学习CSS的基础知识。 首先，"入门.html" 文件应该介绍了CSS的基本概念，包括其作用、如何引入到HTML文档中，以及CSS与HTML的区别。初学者会了解到CSS通过控制...
前端学习 html css js 算法.zip
01-05
前端学习 html css js 算法前端学习 html css js 算法前端学习 html css js 算法 前端学习 html css js 算法前端学习 html css js 算法前端学习 html css js 算法 前端学习 html css js 算法前端学习 html css js ...
Web前端学习之CSS课件
01-21
CSS相关技术文档-例如CSS基础：类选择器。就是建立一个类，并为这个类定义一些样式，在需要应用的标签内以class=“类名”的形式套用，例如： .student{color:#00f;} “student”>张三 类名的前边一定要加上一个...
html+css前端学习笔记.zip
01-01
html+css前端学习笔记html+css前端学习笔记html+css前端学习笔记 html+css前端学习笔记html+css前端学习笔记html+css前端学习笔记 html+css前端学习笔记html+css前端学习笔记html+css前端学习笔记 html+css前端学习...
前端学习代码之-css3
04-12
本资源包“前端学习代码之-css3”旨在帮助初学者和进阶者通过实践来掌握CSS3的各种特性。 一、选择器的扩展 CSS3引入了许多新的选择器，如类选择器（.class）、ID选择器（#id）、伪类（:hover, :active, :focus）...
前端面试题日常练-day97 【Less】
最新发布
qq_44640575的博客
07-20 339
border-radius()函数用于在Less中生成圆形边框效果。通过设置border-radius()函数，我们可以为元素的边框添加圆角效果，使边框呈现圆形的外观，从而美化页面元素的边框样式。
TinyVue v3.17.0 正式发布，推出了一款基于 Quill 2.0 的富文本编辑器，功能强大、开箱即用！
OpenTiny的博客
07-17 1119
本文由体验技术团队Kagol老师原创~我们非常高兴地宣布，2024年6月26日，TinyVue 发布了 v3.17.0 🎉。TinyVue 每次大版本发布，都会给大家带来一些实用的新特性，上一个版本我们重构了 chart-core，新增 CircleProcessChart 圆环进度图等6个新的图表组件，并增加了 Statistic 数据统计组件。表格图片超链接复制粘贴插入表情文件上传@提醒斜杆菜单v-auto-tip。
谷粒商城实战笔记-39-前端基础-Vue-指令-v-on、v-for、v-if
epitomizelu的专栏
07-20 582
v-on 是 Vue.js 中的一个指令，用于在 DOM 元素上监听用户事件，并在事件触发时执行相应的 JavaScript 函数。它提供了一种将 Vue 实例中的方法与 DOM 事件关联起来的方式，使得你可以轻松地对用户交互做出响应。v-on 指令的基本语法是在元素上添加 v-on:event-name=“method”，其中 event-name 是你要监听的 DOM 事件类型（如 click、mouseover、keydown 等），method 则是 Vue 实例中定义的方法名。
LG 选择 Flutter 来增强其智能电视操作系统 webOS
恋猫de小郭的博客
07-17 1582
总的来说，LG 是 Flutter 在 TV 领域的一次新的尝试，并且它是在脱离了 Android 平台的场景下实现的支持，虽然 webOS 并不是什么流行的系统，但是这也体现出了 Flutter 的特点：可以用较低的成本实现较好性能的跨平台。后续，在 LG 的主导下，WebOS 经过进一步修改，转变为智能电视操作系统，于是 WebOS TV 就诞生了，此后 LG 的 TV 基本路线定为 webOS ，在应用层面，WebOS TV 以基于 Web 的技术为基础。然后 LG 为什么选择 webOS？
博客前端项目学习day03——框架页
qq_53237241的博客
07-19 391
【代码】博客前端项目学习day03——框架页。
前端性能优化--懒加载
weixin_43799793的博客
07-19 149
3、同时还可结合 lazy loading 属性，利用浏览器的原生属性，进一步优化图片加载，不过其延迟加载机制完全是由浏览器自身决定的，在不同浏览器上效果不同(BTW，部分浏览器可能并不支持)。2、然后对元素进行监听，当图片进入可视区域时，提取元素的 data-src 即真实的图片地址赋值给 src 属性，就会去发送请求加载图片，实现了懒加载。设置为 1 张 1px*1px 的透明图片用作占位符，以防止出现出错图标。TinyPNG 网站: https://tinypng.com/
vue3前端开发-如何让自己的网站适合SEO排名规则
yrldjsbk的博客
07-17 212
我们大家都知道，原始出生的vue3项目，原始代码层面，是没有meta标签的，也就是说，不适合SEO排名规则。SEO排名规则，蜘蛛爬虫抓取网站页面的内容，就会把这种meta标签内容进行采集，匹配。但是，这个技术要求大家还是应该知道的。黑马教育，课程，前端课程案例项目：小兔鲜儿超市，vue3前端项目案例。想学习vue3前端开发，拿来练习，实战的朋友们，值得一看哦。这个代码，就是我自己手工录入的。录入后，再次在浏览器界面刷新请求服务器。返回的代码模块就可以看见了。自己刚刚手工录入的meta信息出现了。
谷粒商城实战笔记-35-前端基础-ES6-模块化
epitomizelu的专栏
07-20 408
模块化就是把代码进行拆分，方便重复利用。类似 java 中的导包：要使用一个包，必须先导包。JS 中没有包的概念，JS中类似的概念是模块。export和import。export命令用于规定模块的对外接口。import命令用于导入其他模块提供的功能。
Web Pages 表单
07-20 252
Web pages 表单是现代网页设计中不可或缺的组成部分，它们允许用户与网站进行交互，提交信息，如注册、登录、反馈、预订等。表单的设计和功能对用户体验和网站的业务目标有着直接的影响。本文将深入探讨Web pages表单的各个方面，包括设计原则、常用元素、验证机制和最佳实践。
前端开发学习笔记：CSS基础入门
"《页面制作》笔记（5.CSS-1）是网易微专业《前端开发工程师》课程的学习笔记，由西风潇潇编写的，主要介绍了CSS的基本概念、历史以及如何在HTML中引用CSS样式。笔记中提到了CSS用于定义HTML内容的显示样式，包括...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值