标签：总结 样式 初学 link css import 选择器 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可以控制的。
标签：总结,样式,初学,link,css,import,选择器,CSS 来源： https://blog.csdn.net/TKY666/article/details/123226758
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。