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 ...
随机推荐
- 2045331 《Java程序设计》第09周学习总结
2045331 <Java程序设计>第09周学习总结 教材学习内容总结 第十六章 整合数据库 16.1.1JDBC简介 1.JDBC是用于执行SQL的解决方案,开发人员使用JDBC的标准接 ...
- hadoop随手笔记
1.Hadoop Streaming 是为了方便不太熟悉java用户编写MR程序的工具.用户可以将任何可执行文件(C++)或者脚本(python,ruby)作为Mapper/Reducer, 提高了效 ...
- Python多版本共存管理工具之pyenv
目录 Table of Contents 1. 安装pyenv 2. 安装Python 3.0 使用python 参考 Table of Contents 经常遇到这样的情况: 系统自带的Python ...
- 分布式系列 - dubbo服务发布
单元测试OK,封装为Dubbo服务. 添加依赖 pom.xml <properties> <dubbo.version>2.5.3</dubbo.ve ...
- SaltStack安装zabbix-agent-第九篇
环境 node1 192.168.56.11 角色 salt-master node2 192.168.56.12 角色 salt-minon 实现内容 使用salt远程安装zabbix ...
- LeetCode——Find All Duplicates in an Array
Question Given an array of integers, 1 ≤ a[i] ≤ n (n = size of array), some elements appear twice an ...
- Java实习二
链表(java实现) Link.java public class Link{ private Node first; public Link(){ this.first = null; } //判断 ...
- spring cloud feign 调用服务注意问题
服务端 rest api @RequestMapping(value = "/phone") public ResponsePhone getPhone(@RequestParam ...
- 关于Google play无法下载应用
查看网络连接是否正常 查看账号信息 以上两种都没有问题,那可能是缓存的问题,去应用里面清楚缓存以后,重启手机. 如果还是不行,就在应用程序中 清除全部数据,重启手机,这样就可以了. ps:不管你行不行 ...
- codeforces27D Ring Road 2
本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000 作者博客:http://www.cnblogs.com/ljh2000-jump/ ...