马上注册，结交更多好友，享用更多功能^_^
您需要 登录 才可以下载或查看，没有账号？立即注册
x
本帖最后由 不二如是 于 2019-10-13 08:42 编辑
万众瞩目的 零基础入门学习Web开发（H5&C3）开始更新了！！！ 
在Web新纪元 |【鱼C#视频课程】剧透这个系列的诞生，时间总是善待任何想拿它搞事情的存在体。
很幸运，一切就这样开始了，开局总会有些不足，但一切在慢慢变好，不是吗？
作为，吹水阁中最爱吹水（爱干无意义事情）的鱼油，整套教程的亮点（槽点）由我来承包～
关注本系列推送（最下方有订阅方式）的鱼油，会享受到一个福利：
会比正常推送，早一个时间节点，看到还未出炉的美味课程
哈哈，废话不多说了， #敲黑板时刻！ 
课程思维导图
选择器顾名思义，是选择页面中的某个或某些 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>
注意观察，默认浏览器自带一些边距样式。
我们稍后通过不同的选择器对其进行美化。
（PS：上面三句话出自吹水阁言 ）
通用选择器
*{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;}
添加通配样式：
<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>
课后作业，完成了吗？
传送门
如果有收获，别忘了评分 ：
这位鱼油，如果喜欢本系列学习笔记，请订阅 专辑☞（ 传送门）（ 不喜欢更要订阅 ）
| 
( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)
狗仔卡
发表于 2019-9-5 07:55:49
置顶卡
千斤顶
显身卡
发表于 2019-9-13 19:30:04
发表于 2019-10-30 10:47:35
