讲给Android程序员看的前端教程(11)——CSS选择器(1)

自定义View系列教程00–推翻自己和过往,重学自定义View
自定义View系列教程01–常用工具介绍
自定义View系列教程02–onMeasure源码详尽分析
自定义View系列教程03–onLayout源码详尽分析
自定义View系列教程04–Draw源码分析及其实践
自定义View系列教程05–示例分析
自定义View系列教程06–详解View的Touch事件处理
自定义View系列教程07–详解ViewGroup分发Touch事件
自定义View系列教程08–滑动冲突的产生及其处理


探索Android软键盘的疑难杂症
深入探讨Android异步精髓Handler
详解Android主流框架不可或缺的基石
站在源码的肩膀上全解Scroller工作机制


Android多分辨率适配框架(1)— 核心基础
Android多分辨率适配框架(2)— 原理剖析
Android多分辨率适配框架(3)— 使用指南


版权声明

  • 本文原创作者:谷哥的小弟
  • 作者博客地址:http://blog.csdn.net/lfdfhl
  • 本文视频教程:http://www.stay4it.com/my/course/37

CSS选择器

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

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

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

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

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

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

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

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

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

标签选择器

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




	
	标签选择器
	


	

本文作者:谷哥的小弟

博客地址:http://blog.csdn.net/lfdfhl

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

讲给Android程序员看的前端教程(11)——CSS选择器(1)_第1张图片

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


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

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

讲给Android程序员看的前端教程(11)——CSS选择器(1)_第2张图片

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

你可能感兴趣的:(讲给Android程序员看的前端教程(11)——CSS选择器(1))