CSS

时间:2019-07-04
本文章向大家介绍CSS,主要包括CSS使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

css的导入与基础选择器

 

css是什么

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

css书写的位置(导入)

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

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

行间式

  css样式直接书写在标签的style全局属性中,一条样式格式为(样式名:样式值)

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

  <div ></div>

内联式

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

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

    <style>
        .h1 {
            width: 10px;
            height: 20px;
        }
        /*css的注释语法*/  /**/
        .d1 {
            width: 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 复制代码
按 Ctrl+C 复制代码

id选择器

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

选择器优先级

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

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

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

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

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

$flag 上一页 下一页