初学CSS知识总结

2022/3/2 23:17:07

编程Tag： 选择器 css 样式 import link 总结初学

本文主要是介绍初学CSS知识总结，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

一.CSS是什么？

CSS(Cascading Style Sheets)，层叠样式表。

二.css引入方式

三种方式优先级：行内样式最大，其余两种最后引入，优先级最高。

1.行内样式

直接在开始标签上加style属性来控制样式
例如：<div style="color:red;">内容</div>

2.内嵌式

所有的样式都写到一个<style></style>内部，该标签放<head></head>内部
例如：<style type="text/css">
选择器{ 样式属性名：属性值 ; }
</style>

3.外链式

所有的样式都写到一个单独的css文件里（文件后缀是 .css）,通过在<head></head>内部用<link rel="stylesheet" href="css文件路径">来引入该css文件

三.选择器

名称示例
通配符选择器（ 权重0.5） *{
   样式属性名 : 属性值 ;
   ...
}

标签选择器 （权重1）
标签名{
   样式属性名 : 属性值 ;
   ...
}
类选择器 （权重10） .类值{
   样式属性名 : 属性值 ;
   ...
}
id选择器 权重100 #id值{
   样式属性名 : 属性值 ;
   ...
}
包含选择器 权重相加选择器E 选择器F{
   样式属性名 : 属性值 ;
   ...
}
分组选择器 选择器E，选择器F,...{ }

四.字体相关样式

1. font-size 字体大小单位px,em

2. font-family 字体系列
设置多个字体时，多个字体间用逗号隔开
如果设置的字体名字里有空格的，用引号引起来

3. font-style 字体风格
值： 1）normal 正常不倾斜
2）italic 斜体
3）oblique 倾斜、

4. font-weight 字体粗细
值: 1) normal 正常不加粗
2）bold 加粗
3）bolder 粗体
4）lighter 细体
5）100-900 9个层次数值越大，字体越粗

5. eline-hight 行高
值： 1）数值+单位
2）数值（无单位）倍数

缩写： font : font-style值 font-weight值 font-size值 / line-height值 font-family值 ;

还未学完此处省略n字

CSS中注释符号是/*与*/

href与src的区别

（1）请求资源类型不同：

href是超文本引用的简写，用来为当前元素和文档之间建立连接，常用的是link、a标签。
src会将指向的资源下载并引用到当前文档中，常用的标签有script，img，iframe标签。

（2）作用的结果不同：

href是为当前文档和引用资源建立联系；
而src是替换当前的元素。

（3）浏览器的解析方式不同

herf引用的资源，浏览器会将其识别为CSS文档，并行下载资源并且不会停止对当前文档的处理。
当浏览器解析到src时，会暂停其他资源的下载和处理，直接将该资源下载，编译，执行完毕，图片和框架也是如此，类似于将所指资源应用到当前内容。

action可以传递表单数据，不是单纯的跳转

使用link与@import引入css文件用法区别

页面导入外部css文件的方法通常有两种，一种在网页中直接link标签加入，另一种在页面中@import引入css文件。两种引入形式如下：

link引入形式：

<link href="styles.css" type="text/css" />

@import引用形式：

<style type="text/css">@import url("styles.css");</style>

1 适用范围不同
@import可以在网页页面中使用，也可以在css文件中使用，用来将多个css文件引入到一个css文件中；而link只能将css文件引入到网页页面中。
2 功能范围不同
link属于XHTML标签，而@import是CSS提供的一种方式，link标签除了可以加载CSS外，还可以定义rel连接属性，定义RSS等，@import就只能加载CSS。
3 加载顺序不同
页面被加载的时候，link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁）。
4 兼容性
由于@import是css2.1提出的，所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。
5 控制样式时的差别
使用link方式可以让用户切换CSS样式.现代浏览器如Firefox,Opera,Safari都支持rel=”alternate stylesheet”属性(即可在浏览器上选择不同的风格),当然你还可以使用Javascript使得IE也支持用户更换样式。
6 使用DOM控制样式时的差别
当使用JavaScript控制DOM去改变样式的时候，只能使用link标签，因为@import不是DOM可以控制的。

这篇关于初学CSS知识总结的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

初学CSS知识总结

一.CSS是什么？

二.css引入方式

三种方式优先级：行内样式最大，其余两种最后引入，优先级最高。

1.行内样式

2.内嵌式

3.外链式

三.选择器

四.字体相关样式

还未学完此处省略n字

CSS中注释符号是/与/

href与src的区别

使用link与@import引入css文件用法区别

相关编程文章

名称	示例
通配符选择器（权重0.5）	*{ 样式属性名 : 属性值 ; ... }
标签选择器（权重1）	标签名{ 样式属性名 : 属性值 ; ... }
类选择器（权重10）	.类值{ 样式属性名 : 属性值 ; ... }
id选择器权重100	#id值{ 样式属性名 : 属性值 ; ... }
包含选择器权重相加	选择器E 选择器F{ 样式属性名 : 属性值 ; ... }
分组选择器	选择器E，选择器F,...{ }