基础选择器(自学笔记)

css样式规则

规则格式如下:

选择器(h1){属性(color):属性值(red);属性(font-size):属性值(25px);}

  • 选择器用于指定css样式作用的html对象,花括号内是对该对象设置的具体样式
  • 属性和属性值以“键值对”1一个具有注脚的文本。
  • 属性是对指定对象设置的样式属性,如文本的颜色,字体的大小等
  • 属性和属性值之间用英文“:”连接
  • 多个“键值对”之间用英文“;”进行区分

css基础选择器

标签选择器(元素选择器)

标签选择器是指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定css样式,其语法格式如下:

标签名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}或
元素名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}

标签选择器的优缺点:
优点是能为页面中的同类型标签指定统一的样式,同样这也是它的缺点,不能进行差异化样式

类选择器

类选择器使用"."(英文点号)进行标识,后面紧跟类名,其语法格式如下:

.类名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}
标签调用的时候用class=“类名” 调用即可

如:

<head>
	<style>
		.red {
		color="red"
		}
	</style>
</head>
<!--此处调用-->
<p class="red">
文本内容
</p>

多类名选择器

可以给标签指定多个类名,从而达到更多选择目的

样式显示效果跟HTML元素中调用的类名先后顺序无关,受css样式书写的上下关系有关;
各个类名间用空格隔开;
css样式的书写顺序很重要;

id选择器

id选择器使用"#"号进行标识,后面紧跟id名,其语法格式如下:

#id名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}
相对应的调用就是id=“之前取的id名”

<head>
	<style>
		#yellow {
		color="red"
		}
	</style>
</head>
<!--此处调用-->
<p id="yellow">
文本内容
</p>

id和类选择器他们的区别就在于:id选择器只能调用一次,而类选择器则能多次调用;id选择器的优先级也比较高

通配符选择器

语法格式如下:

*{属性1:属性值1;属性2:属性值2;属性3:属性值3;}

它是所有选择器中作用范围最广的,能匹配页面中所有的元素


  1. 键:就是你存的值的编号
    值:就是你要存放的数据 ↩︎

展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 1024 设计师: 上身试试
应支付0元
点击重新获取
扫码支付

支付成功即可阅读