css基础知识（笔记1）

css简介

css：层叠样式表，英文全名：cascading style sheets
WEB标准中的表现标准语言，表现在网页中主要对网页信息的显示进行控制，简单的说就是如何修饰网页信息的显示样式。

目前推荐遵循的是w3c发布的css3.0。用来修饰XHTML或者XML等样式文件的计算机语言

1998年5月21由w3c正式推出css2.0.

css语法

表达式

如下

    选择符{属性:属性值;}
    h1{color:red;font-size:16px;}

选择符表示要定义样式的对象，可以是元素本身，也可以是一类元素或者制定名称的元素

说明

1.每个css样式由两部分组成，即选择符和声明，声明又分为属性和属性值
2.属性必须放在花括号里，属性和属性值用冒号隔开
3.每条声明用分号隔开
4.当一个属性有多条属性值的时候，属性值与属性值不分先后顺序
5.在书写样式过程中空格，换行不影响属性显示。

样式的创建

内部样式表

    <style type="text/css">
    /* css语句 */
    </style>

注：使用style标记创建样式时，最好写在<head></head>中。

外部样式表

方式一：外部样式表的创建

    <link rel="stylesheet" href="目标文件路径及文件名全称">

说明：使用link元素导入外部样式表时，需将这个写在头部，即<head></head>中。

1.rel(relation)：用于定义文档关联，表示关联样式表
2.type：定义文档类型；

方式二：外部样式表的导入

    <style type = "text/css">
     @import url('目标文件路径及文件名全称');
     </style>

注：@impront之间没有空格 url和小括号之间也没有空格：必须以分号结尾。

link与@import区别

差别：

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

内联样式

语法

    <div style = "width:500px;height:200px;"></div>

<标签 style = "属性：属性值；"></标签>

样式表的优先级

1.内联样式表的优先级最高
2.内部样式与外部样式的优先级和书写顺序有关，后书写的优先级别高。
3.作用域：内联样式最小，只能用于当前元素，其次是内部样式，只能用于当前HTML，最后是外部样式，可以作用于所有连接的HTML

posted on 2019-10-21 09:02 二十四桥夜月明阅读(120) 评论(0) 收藏举报