032 - 朋友，你会Ollie吗？,Web开发,技术交流,鱼C论坛

不二如是 发表于 2019-9-5 07:55:49

032 - 朋友，你会Ollie吗？

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

上一集： 031 - 男人的加油站女人的美容院

http://xxx.fishc.com/forum/201803/20/094616suu10rovsa60kazi.jpg

万众瞩目的零基础入门学习Web开发（H5&C3）开始更新了！！！{:10_298:}

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

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

作为，吹水阁中最爱吹水（爱干无意义事情）的鱼油，整套教程的亮点（槽点）由我来承包～

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

哈哈，废话不多说了，#敲黑板时刻！{:10_281:}

在线视频：传送门

课程思维导图

猛戳http://xxx.fishc.com/forum/201803/31/110408mxpszds1j1xxxahm.gif超清

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

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

基础代码：

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

**** Hidden Message *****
注意观察，默认浏览器自带一些边距样式。

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

通用选择器

*{CSS规则}

意思：针对当前页面所用的标签应用同样的样式（对标签的初始化）

如：

*{margin:0;padding:0;border:0;}
建议对标签初始化时采用下面的方法：

body,p,ul,li,p,ol,h1,h2,h3,h4,h5,h6,img{margin:0;padding:0;border:0;}
常用来清楚浏览器添加的一些默认 margin 和 padding 大小，类似于初始化操作。

添加通配样式：

<style type="text/css">
   /*通配符选择器*/
   * {
         margin: 0;
         padding: 0;
         border: 0;
   }
</style>

元素选择器

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

添加 p 元素样式：

<style type="text/css">
   /*通配符选择器*/
   * {
         margin: 0;
         padding: 0;
         border: 0;
   }

   /*元素选择器*/
   p {
         font-size: 22px;
         color: green;
   }
</style>

类选择器

用 . 开头，后跟类值。

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

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

<style type="text/css">
   /*通配符选择器*/
   * {
         margin: 0;
         padding: 0;
         border: 0;
   }

   /*元素选择器*/
   p {
         font-size: 22px;
         color: green;
   }

   /*类选择器*/
   .testClass {
         font-size: 40px;
         color: orange
   }
</style>

ID选择器

以 # 开头，后跟 id 值。

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

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

<style type="text/css">
   /*通配符选择器*/
   * {
         margin: 0;
         padding: 0;
         border: 0;
   }

   /*元素选择器*/
   p {
         font-size: 22px;
         color: green;
   }

   /*类选择器*/
   .testClass {
         font-size: 40px;
         color: orange
   }
</style>

课后作业，完成了吗？

传送门

http://xxx.fishc.com/forum/201803/20/101934b3igkgm9hgbgz0ck.gif

下一集：033 - 还能这么玩

如果有收获，别忘了评分{:10_281:} ：

http://xxx.fishc.com/forum/201709/19/094516hku92k2g4kefz8ms.gif

这位鱼油，如果喜欢本系列学习笔记，请订阅专辑☞（传送门）（不喜欢更要订阅{:10_297:} ）

http://xxx.fishc.com/forum/201803/21/151715umqz1qoywp11wjbq.gif

Qmh 发表于 2019-9-13 19:30:04

{:10_257:}

284115671 发表于 2019-9-14 21:33:00

学习来啦

落墨Zero 发表于 2019-10-30 10:47:35

请问视频代码在哪里可以下载啊

LeoDong-77 发表于 2019-11-11 21:47:31

步

大风包子 发表于 2019-11-15 19:25:21

kangkang

weiter 发表于 2020-2-8 16:34:06

谢谢大佬

竟然如此 发表于 2020-3-11 10:11:52

怎么还不更新

MYlindaxia 发表于 2020-3-11 11:39:00

小姐姐加油！

lby2010 发表于 2020-3-30 20:10:22

又来学习了，我们一起加油！

Fire4EVER 发表于 2020-6-21 11:29:38

昵称_cwb 发表于 2020-8-27 09:59:54

443316732 发表于 2020-8-27 20:42:17

最后一个代码和倒数第二个一模一样欸是不是打错了id应该是#开头吧{:10_269:}

拾八拾玖 发表于 2020-9-27 19:20:09

来了

临夏发表于 2020-9-29 07:40:27

wwwwwwwwwwwwwwwww

pym131420 发表于 2020-11-9 14:21:34

123

ingram123 发表于 2020-12-16 21:40:27

王罗罗 发表于 2020-12-30 15:05:37

这系列教程好久没更新了

natapon 发表于 2021-1-12 22:23:52

回复快快快

笙歌醉梦 发表于 2021-1-20 01:44:15

{:5_102:}

页: [1] 2

鱼C论坛's Archiver

032 - 朋友，你会Ollie吗？