CSS

css的导入与基础选择器

 

css是什么

css也是一门标记语言，主要用作修改控制html的样式

css书写的位置(导入)

css是用来控制页面标签的样式，但是可以根据实际情况书写在不同的位置，

放在不同位置有不同的专业叫法，可以分为行间式、内联式和外联式三种

行间式

　　css样式直接书写在标签的style全局属性中，一条样式格式为（样式名：样式值）

　　可以同时出现按多条样式，样式之间用封号隔开

　　<div ></div>

内联式

　　css样式书写在head标签的style标签中，样式格式为选择器 {样式块}

　　可以同时控制多个标签的样式，增强代码的复用性

    <style>
        .h1 {
             10px;
            height: 20px;
        }
        /*css的注释语法*/  /**/
        .d1 {
             10px;
            height: 20px;
        }
    </style>

外联式

　　css的语法和内联式相同，但样式写在css文件中，在html页面中用link标签引入css文件

　　可以团队合作编写样式，代码复用性增强

<link rel="stylesheet" type="text/css" href="css/my.css">

　　rel="stylesheet"：引入的层级样式表，也就是css文件

　　type="text/css"：引入文件采用的是css语法书写文本类型代码

　　href="css/my.css"：采用相对路径引入目标css文件

css的基础选择器

通配选择器

    <style>
        * {
            height: 10px;    
        }
    /* 特定标识符：星号(*) --> 可以表示页面所有标签的名字   */
    /*  因为通配选择器可以表示页面的所有标签，所以不建议使用  */
    </style>

标签选择器

    <style>
        h1 {
            height: 10px;
        }
    /*  特定标识符：标签名  */
    /*  标签选择器控制页面中所有标签名为标签选择器名的标签  */
    /*  例如上面的标签选择器名为h1 
        页面中所有的h1标签都会被他匹配控制样式*/
    </style>

class选择器

按 Ctrl+C 复制代码

<style> .h { height: 10px; } /* 特定标识符：点（.） */ /* 每一个标签都可以设置class属性 */ /* class选择器可以匹配页面所有标签class属性值 为class选择器名的标签 */ /* 例如上面会匹配控制所有class值为h的标签 */ </style>

按 Ctrl+C 复制代码

id选择器

    <style>
        #d1 {
            height: 10px;
        }
    /*  特定标识符：井号（#）  */
    /*  id选择器控制页面中标签全局属性id值为id选择起名的唯一标签  */
    /*  例如上面会匹配控制所有id值为d1的标签  */
    </style>

选择器优先级

　　当多个选择器同时匹配上同一个标签的时候，设置

　　相同属性时就会涉及到谁的设置生效（优先级高）

　　优先级按作用域的大小区分，作用域越小优先级越高

　　important > 行间式 > id > class > 标签 > 通配

　　如果优先级相同，那么谁在下面谁生效