css介绍及基础使用

最新推荐文章于 2024-10-10 23:52:19 发布

suanron

最新推荐文章于 2024-10-10 23:52:19 发布

阅读量69

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/suanron/article/details/119780225

版权

1.介绍

层叠样式表

作用：修饰页面

工作原理：加载HTML，加载css，将HTML和css结合，创建DOM树，浏览器显示DOM。

DOM：文档对象模型，树形结构，元素、属性、文本称之为节点

2.语法

    1) 声明
       属性名：属性值
       css中区分大小写，对大小写比较敏感

    2) 声明块
        将多个声明放在 {} 里面，每个声明之间用；分割

         {
            color：red；
            font-size：12px；
         }
    3) 规则
        选择器 {
                  color：red；
                 font-size：12px；
               }

    4) 注释：/*注释内容*/
        作用：1.记录编程思路
              2.便于代码的维护

5) 空白：可以在css代码中添加一些空白（空白、回撤）
作用：提高代码的可读性

    速写形式
        padding:1px 2px 3px 4px
               =padding-top、padding-right、padding-bottom、padding-left

3.如何在HTML中使用css

（1）行内样式

                在元素上定义一个style属性，将样式写在元素的style属性中
        例： <div style="color：red；font-size:12px;">

                        缺点：结构和样式没有分离
                                   代码的复用率低
      优点：优先级高

(2)内联样式

               将代码写在head标签中的style标签
                  例：<style>
                      选择器{
                                  color：red；
              }
                 </style>

                缺点：代码复用率不高
          优点：结构和样式能分离

（3）外部样式

                在外部定义一个后缀名为 .css 的文件，在html文档的 head 使用 link 标签引入
                          例:<link rel="stylesheet" href="./index.css">

          优点:结构和样式可以分离
                          复用率提高

4.css选择器

   作用：选择元素

核心选择器

     1）标签选择器
        div{
            规则；
            规则；
            ...
        }
        选中标签为div的所有元素

     2）id选择器
        #id{
            规则；
            规则；
            ...
        }

     3）类选择器
        .class{
            规则;
            ...
        }
        与元素中class属性值保持一致

     4)普遍选择器
          *
        选择所有元素

层次选择器

     1）后代选择器
        ul li{
            规则；
            规则；
            ...
        }
        选中ul下面的所有li

     2）子代选择器
        .bottom>p{
            规则；
            规则；
            ...
        }
        选中class为bottom的直接子元素p

     3）兄弟选择器

       相邻同胞选择器

        .jisnhsu+li{
            规则；
            规则；
            ...
        }
        选中class为江苏这个元素的下一个兄弟元素

       一般同胞选择器
         .jiangsu~li{
             规则.
             ...
         }
         选中class为江苏的所有兄弟元素
多选择器

     1）逗号选择器

         h1,h2,h3,.text{
             规则；
             ...
         }
         选中h1、h2、h3、class为test的元素

     2）组合选择器

         a.baidu{
             规则；
             ...
         }
         选中class为百度的a标签

3）属性选择器

       [attr]    选择具有attr属性的元素、无论该属性的值是什么
       [attr=val]    选择具有attr属性的、并且attr的值为val元素
       [attr^=val]    选择具有attr属性的、并且attr的值以val开头的元素
       [attr$=val]    选择具有attr属性的、并且attr的值以val结尾的元素
       [attr*=val]   选择具有attr属性的、并且attr的值包含val的元素
       [attr~=val]   选择具有attr属性的、并且attr的值之一为val的元素

    4）伪类选择器

     子代元素相关的伪类选择器

        :first-child {
            规则；
            ...
        }
        选中作为别人第一个孩子的元素

        :last-child {
            规则;
            ...
        }
        选中作为别人最后一个孩子的元素

        :nth-child(参数) {
            规则；
            ...
        }
        选中参数值的孩子
           参数的取值：1.数字
                       2.关键字（odd奇数，even偶数）

     元素状态相关的

        ：hover   鼠标悬停在上面时
        :focus     聚焦的状态