前端知识（二）CSS选取器(很重要)-外链论坛

wloe2gf 发表于 2024-6-30 04:57:53

前端知识（二）CSS选取器(很要紧)

各位大哥养成好习惯，点赞再看，关注不迷路，前后端知识这儿都有，由浅入深，咱们一块进步，你的支持便是我最大的动力。第01周期.前端基本.CSS基本选取器CSS选取器（重点）
学习目的：理解能说出选取器的功效id选取器和类选取器的区别应用能够运用基本选取器给页面元素添加样式1. CSS选取器功效（重点）
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic2.zhimg.com/80/v2-812015ac758429c8b83472a529e99d5d_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
如上图因此，要把里面的小黄人分为2组，最快的办法怎办？
非常多， 例如 一只眼睛的一组，剩下的一组
选取器的功效
 找到特定的HTML页面元素
一句话说出她们：
CSS选取器干啥的？ 选取标签用的，把咱们想要的标签选取出来 必要记住的css 便是 分两件事，选对人，做对事。
<div style="color: black; text-align: left; margin-bottom: 10px;">h3 { color: red; }</div>
这段代码便是2件事，把 h3选出来， 而后 把它变成为了 红色。以后咱们都这么干。
选取器分为基本选取器和复合选取器，咱们这儿先讲解一下 基本选取器。
2. CSS基本选取器
2.1 标签选取器
概念：标签选取器（元素选取器）指的是用HTML标签名叫作做为选取器，按标签名叫作归类，为页面中某一类标签指定统一的CSS样式。语法：<div style="color: black; text-align: left; margin-bottom: 10px;">标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }</div>
功效：
标签选取器 能够把某一类标签所有选取出来 例如所有的div标签和所有的 span标签优点：
是能快速为页面中同类型的标签统同样式缺点：不可设计差异化样式。总结口诀：标签选取器，
页面同选起。
直接写标签，所有不放弃。思考： 倘若想要差异化选取区别的标签，怎么办呢？ 便是说我想单独选一个或某几个标签呢？2.2 类选取器
类选取器运用“.”（英文点号）进行标识，后面紧跟类名.
语法：类名选取器<div style="color: black; text-align: left; margin-bottom: 10px;">.类名 { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
</div>标签<div style="color: black; text-align: left; margin-bottom: 10px;"></div>
优点：
能够为元素对象定义单独或相同的样式。 能够选取一个或多个标签重视类选取器运用“.”（英文点号）进行标识，后面紧跟类名(自定义，咱们自己命名的)长名叫作或词组能够运用中横线来为选取器命名。不要纯数字、中文等命名， 尽可能运用英文字母来暗示。命名规范：见附件（Web前端研发规范手册.doc）
命名是我们通俗约定的，然则无规定必要用这些常用的命名。
记忆口诀
差异化选取
一个或多个
上面点定义
类名别写错
谁用谁调用
class来做。嘿嘿，工作类最多。案例：
用Css实现谷歌的logo

<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic4.zhimg.com/80/v2-cfb8ef9e7778e78f592c1097469893ab_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<div style="color: black; text-align: left; margin-bottom: 10px;"><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-
</div>

飘雨的姑娘 发表于 2024-8-31 16:19:02

“NB”（牛×的缩写，表示叹为观止）‌

dhfgh 发表于 2024-9-10 11:23:44

楼主节操掉了，还不快捡起来！

b1gc8v 发表于 2024-10-20 12:20:28

哈哈、笑死我了、太搞笑了吧等。

nykek5i 发表于 2024-10-26 12:50:09

交流如星光璀璨，点亮思想夜空。

wrjc1hod 发表于 6 天前

软文发布平台 http://www.fok120.com/

页: [1]

外链论坛's Archiver

前端知识（二）CSS选取器(很要紧)