Android程序员学WEB前端(6)-CSS(1)-选择器-Sublime
转载请注明出处：http://blog.csdn.net/iwanghang/article/details/76576469
觉得博文有用，请点赞，请评论，请关注，谢谢！~
CSS外部文档链接：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>CSS基础-外部文档链接</title>
<link rel="stylesheet" type="text/css" href="style.css">
<style type="text/css">
p{color:blue;text-align: center; }
h1{color:#999999;font-size:12px ;text-align: center; }
</style>
</head>
<body>
<p>我是段落</p>
<p style="color:black;text-align:right">我是另一个段落</p>
<h1>我是标题</h1>
</body>
</html>
通配选择器 标签选择器：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>通配选择器 标签选择器</title>
<style type="text/css">
/*通配选择器*/
*{color:#999999;font-size:12px ;text-align: center; }
/*标签选择器*/
h1{color:#000000;width: 200px;height: 200px;border: 1px solid red;font-size:20px ;text-align: center; }
</style>
</head>
<body>
<p>我是段落</p>
<h1>我是标题</h1>
<ul>
<li>我是列表</li>
<li>我是列表</li>
<li>我是列表</li>
</ul>
</body>
</html>
类选择器：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>类选择器</title>
<style type="text/css">
/*类选择器*/
.tag01{color:red;font-size:22px ;text-align: center;}
.tag02{list-style-type: none;}
</style>
</head>
<body>
<p class="tag01">我是段落</p>
<h1>我是标题</h1>
<ul>
<li class="tag01 tag02">我是列表</li>
<li>我是列表</li>
<li>我是列表</li>
</ul>
</body>
</html>
ID选择器：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>ID选择器</title>
<style type="text/css">
/*ID选择器*/
#tag_01{color:red;font-size:22px ;text-align: center;}
</style>
</head>
<body>
<p id="tag_01">我是段落</p>
<h1>我是标题</h1>
<ul>
<li>我是列表</li>
<li>我是列表</li>
<li>我是列表</li>
</ul>
</body>
</html>
群组选择器：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>群组选择器</title>
<style type="text/css">
/*群组选择器*/
li,td,tag1,#tag_1{color:blue;font-size:22px ;text-align: center;}
</style>
</head>
<body>
<p class="tag1">我是段落</p>
<h1 id="tag_1">我是标题</h1>
<ul>
<li>我是列表</li>
<li>我是列表</li>
<li>我是列表</li>
</ul>
</body>
</html>
后代选择器：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>后代选择器</title>
<style type="text/css">
/*后代选择器*/
/*table tr td div p a*/
table a{text-decoration: none;color: red;font-size: 3cm;}
</style>
</head>
<body>
<table>
<tr>
<td>
<div>
<p>
<a href="http://www.baidu.com">百度</a>
</p>
</div>
</td>
</tr>
</table>
</body>
</html>
子代选择器：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>子代选择器</title>
<style type="text/css">
/*子代选择器*/
tr > td{text-decoration: none;color: red;font-size: 3cm;}
</style>
</head>
<body>
<table>
<tr>
<td>我是td</td>
</tr>
</table>
</body>
</html>
属性选择器：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>属性选择器</title>
<style type="text/css">
/*属性选择器*/
/*img[title]{border: 1px;width: 200px;height: 100px;}*/
/*img[title][id]{border: 1px;width: 200px;height: 100px;}*/
img[title][id=tag01]{border: 1px;width: 200px;height: 100px;}
</style>
</head>
<body>
<img src="" alt="" title="image01" id="tag01">
<img src="" alt="" title="image01" id="tag02">
<img src="" alt="" title="image02" class="tag02">
<p>我是段落</p>
<h1>我是标题</h1>
</body>
</html>
相邻兄弟选择器：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>相邻兄弟选择器</title>
<style type="text/css">
/*相邻兄弟选择器*/
/*td + td{color: red;}*/
.tag01 + .tag02{color: red;}
</style>
</head>
<body>
<table>
<tr>
<td class="tag01">我是td1</td>
<td class="tag02">我是td2</td>
</tr>
<tr>
<td>我是td3</td>
<td>我是td4</td>
</tr>
</table>
</body>
</html>
转载请注明出处：http://blog.csdn.net/iwanghang/article/details/76576469
沈阳或周边城市公司有意开发Android，请与我联系
联系方式
微信：iwanghang
QQ：413711276
邮箱：iwanghang@qq.com
觉得博文有用，请点赞，请评论，请关注，谢谢！~
Android程序员学WEB前端(6)-CSS(1)-选择器-Sublime的更多相关文章
- Android程序员学WEB前端(8)-CSS(3)-盒子内联块级定位浮动-Sublime
转载请注明出处:http://blog.csdn.net/iwanghang/article/details/76618473 觉得博文有用,请点赞,请评论,请关注,谢谢!~ 盒子模型: <!D ...
- Android程序员学WEB前端(7)-CSS(2)-伪类字体文本背景边框-Sublime
转载请注明出处:http://blog.csdn.net/iwanghang/article/details/76618373 觉得博文有用,请点赞,请评论,请关注,谢谢!~ 伪类: <!DOC ...
- Android程序员学WEB前端(1)-HTML(1)-标准结构常用标签-Sublime
转载请注明出处:http://blog.csdn.net/iwanghang/article/details/76522043觉得博文有用,请点赞,请评论,请关注,谢谢!~ 8月份了,换工作有2个月了 ...
- Android程序员学WEB前端(5)-HTML(5)-框架集-Sublime
转载请注明出处:http://blog.csdn.net/iwanghang/article/details/76576279 觉得博文有用,请点赞,请评论,请关注,谢谢!~ 框架集: index7. ...
- Android程序员学WEB前端(4)-HTML(4)-注册页面-Sublime
转载请注明出处:http://blog.csdn.net/iwanghang/article/details/76576031 觉得博文有用,请点赞,请评论,请关注,谢谢!~ 注册页面1: <! ...
- Android程序员学WEB前端(3)-HTML(3)-表单嵌套-Sublime
转载请注明出处:http://blog.csdn.net/iwanghang/article/details/76522586觉得博文有用,请点赞,请评论,请关注,谢谢!~ 表单嵌套: <!DO ...
- Android程序员学WEB前端(2)-HTML(2)-锚点链接列表表单-Sublime
转载请注明出处:http://blog.csdn.net/iwanghang/article/details/76522417觉得博文有用,请点赞,请评论,请关注,谢谢!~锚点 链接 列表 表单 &l ...
- 【从0到1学Web前端】CSS伪类和伪元素
1.CSS中的伪类 CSS 伪类用于向某些选择器加入特殊的效果. 语法: selector : pseudo-class {property: value} CSS 类也可与伪类搭配使用 select ...
- 【从0到1学Web前端】CSS伪类和伪元素 分类： HTML+CSS 2015-06-02 22:29 1065人阅读 评论(0) 收藏
1.CSS中的伪类 CSS 伪类用于向某些选择器添加特殊的效果. 语法: selector : pseudo-class {property: value} CSS 类也可与伪类搭配使用 select ...
随机推荐
- Spring事务用法示例与实现原理
关于Java中的事务,简单来说,就是为了保证数据完整性而存在的一种工具,其主要有四大特性:原子性,一致性,隔离性和持久性.对于Spring事务,其最终还是在数据库层面实现的,而Spring只是以一种比 ...
- tomcat结合httpd和nginx
httpd结合tomcat: 前提:httpd版本2.4以上,编译安装 httpd:192.168.223.136 tomcat:192.168.223.146 tomcat简单创建一个额外的weba ...
- 20145302张薇 《Java程序设计》第二周学习总结
20145302张薇 <Java程序设计>第一周学习总结 教材学习内容总结 第三章 第三章讲的是基本类型,变量,运算符和基本条件语句. 基本类型分为: 整数:short(2 byte),i ...
- 通过map文件了解堆栈分配(STM32、MDK5)--避免堆栈溢出
环境:STM32F103C8T6,MDK5 在最近的一个项目的开发中,每当调用到一个函数,程序就直接跑飞.debug跟进去看不出什么逻辑错误,但发现函数内局部变量声明之后,全局变量的值被清零,后来查看 ...
- 关于JavaScript对象中的一切（一） -- 对象属性
先上一张我制作的脑图.
- 【读书笔记】《深入浅出nodejs》第二章 模块机制
1.什么是模块? 指在程序设计中,为完成某一功能所需的一段程序或子程序:或指能由编译程序.装配程序等处理的独立程序单位:或指大型软件系统的一部分. ----<百度百科> 2.JavaScr ...
- 解读：CombineFileInputFormat类
MR-Job默认的输入格式FileInputFormat为每一个小文件生成一个切片.CombineFileInputFormat通过将多个“小文件”合并为一个"切片"(在形成切片的 ...
- Nginx配置X-Forwarded-Proto
需求 最近公司在做全站https,架构上面有Nginx+tomcat Nginx+php,且nginx配置了ssl,tomcat和php项目使用https协议 但是,发送的是https url请求,p ...
- 【网络结构可视化】Visualizing and Understanding Convolutional Networks（ZF-Net） 论文解析
目录 0. 论文地址 1. 概述 2. 可视化结构 2.1 Unpooling 2.2 Rectification: 2.3 Filtering: 3. Feature Visualization 4 ...
- git 提交某个内容
git add 你所添加的文件或者文件夹 git commit git push