外链论坛

 找回密码
 立即注册
搜索
查看: 8|回复: 0

CSS常用选取器都在这儿了!!!!

[复制链接]

709

主题

0

回帖

9997万

积分

论坛元老

Rank: 8Rank: 8

积分
99978119
发表于 6 天前 | 显示全部楼层 |阅读模式

本节重点

1.什么是选取

每一条css样式声明由两部分构成,如下:

选取器{ 样式; }

在css中{}之前的部分便是"选取器","选取器"指明了{}中的”样式“的功效对象,便是说该”样式“功效与网页中的那些元素。

2.基本选取

标签选取

标签选取器顾名思义便是html代码中的标签。咱们之前学习的html、body、h系列的标签、p、div、img等等咱们能够运用标签选取器来设置对应的css样式属性。

能够选中页面中所有的元素,而不是某一个元素内容,因此选中的是页面中共有的属性

举个栗子:

为页面中所有的段落设置字号为12px,字体颜色为红色,字体粗细为更粗。

代码如下:

<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> <style type=text/css> p{ color:red; font-size:12px; font-weight:bold; } </style> </head> <body> <h3>抖音</h3> <p>年后,一股抖音风火热了社媒,抖音上的博主带火了小猪佩奇。她们的标志是"手带小猪佩奇手表,身披小猪佩奇纹身",于是就诞生了"小猪佩奇身上纹,掌声送给社会人"。</p> <img src="index01.jpeg" alt=""> <p>估计林俊杰自己都没想过,《醉赤壁》一句最不起眼的台词竟然成为了众多网友口中的一个梗,最优秀这个梗的完美结合。</p> <img src="index02.jpeg" alt=""> </body> </html>

ID选取

ID好比是每一个人的身份证号同样每一个人都有身份证,并且身份证号是不同样的。在网页中所有的标签都能够设置id,并且id不可重复。

语法:

#ID选取器名叫作{ css样式代码; }

重视

1、以#开头

2、其中ID选取器名叫作能够任意起名(最好不要起中文)

3、ID的名叫作必要独一

ID选取器选中的是页面中元素特有的属性。

例如对上节课代码中的林俊杰文本来设置字体颜色为绿色,并且字体体积为14px。并且设置《醉赤壁》文本的字体体积为14px。那样仅仅靠标签选取器是完成不了的,咱们能够这般做。

运用过程如下:

1、运用合适(<span></span>)的标签把要修饰的内容标记出来,如下:

<span>林俊杰</span> <span>《醉赤壁》</span>

2、运用id=id选取器名叫作每一个标签设置区别的id。如下

<p>估计<span id="span1">林俊杰</span>自己都没想过,<span id="span2">《醉赤壁》</span>一句最不起眼的台词竟然成为了众多网友口中的一个梗,最优秀的要属毛爷爷的表情包和这个梗的完美结合。</p>

有的童鞋可能有疑问了?难道我不可给林俊杰,《醉赤壁》添加完span标签之后,直接设置你需求的样式么?大众发掘,给文本所有设置为14px,并且设置了绿色,那样《醉赤壁》会变为绿色,这是不可满足需求的。因此咱们能够每一个span设置区别的id,来分别设置区别的样式

3、设置ID选取器css样式,如下:

#span1{ color:green; font-size:14px; } #span2{ font-size:14px; }

选取

类选择器跟id有点类似,任何的标签元素都能够添加类(class),然则区别的是类是能够重复,有“归类”的概念,并且同一个标签中能够携带多个类,用空格隔开。

例如狗、猫、刺猬属于动物类,黑白打印机和彩色打印机属于打印机类。一样状况下,例如网页中的某几个标签,像p、li、a标签同属于ac

回复

使用道具 举报

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

本版积分规则

Archiver|手机版|小黑屋|外链论坛 |网站地图

GMT+8, 2024-7-6 15:58 , Processed in 0.105017 second(s), 20 queries .

Powered by Discuz! X3.4

Copyright © 2001-2023, Tencent Cloud.