天涯论坛

 找回密码
 立即注册
搜索
查看: 95|回复: 4

前端知识(二)CSS选取器(很重要)

[复制链接]

2996

主题

182

回帖

9920万

积分

论坛元老

Rank: 8Rank: 8

积分
99209276
发表于 2024-6-30 04:57:53 | 显示全部楼层 |阅读模式

各位大哥养成好习惯,点赞再看,关注不迷路,前后端知识这儿都有,由浅入深,咱们一块进步,你的支持便是我最大的动力。

第01周期.前端基本.CSS基本选取

CSS选取器(重点)

学习目的

理解能说出选取器的功效id选取器和类选取器的区别应用能够运用基本选取器给页面元素添加样式

1. CSS选取功效(重点)

如上图因此,要把里面的小黄人分为2组,最快的办法怎办?

非常多例如 一只眼睛的一组,剩下的一组

选取器的功效

​ 找到特定的HTML页面元素

一句话说出她们

CSS选取器干啥的? 选取标签用的, 把咱们想要的标签选取出来

必要记住的

css 便是 分两件事, 选对人, 做对事。

h3 { color: red; }

这段代码便是2件事, 把 h3选出来, 而后 把它变成为了 红色。 以后咱们都这么干。

选取器分为基本选取器和 复合选取器,咱们这儿先讲解一下 基本选取器。

2. CSS基本选取

2.1 标签选取

概念:

标签选取器(元素选取器)指的是用HTML标签名叫作做为选取器,按标签名叫作归类,为页面中某一类标签指定统一的CSS样式。语法:
标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

功效

标签选取能够把某一类标签所有选取出来 例如所有的div标签 和 所有的 span标签优点:

是能快速为页面中同类型的标签统同样式缺点:

不可设计差异化样式。总结 口诀:

标签选取器,

页面同选起。

直接写标签,

所有不放弃。思考: 倘若想要差异化选取区别的标签,怎么办呢? 便是说 我想单独选一个某几个标签呢?

2.2 类选取

选取运用“.”(英文点号)进行标识,后面紧跟类名.

语法:

类名选取
.类名 { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
标签
<p class=类名></p>

优点:

能够为元素对象定义单独或相同的样式。 能够选取一个多个标签重视

选取运用“.”(英文点号)进行标识,后面紧跟类名(自定义,咱们自己命名的)长名叫作或词组能够运用中横线来为选取器命名。不要纯数字、中文等命名, 尽可能运用英文字母来暗示

命名规范: 见附件(Web前端研发规范手册.doc)

命名是我们通俗约定的,然则规定必要用这些常用的命名。

记忆口诀

差异化选取

一个或多个

上面点定义

类名别写错

谁用谁调用

class来做。

嘿嘿,工作类最多。

案例:

用Css实现谷歌的logo

<head> <meta charset="utf-8"> <style> .blue { color: blue; font-size: 100px; } .red { color: red; font-size: 100px; } .orange { color: orange; font-size: 100px; } .green { color: green; font-




上一篇:一文诠释:CSS语法、注释、运用方式、选取器。
下一篇:CSS的选取器
回复

使用道具 举报

2

主题

834

回帖

-7

积分

限制会员

积分
-7
发表于 2024-8-31 16:19:02 | 显示全部楼层
“NB”(牛×的缩写,表示叹为观止)‌
回复

使用道具 举报

7

主题

654

回帖

198

积分

注册会员

Rank: 2

积分
198
发表于 2024-9-10 11:23:44 | 显示全部楼层
楼主节操掉了,还不快捡起来!
回复

使用道具 举报

3046

主题

3万

回帖

9606万

积分

论坛元老

Rank: 8Rank: 8

积分
96065856
发表于 2024-10-20 12:20:28 | 显示全部楼层
哈哈、笑死我了、太搞笑了吧等。
回复

使用道具 举报

3069

主题

3万

回帖

9915万

积分

论坛元老

Rank: 8Rank: 8

积分
99158935
发表于 2024-10-26 12:50:09 | 显示全部楼层
交流如星光璀璨,点亮思想夜空。
回复

使用道具 举报

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

本版积分规则

站点统计|Archiver|手机版|小黑屋|天涯论坛 ( 非经营性网站 )|网站地图

GMT+8, 2024-11-22 18:22 , Processed in 0.216414 second(s), 22 queries .

Powered by Discuz! X3.4

Copyright © 2001-2023, Tencent Cloud.