前端学习笔记(七)

最新推荐文章于 2024-01-02 10:00:00 发布

华之乐章

最新推荐文章于 2024-01-02 10:00:00 发布

阅读量153

点赞数

分类专栏：前端学习笔记文章标签：选择器优先级样式优先级 css3属性

本文链接：https://blog.csdn.net/lilongok/article/details/79860608

版权

前端学习笔记专栏收录该内容

17 篇文章 0 订阅

订阅专栏

第七章：选择器和样式优先级和常用css3

一.选择器优先级

1.基本选择器的优先级

        什么叫优先级！
        同优先级后面覆盖上面
        高优先级始终覆盖低优先级
        /*基本选择器的优先级*/
        id > class > tagName > *
        总结：控制范围越小优先级越高也就是越精准优先级越高！

2.后代选择器的多种情况

        ID选择器个数不相等，ID个数多的优先级高，后面不用比
        ID选择器个数相等，则看class个数
        class 个数相等，再看tagName 个数
        #wrap ul li .list{} 和.wrap ul li #list{}优先级一样
        选择器基本的原则，精准控制元素先看精确度
        选择器使用原则：
        精准的控制元素最终选择到要控制的元素本身，这样就能实现精准控制元素！

二.样式优先级

    比样式优先级我们首先要保证选择器优先级是一样的情况下才有意义
    内部样式有两种,写在<style> 里面的是叫做内嵌样式。
    直接写在标签前面的用style=''属性引用的样式，叫做 行内样式！
     外部样式 （顾名思义将样式写在外部）
    @charset 'UTF-8';
    /*外部样式也需要规定编码格式*/
    外部的样式用 link标签引入
    需要注意的是引入图片文件的时候要写../ 注意路径问题
    <head>
    <link rel='stylesheet' type='text/css' href='css/demo.css/>
    </head>
    外部样式导入式的方式：
    导入式会在整个网页装载完后再装载CSS文件，因此这就导致了一个问题，如果网页比较大则会儿出现先显示无样式的页面，闪烁一下之后，再出现网页的样式。这是导入式固有的一个缺陷。
     @import"路径"; 不用
    在不考虑选择器优先级的情况下样式的优先级是：
    行内样式 > 内部样式 = 外部样式
    如果我们的固有的结构不能变化，又想提升样式的优先级！
    color:red !important; 不推荐

三.常用css3属性

1.border-radius 圆角

        四个值：左上右上右下左下
        三个值：左上右上左下右下
        两个值：左上右下右上左下
        一个值：所有角一样的值
        单独定义某一个角的圆角：
        bordertopleftradius:
        bordertoprightradius:
        borderbottomrightradius:
        borderbottomleftradius:
         写一个圆
        border-radius:50%;

2.box-shadow 阴影

        hshadow    水平偏移量。允许负值（必需）
        vshadow    垂直偏移量。允许负值（必需）
        blur 模糊半径（可选。）
        spread 阴影的大小（可选。）
        color 阴影的颜色（可选。）

outset 外部阴影（默认）内部阴影（inset可选）

3.overflow:;规定元素溢出后如何显示

        visible 默认值
        hidden 隐藏，并且其余内容是不可见的。
        scroll 出现滚动条
        auto 根据内容情况来决定是否出现滚动条
        水平溢出隐藏 overflowx:

垂直溢出隐藏 overflowy:

4.visibility 是否显示元素

        为元素创建空间，无论它们是否是可见或不可见
        和display的区别是：
        为display none时，元素会从页面结构中删除，完全不占内容。
        而visibility为hidden的时，即使用户看不见元素，他任然占据位置
        div{
            visibility:visible; //元素框是可见的。
            visibility:hidden; //元素框不可见,但是占据位置
            visibility:collapse; //当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 "hidden"。
            }