前端随笔关于css

最新推荐文章于 2024-10-09 20:10:15 发布

磕磕...碰碰

最新推荐文章于 2024-10-09 20:10:15 发布

阅读量115

点赞数

文章标签： css

本文链接：https://blog.csdn.net/kekepengpeng97/article/details/100627785

版权

css语法：
    目标（选择符），干什么（声明）

    选择符 {
        属性: 属性值;
        属性2: 属性值2;
        属性3: 属性值3 属性值4 属性值5 ...;
        ...
    }

    声明分为：
        属性和属性值


    申明放在大括号里面
    每条申明用分号结束
    属性和属性值用冒号连接

    如果有多条申明的时候，接着写，声明和声明不分先后顺序
    一个属性可能对应多个属性值，属性值和属性值用空格隔开，大部分情况不分先后顺序
    
所有的css语句必须写在样式表的里面

内部样式表
    样式表放在html文件的内部
    <style></style>
    放在head标签里面的最下面

外部样式表
    样式表不在html文件的内部
    放在css文件里面，css文件的后缀是.css

    css文件不需要写<style>，css文件不认识标签，css文件本身就是样式表

    外部样式表的引入方式：
        *方法一：外部样式表的创建：
        <link rel="stylesheet" type="text/css" href="目标文件的路径及文件名全称" />
        说明：
        使用link元素导入外部样式表时，需将该元素写在文档头部，即<head>与</head>之间。
        rel（relation）：用于定义文档关联，表示关联样式表；
        type：定义文档类型；

        *方法二：外部样式表的导入
        <style type="text/css">
        @import url(目标文件的路径及文件名全称);
        </style>
        注：@和import之间没有空格 url和小括号之间也没有空格；必须结尾以分号结束；


        差别1：本质的差别：link属于XHTML标签，而@import完全是CSS提供的一种方式。
        差别2：加载顺序的差别：当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显。
        差别3：兼容性的差别：@import是CSS2.1提出的，所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。
        差别4：使用dom(document object model文档对象模型 )控制样式时的差别：当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的.

内联样式表（行内样式表）
    在标签内部，作为一个特殊的属性，css语句相当style属性的属性值
内联样式表的权重是最大的

内部样式表和外部样式表的权重一样，谁写在下面听谁的
如果有相同的属性，权重高会把权重低的覆盖,后写的会把先写的覆盖
不同的属性，会叠加，这也是css中文名叫层叠样式表的原因。
 作用域：内部样式表和外部样式表的作用范围都是整个页面
 而内联的作用范围是当前的元素。