Android程序员学WEB前端(6)-CSS(1)-选择器-Sublime

时间：2023-01-31 23:23:31

转载请注明出处：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，请与我联系
联系方式
Android程序员学WEB前端(6)-CSS(1)-选择器-Sublime
微信：iwanghang
QQ：413711276
邮箱：iwanghang@qq.com

觉得博文有用，请点赞，请评论，请关注，谢谢！~

Android程序员学WEB前端(6)-CSS(1)-选择器-Sublime的更多相关文章

  1. Android程序员学WEB前端&lpar;8&rpar;-CSS&lpar;3&rpar;-盒子内联块级定位浮动-Sublime

    转载请注明出处:http://blog.csdn.net/iwanghang/article/details/76618473 觉得博文有用,请点赞,请评论,请关注,谢谢!~ 盒子模型: <!D ...

  2. Android程序员学WEB前端&lpar;7&rpar;-CSS&lpar;2&rpar;-伪类字体文本背景边框-Sublime

    转载请注明出处:http://blog.csdn.net/iwanghang/article/details/76618373 觉得博文有用,请点赞,请评论,请关注,谢谢!~ 伪类: <!DOC ...

  3. Android程序员学WEB前端&lpar;1&rpar;-HTML&lpar;1&rpar;-标准结构常用标签-Sublime

    转载请注明出处:http://blog.csdn.net/iwanghang/article/details/76522043觉得博文有用,请点赞,请评论,请关注,谢谢!~ 8月份了,换工作有2个月了 ...

  4. Android程序员学WEB前端&lpar;5&rpar;-HTML&lpar;5&rpar;-框架集-Sublime

    转载请注明出处:http://blog.csdn.net/iwanghang/article/details/76576279 觉得博文有用,请点赞,请评论,请关注,谢谢!~ 框架集: index7. ...

  5. Android程序员学WEB前端&lpar;4&rpar;-HTML&lpar;4&rpar;-注册页面-Sublime

    转载请注明出处:http://blog.csdn.net/iwanghang/article/details/76576031 觉得博文有用,请点赞,请评论,请关注,谢谢!~ 注册页面1: <! ...

  6. Android程序员学WEB前端&lpar;3&rpar;-HTML&lpar;3&rpar;-表单嵌套-Sublime

    转载请注明出处:http://blog.csdn.net/iwanghang/article/details/76522586觉得博文有用,请点赞,请评论,请关注,谢谢!~ 表单嵌套: <!DO ...

  7. Android程序员学WEB前端&lpar;2&rpar;-HTML&lpar;2&rpar;-锚点链接列表表单-Sublime

    转载请注明出处:http://blog.csdn.net/iwanghang/article/details/76522417觉得博文有用,请点赞,请评论,请关注,谢谢!~锚点 链接 列表 表单 &l ...

  8. 【从0到1学Web前端】CSS伪类和伪元素

    1.CSS中的伪类 CSS 伪类用于向某些选择器加入特殊的效果. 语法: selector : pseudo-class {property: value} CSS 类也可与伪类搭配使用 select ...

  9. 【从0到1学Web前端】CSS伪类和伪元素 分类： HTML&plus;CSS 2015-06-02 22&colon;29 1065人阅读 评论&lpar;0&rpar; 收藏

    1.CSS中的伪类 CSS 伪类用于向某些选择器添加特殊的效果. 语法: selector : pseudo-class {property: value} CSS 类也可与伪类搭配使用 select ...

随机推荐

  1. vcpu

    qemu_kvm_start_vcpu --> qemu_init_vcpu --> x86_cpu_realizefn -->  x86_cpu_common_class_init ...

  2. POJ2796Feel Good&lbrack;单调栈&rsqb;

    Feel Good Time Limit: 3000MS   Memory Limit: 65536K Total Submissions: 13376   Accepted: 3719 Case T ...

  3. perl正则表达式第三周笔记

    正则引擎的分类 正则引擎的分类 正则引擎的分类主要分两种: DFA:egrep.awk.lex.flex NFA:.NET.PHP.Perl.Ruby.Python.GNU Emacs.ed.sec. ...

  4. java Socket实现简单在线聊天（三）

    在上一篇,利用线程使服务端实现了能够接收多客户端请求的功能,这里便需要客户端接收多客户端消息的同时还能把消息转发到每个连接的客户端,并且客户端要能在内容显示区域显示出来,从而实现简单的在线群聊. 在实 ...

  5. Django异常问题之Error&colon; &lbrack;WinError 10013&rsqb; 以一种访问权限不允许的方式做了一个访问套接字的尝试。

    一般情况下,我们启动Django项目时默认设置的端口为8000,当你听着酷狗音乐敲着代码,启动Django项目时忽然翻车了. 不要慌,那是酷狗抢先一步占用了8000端口,解决这个问题的方式就是修改端口 ...

  6. Minimum Domino Rotations For Equal Row LT1007

    In a row of dominoes, A[i] and B[i] represent the top and bottom halves of the i-th domino.  (A domi ...

  7. IDEA运行tomcat8&period;5&period;35源代码

    前提环境,安装和配置好java1.8+环境,maven,IDEA 1.下载Tomcat源代码:https://tomcat.apache.org/download-80.cgi#8.5.35 2.创建 ...

  8. Flash Builder4注册机

    我的Eclipse下的Flash Builder 4正式版已经过期,之前在网上找到的注册码,都不能用了, 花了很久时间,才找到这个注册机. Flash Builder 4 注册机 Serial Cra ...

  9. ArcGIS 10&period;1 如何连接数据库&lpar;转&rpar;

    原文地址:http://blog.csdn.net/arcgis_cs/article/details/7750893 ArcGIS 10.1如何连接数据库 最近在使用ArcGIS 10.1的数据库, ...

  10. C&plus;&plus;实现筛选法

    筛选法 介绍: 筛选法又称筛法,是求不超过自然数N(N>1)的所有质数的一种方法.据说是古希腊的埃拉托斯特尼(Eratosthenes,约公元前274-194年)发明的,又称埃拉托斯特尼筛子. ...

相关文章