第一讲 css语法、文本（01）

小欣不会输

已于 2022-03-06 20:09:38 修改

阅读量435

点赞数 1

文章标签： css css3 前端

于 2022-03-05 11:58:27 首次发布

本文链接：https://blog.csdn.net/wx112728/article/details/123268623

版权

同学们，HTML学完了接下来我们来学习CSS，CSS是对HTML的美化。虽然看着复杂，但是学起来并不难，当学会之后我们就可以设计一些小网页了。那就和我一起学习吧！

一、css解释

css

层叠样式(Cascading Style Sheets)

优点：

1.使HTML专注于网页的内容，css专注于网页的表现

2.提供了丰富的格式化功能

3.可以针对各种可视化浏览器（主要有显示器、打印机、PDA等）来设置不同的样式

css与浏览器

并不是所有的css的样式都被浏览器支持

不同的浏览器对css的实现有细微的不同，与要特别注意

二、引入css样式

1.行内样式

直接使用标记的style属性

执行结果：

2、内嵌样式

在html里的<head></head>里用<style></style>标记，将样式写在<style>标记内。

注意<style>标记要指定type属性为text/css

执行结果：

3、链接样式（外联式）

将css写入单独的一个文件中，注意该文件的文件夹扩展名为：css

在html文档中使用<link>标记引入css文件

<link>标记要指定两个属性：type和rel；

其中type="text/css"可以省略 rel是relationship译为关系

stylesheet译为样式表

执行结果：

4、导入样式

使用@import指令将css文件中的css样式导入不同的地方

导入式的结果和直接书写是同样的结果

导入式可以共享样式代码

可以在内嵌式里使用导入，也可以在css文件中使用

导入式的使用方法

我们需要在文件下建立一个css文件，把代码写在css文件中然后在html文件引入：

执行结果：

五、优先级

当三种样式同时用时
不同部分没有先后之分
相同部分行内样式第一显示
最后内嵌式和外联式谁距离div近则先显示谁
如同就近原则

六、link与@import的区别

两者都是外部引用 CSS 的方式，但是存在一定的区别：

1：link是标签   @import是指令
           link标签除了可以加载css外，还可以做很多其他事件；比如：定义RSS，定义rel连接属性
2.输入方式不同
               @import 是输入在<style></style>里
               link 则是输入在style之外
3.加载顺序不同
           link引用的css会同时被加载；
           @import引用会等到页面全部被下载完再被加载，所以有时候浏览@import加载css页面时开始没有样式。
4.兼容性
           @import是css2.1提出；浏览器IE5以上的版本才能识别。link没有兼容性问题。
5.使用dom控制样式的差别
           当使用JavaScript控制dom区改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。

七、src与href的区别

1.请求资源类型不同

href用来建立当前元素和文档之间的链接，常用的有：link a。

在请求src资源时会将其指向的资源下载并应用带文档中，常用的有：script img iframe；

2.作用效果不同

href用于在当前文档和引用资源之间确立联系；

src用于替换当前内容；

3.浏览器解析方式不同

若在文档中添加href，浏览器会识别该文档未css，就会并行下载资源并且不会停止对当前稳当的处理。这也是为什么建议使用link方式加载css，而不是使用@import方式。

当浏览器解析到src，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等，也如此。类似于将所指定资源应用到当前内容。这也是为什么建议把js脚本放在底部而不是头部的原因。