鱼C论坛

 找回密码
 立即注册
查看: 7704|回复: 30

[学习笔记] 032 - 朋友,你会Ollie吗?

[复制链接]
发表于 2019-9-5 07:55:49 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能^_^

您需要 登录 才可以下载或查看,没有账号?立即注册

x
本帖最后由 不二如是 于 2019-10-13 08:42 编辑







                               
登录/注册后可看大图


万众瞩目的零基础入门学习Web开发(H5&C3)开始更新了!!!


Web新纪元 |【鱼C#视频课程】剧透这个系列的诞生,时间总是善待任何想拿它搞事情的存在体

很幸运,一切就这样开始了,开局总会有些不足,但一切在慢慢变好,不是吗?

作为,吹水阁中最爱吹水(爱干无意义事情)的鱼油,整套教程的亮点(槽点)由我来承包~

关注本系列推送(最下方有订阅方式)的鱼油,会享受到一个福利
会比正常推送,早一个时间节点,看到还未出炉的美味课程


哈哈,废话不多说了,#敲黑板时刻!





在线视频:传送门





课程思维导图

Snip20190905_84.png

猛戳

                               
登录/注册后可看大图
超清





选择器顾名思义,是选择页面中的某个或某些 html 元素,锁定后开始进行某些样式设置。

本节课学习 CSS 选择器中最基本的几个选择器。

基础代码:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta name="keywords" content="鱼C工作室|免费编程视频教学|Python教学|Web开发教学|全栈开发教学|C语言教学|汇编教学|Win32开发|加密与解密|Linux教学">
  7.     <meta name="description" content="鱼C工作室为大家提供最有趣的编程视频教学。">
  8.     <meta name="author" content="鱼C工作室">
  9.     <title>鱼C笔记</title>
  10. </head>
  11. <body>
  12. <p>1、任何在我出生时已经有的科技都是稀松平常的世界本来秩序的一部分?</p>
  13. <p id="test">2、任何在我15-35岁之间诞生的科技都是将会改变世界的革命性产物?</p>
  14. <p class="testClass">3、任何在我35岁之后诞生的科技都是违反自然规律要遭天谴的?</p>
  15. </body>
复制代码

游客,如果您要查看本帖隐藏内容请回复

注意观察,默认浏览器自带一些边距样式。

我们稍后通过不同的选择器对其进行美化。
(PS:上面三句话出自吹水阁言


通用选择器

*{CSS规则}

意思:针对当前页面所用的标签应用同样的样式(对标签的初始化)

如:

  1. *{margin:0;padding:0;border:0;}
复制代码

建议对标签初始化时采用下面的方法:

  1. body,p,ul,li,p,ol,h1,h2,h3,h4,h5,h6,img{margin:0;padding:0;border:0;}
复制代码

常用来清楚浏览器添加的一些默认 margin 和 padding 大小,类似于初始化操作。

添加通配样式:

  1. <style type="text/css">
  2.         /*通配符选择器*/
  3.         * {
  4.             margin: 0;
  5.             padding: 0;
  6.             border: 0;
  7.         }
  8.     </style>
复制代码

Snip20190905_93.png



元素选择器

直接设置指定元素的样式,不具体说明,代表页面中所有该元素。

添加 p 元素样式:

  1. <style type="text/css">
  2.         /*通配符选择器*/
  3.         * {
  4.             margin: 0;
  5.             padding: 0;
  6.             border: 0;
  7.         }

  8.         /*元素选择器*/
  9.         p {
  10.             font-size: 22px;
  11.             color: green;
  12.         }
  13. </style>
复制代码

Snip20190905_86.png



类选择器

用 . 开头,后跟类值。

类名书写规范,以小写字母开始。

为类值是 testClass 的 p 元素添加样式:

  1. <style type="text/css">
  2.         /*通配符选择器*/
  3.         * {
  4.             margin: 0;
  5.             padding: 0;
  6.             border: 0;
  7.         }

  8.         /*元素选择器*/
  9.         p {
  10.             font-size: 22px;
  11.             color: green;
  12.         }

  13.         /*类选择器*/
  14.         .testClass {
  15.             font-size: 40px;
  16.             color: orange
  17.         }
  18.     </style>
复制代码

Snip20190905_90.png


ID选择器

以 # 开头,后跟 id 值。

建议全小写,以字母开头。

为 id 值是 test 的 p 元素添加样式:

  1. <style type="text/css">
  2.         /*通配符选择器*/
  3.         * {
  4.             margin: 0;
  5.             padding: 0;
  6.             border: 0;
  7.         }

  8.         /*元素选择器*/
  9.         p {
  10.             font-size: 22px;
  11.             color: green;
  12.         }

  13.         /*类选择器*/
  14.         .testClass {
  15.             font-size: 40px;
  16.             color: orange
  17.         }
  18.     </style>
复制代码

Snip20190905_88.png





课后作业,完成了吗?


传送门






                               
登录/注册后可看大图







如果有收获,别忘了评分


                               
登录/注册后可看大图


这位鱼油,如果喜欢本系列学习笔记,请订阅 专辑&#9758;传送门)(不喜欢更要订阅



                               
登录/注册后可看大图




评分

参与人数 1荣誉 +5 鱼币 +5 贡献 +3 收起 理由
443316732 + 5 + 5 + 3

查看全部评分

本帖被以下淘专辑推荐:

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2019-9-13 19:30:04 | 显示全部楼层
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2019-9-14 21:33:00 | 显示全部楼层
学习来啦
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2019-10-30 10:47:35 | 显示全部楼层
请问视频代码在哪里可以下载啊
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2019-11-11 21:47:31 | 显示全部楼层
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2019-11-15 19:25:21 | 显示全部楼层
kangkang
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-2-8 16:34:06 | 显示全部楼层
谢谢大佬
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-3-11 10:11:52 | 显示全部楼层
怎么还不更新
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-3-11 11:39:00 | 显示全部楼层
小姐姐加油!
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-3-30 20:10:22 | 显示全部楼层
又来学习了,我们一起加油!
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-6-21 11:29:38 | 显示全部楼层
1
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2020-8-27 09:59:54 | 显示全部楼层
1
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2020-8-27 20:42:17 | 显示全部楼层
最后一个代码和倒数第二个一模一样欸是不是打错了id应该是#开头吧
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 1 反对 0

使用道具 举报

发表于 2020-9-27 19:20:09 | 显示全部楼层
来了
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2020-9-29 07:40:27 | 显示全部楼层
wwwwwwwwwwwwwwwww
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-11-9 14:21:34 | 显示全部楼层
123
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2020-12-16 21:40:27 | 显示全部楼层
1
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2020-12-30 15:05:37 | 显示全部楼层
这系列教程好久没更新了
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2021-1-12 22:23:52 | 显示全部楼层
回复快快快
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2021-1-20 01:44:15 | 显示全部楼层
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-3-29 01:14

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表