CSS入门第二周（01—10）

最新推荐文章于 2024-07-18 20:18:47 发布
最新推荐文章于 2024-07-18 20:18:47 发布
阅读量370 收藏 16
点赞数 12
分类专栏： 语法规定与一些知识 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_80193863/article/details/136607689
版权

 目录导读

e002ec29afda4386812c37cc7a8fd0ae.jpg

6ef70482d17b413a96d7a875b59c3933.jpg 01—02：CSS简介

673ec79619e8415a8ad553c1bce52979.png

83a78d7abc4649889ff6a4996853a364.png 

8cbc8cf2f8524a42a6b6ea2f4603a81e.png 

5df6895976dc40c2accd467bf0e5396a.png 

 03：CSS语法规范

4a2bee62ebb94061ba0373d2cd3ef83a.png

 

 04：CSS代码风格

9a397998b860405ab9f4b0b93277dc6e.png

d949258b1f634971847bdb4aebd8eed1.png 

fb1feae2bbe64ec69818e523309dce9a.png 

422d3cea2ef54e02a29bdcb9ab9cfb71.png 

 05: CSS选择器的作用

（先论述基础选择器，后面论述复合选择器）

f939e29e10dd422193f009d6caf3ddb6.png

a1b269adaac0442ab7309f5b824c7642.png 

5a8eb36b3b8b414db91f02f1b22a2e1e.png 

13f87e8c105542b4bfc539e73b7d03f2.png标签选择器 ec6aef7dba6f47ae8b4378dcd014a3f9.png

 72ae654d01d54145861588e8b9ffbc41.png

31327fbeb80c4035bcb92fc58c8440df.png 类选择器

faf6888af79f4bc4acb1b4b1db1d89c6.png

45616ecbec974c6f9a9e4e1da54eee6a.png 

e50829478c274d629aedee349c9401ec.png 

066b08da1e1f420892bbeefe36380b33.png 

8751edc6b6ee44949053cfd2f5045201.png 

4fe6d4b606354ce3b308ef540c48f2dd.png

3e810ee604ea43e99183844d3f0cb4f7.png 

08461fb0e56c49fb81b6f9df6a14da72.png 

76ec6aef64624c8eb218d370852616a9.png 

f54968e73d72425b9176d2e3ba6fde6e.png 

 08：使用类选择器画盒子

div为一个盒子

ca114641d66f43059007a3b6d66dd20a.png

 6d61bbe1c0294a5aa3313f582dfa6841.png

3e26e0d493974f6ca22a18ee62225eab.png 

122fb435d34c463e97c3daf69ba17871.png 

0efb9e579a10468dabfd9c79209c49c7.png 

9dbccdd446ea4199af3b04b07575ec9b.png 

 09：类选择器的特殊使用——多类名

用处：单独存放，方便改写

 

c390040b658b42399965434fb8ff1f09.png

eb07246572b4412fa6a460d1783970ea.png 

b02c56c504e947c69f7a43a3ce4bc086.png 

f5a808c9247b422b9b8b92ad2dd059e7.png 

3f91e267065d47a19f311520ca9338e2.png 

ddbe3b2581b941fd89bad6fdf4e216b5.png 

eea90a870b00434e9ba0a8320d7380e8.png 

ed363137b1894e3e9d85a27abf763682.png 

709cd946bad24f7f96f93e7ab1e5eadd.png 

 10：id选择器

ID为身份证号，只有唯一的，只可调用一次，用了别人就不可以再用

类选择器为姓名，姓名可以重复，可以多次调用

b370059e1f7a439588de911a145764f7.png

25687df897e94c8c81faf6b9d13706b7.png 

c01880b5676b4ed4804e9c4cf28d84d3.png 

baedb9b4f2424bc9b96209e64e384cd3.png 

d127c6a518c543beabf92a4b4fba2791.png 

b0c056ec54ab4013b4a4b21d766498f9.png 

36f2122ffec74d1ea585481a34cd7cb0.png 

74daecc817084af094c6d13ca8d7a6ba.png 

95c523e77cc24035a07f8e2310cd27de.png 

a347a09824f94d879cbb8e463404fbbd.png 

eb23e494575f4436af51795e52fd1241.png 

 我是小桃子，我爱这个世界。

 

 

是小桃子耶！
关注
  • 12
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
第八课 css入门-011
08-03
2. **内嵌式**：将CSS样式写在HTML文档的`<head>`标签内的`<style>`标签中。这种方式适用于样式较少的小型网页，便于集中管理。例如，`<style type="text/css">div{background:#06f;}</style>`。但是，如果样式繁多...
15个必须阅读的CSS入门文章
12-02
本文将根据标题和描述，深入解析15个对于CSS入门至关重要的文章主题，帮助你快速建立起CSS基础。 1. **CSS Reset**：每个浏览器对CSS的默认样式处理不同，CSS Reset的目的是消除这些差异，让你的设计在所有浏览器上...
非常漂亮的Div+CSS布局入门教程第1/5页
10-30
本篇“非常漂亮的Div+CSS布局入门教程”旨在引导初学者掌握这一核心技术。 首先，了解一些基本概念至关重要。HTML（HyperText Markup Language）是用于创建网页的标准标记语言，负责内容的结构化；CSS（Cascading ...
CSS入门 XHTML文档结构树
09-27
**CSS入门** CSS，即层叠样式表（Cascading Style Sheets），是用于定义网页内容在屏幕、打印等媒体上展现方式的一种样式语言。它与(X)HTML文档结构紧密关联，通过选择器（selector）来指定需要应用样式的元素，...
CSS入门讲解
10-11
WEB项目第二天，HTML和CSS入门讲解，内容还是比较详细的
Tailwind CSS：颠覆常规的实用主义设计利器
艾恩小灰灰的博客
07-18 306
Tailwind CSS 是一个实用类优先的 CSS 框架，它不提供预设的组件或设计系统，而是通过一系列小而功能明确的实用类，允许开发者快速构建自定义的设计。与 Bootstrap、Foundation 等传统框架相比，Tailwind 更强调灵活性和可定制性。Tailwind CSS 通过其独特的实用类优先方法，为前端开发带来了新的视角。它不仅简化了样式编写，还提高了开发效率和代码的可维护性。
CSS实现从上往下过渡效果
Rverdoser的博客
07-18 145
属性改变时（即鼠标悬停时），它会在0.5秒内完成平滑的从上往下移动50像素的变化。要在CSS中实现一个从上往下的过渡效果，你可以使用。类定义了一个方框，并指定了一个过渡效果，使得当。
CSS 技巧与案例详解：开篇介绍
粉丝们务必加入微信粉丝群
07-14 114
本系列文章分为多个部分，每个部分都详细解析了CSS的各种实用技巧和经典案例。CSS 单位速查表 & 自定义引用标记 & 重置所有样式：了解常见CSS单位，并学习如何创建自定义的引用标记和重置样式表。隐藏空元素 & 完美的嵌套边框圆角 & 排版比例基础知识：掌握隐藏元素的方法，实现嵌套圆角边框，以及排版比例的基本概念。自定义文本选择 & 流式排版：定制文本选择的样式，探索流式排版的奥秘。为什么line-height是无单位的 & 兄弟元素淡出效果 & 蚀刻文字效果。
Web前端-Web开发CSS基础6-弹性盒子
a15735748145a的博客
07-16 1280
10. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。11. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。12. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。
css-grid布局(栅格布局)
YogaMiller的博客
07-15 804
* 数字和命名搭配搭配也可, 1 / t 注意如果是一个位置的话可省略, 比如 1 / 2 2 / 3 这里的2 3就可以省略*//* [d]150px 100px;搞不懂为什么加个命名就变小了.... *//* 目前喜欢这种的方式, 比较直观 . 表示这个位置空着 */grid 一个比flex更强大的布局,适合做整体布局。/* g-r-start g-r-end 的简称 *//* 相同的名字 代表相同的区域 */fr 只能放在第二个参数。
HTML5+CSS3小实例：纯CSS实现奥运五环
艾恩小灰灰的博客
07-15 1883
实例：纯CSS实现奥运五环。技术栈：HTML+CSS。
前端学习（二）之HTML
最新发布
2302_79795489的博客
07-18 682
在<input type="text" name="username" value="西瓜大侠">中，2、单选和多选：radio和checkbox（对应value为选项的值，当选中时，这个值会被提交）3、按钮：button、submit和reset（对应value为按钮上的标签文本）4、隐藏字段：hidden（对应value为隐藏在表单中的用户不可见的数值）段落格式标签：加粗b，斜体i，下划线u，删除线s，换行br，水平分割线hr。1、name：给表单控件起的名字，服务器靠这个名字来识别和获取输入的数据。
CSS-0_3 CSS和单位
乡亲们啊的博客
07-15 864
直到iphone4诞生，彻底改变人们对“上网”这个行为的思维方式。原来我们可以在一个方砖大小的设备上访问页面，那我们将来是不是可以在一个几十上百寸的巨幕上访问页面？在一张A4纸大小的板子上访问页面？人们用千奇百怪的设备访问你的网页，这时候如果你依然墨守成规，那就只能在用户糟糕体验之后的唾弃声中抱着你的电脑屏幕退场。
CSS基础
lvshihao_的博客
07-15 669
项目上线时，我们会通过工具将【展开风格】的代码，变成【紧凑风格】，这样可以减小文。：选择器与声明块之间，属性名与属性值之间，均有一个空格，理论上能省略，但最好。外部样式的优势：样式可以复用、结构清晰、可触发浏览器的缓存机制，提高访问速。件体积，节约网络流量，同时也能让用户打开网页时速度更快。行内样式表，只能控制当前标签的样式，对其他标签无效。：最后一个声明后的分号理论上能省略，但最好还是写上。1. 内部样式、外部样式，这二者的优先级相同。添加样式，实现了：结构与样式的分离。的思想，不推荐大量使用，只。
CSS图像不透明度的艺术：探索透明度控制的无限可能
Lesleyhnj的博客
07-15 213
在网页设计中，图像的不透明度（Opacity）和透明度（Transparency）是两个关键的概念，它们不仅影响着页面的视觉效果，还能增强用户体验，创造丰富的交互效果。通过调整图像的不透明度，设计师可以实现元素间的层次感，营造柔和或梦幻的氛围，甚至在动画和过渡效果中发挥重要作用。本文将从不同角度深入探讨CSS中控制图像不透明度的技术，帮助你掌握这一技能，提升网站的美学品质。定义与作用： 属性允许我们改变HTML元素的不透明度，取值范围是0到1之间，其中0表示完全透明，1表示完全不透明。这个属性应用于整个元素
css 屏幕四周报警提示
AS_JOPO的专栏
07-16 269
屏幕四周出现律动的红色边框，产生报警提示的效果。
【css】image 使用 transform:scale 放大后显示不全的问题
qq_39559879的博客
07-14 336
为用户点击的坐标值优化体验。问题在于 origin 位于图片下方时，图片放大后出现滚动条，而滚动条的高度会忽略放大显示的图片的上半部分，导致用户滚动到图片上方时会发现图片显示不全。实现图片放大 1.2 倍显示的功能，在此基础上可以修改。值，这样多余的部分会被顶下来，然后在渲染完成后设置。解决：可以设置图片的。，让图片滚动到原先的。
CSS 中的 ::before 和 ::after 伪元素
m0_65029152的博客
07-11 1145
本文主要记录CSS中的 ::before 和 ::after 伪元素的相关内容和使用场景；
内容长度不同的div如何自动对齐展示
PanDa____的博客
07-15 275
css 实现 无固定高度且同级元素可对齐展示
CSS入门：CSE686互联网编程第10周讲座
在CSE686互联网编程课程的第10周讲座中，主题是“CSS入门”（Internet Programming Lecture3 - Introduction to Cascading Style Sheets），由 Edmund Yu 博士主讲。他是一位助理教学教授，邮箱为 esyu@syr.edu，...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值