我是靠谱客的博主 香蕉牛排,最近开发中收集的这篇文章主要介绍2-基础选择器一、标记选择器二、类选择器三、id选择器四、通配符选择器,觉得挺不错的,现在分享给大家,希望可以做个参考。

概述

文章目录

  • 一、标记选择器
  • 二、类选择器
  • 三、id选择器
  • 四、通配符选择器

在这里插入图片描述

一、标记选择器

  • 标记选择器是指用HTML标记名称作为选择器,
  • 作用:根据指定的标签名称, 在当前界面中找到所有该名称的标签, 然后设置属性
  • 基本语法格式如下:
标记名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

例如: p{ font-size:12px; color:#666; font-family:“微软雅黑”;}
上述CSS样式代码用于设置HTML页面中所有的段落文本——字体大小为12像素、颜色为#666、字体为“微软雅黑”

二、类选择器

  • 类选择器使用“.”(英文点号)进行标识,后面紧跟类名
  • 作用: 根据指定的类名称找到对应的标签, 然后设置属性
  • 基本语法格式如下:
.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
  • 该语法中,类名即为HTML元素的class属性值,大多数HTML元素都可以定义class属性。类选择器最大的优势是可以为元素对象定义单独或相同的样式。

例如: .pcolor{color:#ff0000;font-size:14px;}
用于设置class=“pcolor”的标签元素的样式为-----字体颜色为红色,大小为14px

注意:

  • 每个HTML标签都有一个属性叫做class, 也就是说每个标签都可以设置类名
  • 在同一个界面中class的名称是可以重复的
  • 在编写class选择器时一定要在class名称前面加上点
  • 类名的命名规范和id名称的命名规范一样
  • 类名就是专门用来给CSS设置样式的
  • 在HTML中每个标签可以同时绑定多个类名

三、id选择器

  • id选择器使用“#”进行标识,后面紧跟id名
  • 作用:根据指定的id名称找到对应的标签, 然后设置属性
  • 基本语法格式如下:
#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

例如
#menubar{margin:0;background:#ccc;}
用于设置id=“menubar”的元素的样式为------------外边距为0,背景颜色为#ccc;

注意:

  • 每个HTML标签都有一个属性叫做id, 也就是说每个标签都可以设置id
  • 在同一个界面中id的名称是不可以重复的
  • 在编写id选择器时一定要在id名称前面加上#
  • id的名称是有一定的规范的, id的名称只能由字母/数字/下划线(a-z 0-9 _)
  • id名称不能以数字开头 id名称不能是HTML标签的名称()不能是a h1 img input …)
  • 在企业开发中一般情况下如果仅仅是为了设置样式, 我们不会使用id ,因为在前端开发中id一般留给js使用的

四、通配符选择器

  • 通配符选择器用“*”号表示,它是所有选择器中作用范围最广的,能匹配页面中所有的元素。
  • 作用:为整个页面设置样式
  • 基本语法格式如下:
*{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
  • 该语法中*可以匹配页面中所有的元素。
例如:
* {
	margin: 0;                    /* 定义外边距*/
	padding: 0;                  /* 定义内边距*/
}
使用通配符选择器定义CSS样式,清除所有HTML标记的默认边距。

最后

以上就是香蕉牛排为你收集整理的2-基础选择器一、标记选择器二、类选择器三、id选择器四、通配符选择器的全部内容,希望文章能够帮你解决2-基础选择器一、标记选择器二、类选择器三、id选择器四、通配符选择器所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(34)

评论列表共有 0 条评论

立即
投稿
返回
顶部