CSS基础-CSS初识

CSS初识

1、CSS介绍

CSS：层叠样式表(Cascading style sheets)

CSS的作用是什么？

给页面中的HTML标签设置样式(美化标签)

2、语法规则

2.1 写在那里？

CSS写在style标签中，style标签一般写在head标签里面，title标签下面

2.2 怎么写？
image-20230512000504724 
选择器 {
 	属性名: 属性值;
}
2.3 CSS 注释
/* CSS注释 */

CSS注释是/* */格式，两个星号包裹着注释内容。

例如:

p {
    /* 给字体设置颜色为红色 */
    color:red;
    /* 字体放大为30px */
    font-size:30px;
}

3、CSS引入方式

3.1 内嵌式

CSS写在html文件中，用style标签包裹

提示：style标签虽然可以写在页面的任意位置，但是通常约定写在head标签中

<head>
    ....
    <style>
        p{
            xxx:xxx;
        }
	</style>
</head>
3.2 外联式

CSS写在一个单独的.css文件中

提示：需要通过link标签在网页中引入

例如(写在head标签里面,一般放在head内部的最底下)：

 <link rel="stylesheet" href="./css/my.css">
3.3 行内式

CSS写在标签的style属性中

例如：

 <p style="font-size: 30px;">
        这是p标签
 </p>
3.4 小结

css常见的三种引入方式有哪些？

  • 内嵌式
  • 外联式
  • 行内式

css常见三种引入方式的特点区别有哪些(书写位置、作用范围、使用场景)?

引入方式 书写位置 作用范围 使用场景
内嵌式 css写在style标签中 当前页面 小案例
外联式 css写在单独的css文件中，通过link标签引入 多个页面 项目中
行内式 css写在标签的style属性中 当前标签 配合js使用

4、扩展

CSS除了以上的3种方法引入，还可以通过@import导入CSS。

导入语法：

<style>
	@import url("css文件路径")
</style>
4.1 关于@import

@import是CSS2.1提出的，因此在老版本的浏览器是不支持的，@import只有在IE5以上的才能识别。

4.2 link和@import的差别

差别1：

  • 本质的差别：link属于XHTML标签，而@import则完全是CSS提供的一种方式

差别2：

  • 加载顺序的差别：当一个页面被加载的时候(就是被浏览者浏览的时候) ，link 引用的 CSS 会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览器@import加载CSS的页面时开始会没有样式(就是闪烁)，网速慢的时候还挺明显。

差别3：

  • 兼容性的差别：前面已经提到过，@import不支持老版本的浏览器，而link标签无此问题

差别4：

  • 使用dom(document object model文档对象模型)控制样式时的差别：当使用JavaScript控制dom去改变样式时，只能使用link标签，因为@import不是dom可以控制的
posted @ 2023-05-15 13:23  travellerα  阅读(8)  评论(0)    收藏  举报