基本语法结构

如何在网页中插入样式表

1. 内联样式：直接在元素中设置
2. 内部样式表：内部头部统一定义
3. 外部样式表：以css文件定义保存，之后引入

！CSS没有限制空格的使用

CSS通常对于字母大小写不敏感（class和id选择器 例外）

插入样式表的方式存在优先级的差异：内联样式>内部样式表>外部样式表

CSS选择器

通用选择器

    
    
        <style>header{
            background: red;
            }</style>
    
        
        <header><h4>一个无序列表：</h4></header>
        <section> 
            <ul>
                <li>咖啡</li>
                <li>茶</li>
                <li>牛奶</li>
            </ul>
        </section>
       
        
        
        
        

类选择器（class selector）

    
    
        <style>.red{
            background: red;
            }</style>
    
        
        <header class="red"><h4>一个无序列表：</h4></header>
        <section> 
            <ul>
                <li class="red">咖啡</li>
                <li>茶</li>
                <li>牛奶</li>
            </ul>
        </section>
       
        
        
        
        

id选择器

    
    
        <style>#blue{
            background: blue;
            }</style>
    
        
        <header id="blue"><h4>一个无序列表：</h4></header>
        <section> 
            <ul>
                <li>咖啡</li>
                <li>茶</li>
                <li>牛奶</li>
            </ul>
        </section>
       
        
        
        
        

可以将选择器组合使用，比如若是当初想让指定的某一li元素中的内容变蓝

    
    
        <style>li.red{
            background: red;
            }</style>
    
        
        <header id="blue"><h4>一个无序列表：</h4></header>
        <section> 
            <ul>
                <li class="red">咖啡</li>
                <li>茶</li>
                <li>牛奶</li>
            </ul>
        </section>
       
        
        
        
        

兄弟选择器

得到这项之后的全部变红。

    
    
        <style>
        li.red~ li {
            background: red;
            }</style>
    
        
        <header id="blue"><h4>一个无序列表：</h4></header>
        <section> 
            <ul>
                <li class="red">咖啡</li>
                <li>茶</li>
                <li>牛奶</li>
            </ul>
        </section>
       
        
        
        
        

伪类选择器

伪类本质上基于用户如何交互界面来设置元素样式地方法

    
    
        <style>
        li:hover {
            background: red;
            }
        input:focus{background:blue;}
            </style>
        
    
        
        <header id="blue"><h4>一个无序列表：</h4></header>
        <section> 
            <ul>
                <input type="text">
                <li class="red">咖啡</li>
                <li>茶</li>
                <li>牛奶</li>
            </ul>
        </section>
       
        
        
        
        

hover悬停：鼠标在哪一部分上，那一部分就会泛红

focus：聚焦就会变蓝色

通过nth-child括号中的数字可以进行调整第几个出现效果

属性选择器

    
    
        <style>
        [data-yellow="true"]{
            background: yellow;
        }
        </style>
    
        
        <header data-yellow="true"><h4>一个无序列表：</h4></header>
        <section> 
            <input type="text">
            <ul>
                <li class="red">咖啡</li>
                <li>茶</li>
                <li>牛奶</li>
            </ul>
        </section>