讲给后台程序员看的前端系列教程(13)——选择器(1)

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/lfdfhl/article/details/100587293

C语言自学完备手册(33篇)

Android多分辨率适配框架

HTML5前端开发实战系列教程

MySQL数据库实操教程(35篇图文版)

推翻自己和过往——自定义View系列教程(10篇)

走出思维困境,踏上精进之路——Android开发进阶精华录

讲给Android程序员看的前端系列教程(40集免费视频教程+源码)


版权声明

  • 本文原创作者:谷哥的小弟
  • 作者博客地址:http://blog.csdn.net/lfdfhl

CSS选择器概述

CSS 选择器用于选择需要设定样式的元素从而实现网页样式的设计,比如:文字的大小,颜色,元素的定位等等。看到这,有人会想什么是选择器呢?举个例子,到了年底公司就要发年终奖了,于是人事部门发了一个通知:

公司高管 {
    奖金:20W
    车子:一辆
    手机:1部
}

项目经理 {
    奖金:10W
    手机:1部
}

普通员工 {
    奖金:5W
    对联:1副
}

公司所有人看到这个通知后,再结合自身的岗位就清楚了今年自己的年终奖了。类似地,在CSS中采用选择器指定标签的显示样式:

selector{
   property1 : value1;
   property2 : value2;
   property3 : value3;
   property4 : value4;
   ..................
}
  • selector:选择器

  • property:属性;例如:颜色,大小

  • value:属性对应的值;例如:red,400px

嗯哼,在本教程中我们将介绍CSS中常用的选择器。

标签选择器

标签选择器,也常称为元素选择器;它用于设定指定标签的样式。请看如下示例:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>标签选择器</title>
	<style type="text/css">
		p{
			font-size: 40px;
			color: white;
			width: 880px;
			height: 50px;
			background-color: pink;
		}
	</style>
</head>
<body>
	<p>本文作者:谷哥的小弟</p>
	<p>博客地址:http://blog.csdn.net/lfdfhl</p>
</body>
</html>

在该示例中,我们通过标签选择器为p标签统一设置宽度,高度,文字大小和背景颜色,效果图如下所示:

在这里插入图片描述

正如上图所示:所有的p标签都变成了统一的样式。如果,想让该标签选择器只作用于某些p标签呢?该怎么办呢?很简单,只需要给该便签选择器设置一些匹配规则即可,请看如下示例:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>标签选择器</title>
	<style type="text/css">
		p[id=name]{
			font-size: 40px;
			color: white;
			width: 500px;
			height: 50px;
			background-color: pink;
		}
	</style>
</head>
<body>
	<p id="name">本文作者:谷哥的小弟</p>
	<p>博客地址:http://blog.csdn.net/lfdfhl</p>
</body>
</html>

在该标签选择器中设置了一个条件:id=name;也就是说该选择器只会作用于id=name的p标签,效果如下图所示:

在这里插入图片描述

除此以外,我们还可以添加别的匹配规则,比如:id的值以xx开头,id的值包含xx等等,在此不再赘述。

展开阅读全文

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