css 基础

基础
    语法
        CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。
            selector {
                declaration1;
                declaration2;
                ...
                declarationN;
            }
        选择器通常是您需要改变样式的 HTML 元素。 每条声明由一个属性和一个值组成。每个属性有一个值。属性和值被冒号分开。
            selector {property: value}
        例如：
            h1{
               color:red;
               font-size:14px;
            }
    基础选择器
        派生选择器
        派生选择器 通过依据元素在其位置的上下文关系来定义样式，可以使标记更加简洁。
        派生选择器允许你根据文档的上下文关系来确定某个标签的样式。通过合理地使用派生选择器，我们可以使 HTML 代码变得更加整洁。 比方说，你希望列表中的 strong 元素变为红色，而不是通常的黑色，可以这样定义一个派生选择器：
            li strong{
                color: red;
            }
        
        id 选择器
            1.id 选择器： id 选择器可以为标有 id 的 HTML 元素指定特定的样式 id 选择器以“#”来定义
            2.id 选择器和派生选择器： 目前比较常用的方式是 id 选择器常常用于建立派生选择器
            注意：id 属性值只能在每个 HTML 文档中出现一次。
            
            
        类选择器
            (1)在 CSS 中，类选择器以一个点号显示：
                .divclass {
                    color: red;
                }
                
                注意：类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用
                div 元素含有 divclass 类，意味着它要遵守.divclass的规则。
                    <div class="divclass">
                    hello div
                    </div>
            和 id 一样，class 也可被用作派生选择器：
                .pclass a{
                    color: green;
                    
        属性选择器
            下面的例子为带有 title 属性的所有元素设置样式：
                <style>
                [title] {color:red;}
                </style>
            属性和值选择器
                下面的例子为 title="te" 的所有元素设置样式：
                    <style>
                    [title=te]{
                                    color: red;
                                }
                    </style>   
            例：
 

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            [title]{
                color: #00ff14;
            }
            [title=te]{
                color: red;
            }

        </style>    
    </head>
    <body>
       <p title=>属性选择器</p>
        <p title="te">属性和值选择器</p>
    </body>
</html>

 

posted @ 2019-01-16 09:53  SilentKiller  阅读(167)  评论(0)    收藏  举报