CSS知识点总结

CSS是什么？

        层叠样式表(Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化 。

CSS的引入方式

1.行内样式

/*在开始标签上添加style属性*/
<div style="color:red;">内容</div>

2.内嵌式

 /*把所有样式写到<style></style>内部*/
 <style> 
      选择器{
         属性名:属性值;
     }
 </style>

3.外联式

/*把所有样式写到一个单独css文件内部，然后在html里通过
<link rel="stylesheet" href="">来引入*/
   <link rel="stylesheet" href="css路径"> 

4.导入式

/*通过指令 @import "路径" 或 @import url("路径")来导入css样式*/

拓展 @impor和link的区别：

• 相同点：两者都可以导入外部的css文件
• 不同点：link 是html标签，@impor 是css提供的方式，要写在css文件或者style标签内；
• 两者的加载顺序有区别，一个页面被加载的时候，link引用的css文件会同时被加载，
  @import 引入的文件会等到页面全部下载完后再加载
• 当使用js控制DOM去改变css样式的时候，只能使用link标签，因为imort不能被DOM控制；

src和href的区别

• src引用外部资源 href表示超链接
• src会替换元素本身的内容，而href不会替换元素本身内容
• src会暂停其他资源下载，href不会暂停其他资源下载

CSS语法

选择器{

属性名:属性值;

属性名:属性值;

}

选择器

1. 通配符选择器 权重 0.5 *{}
2. 标签选择器 权重 1 标签名{}
3. 类选择器 权重10 .类名 {}
4. id选择器 权重100 #id值{}
5. 包含选择器 权重相加 选择器E 选择器F {}
6. 群组选择器 选择器E , 选择器F{ }

CSS字体相关样式

font-family 字体系列

多个字体间用逗号隔开 英文字体名称中有空格的，用引号引起来

font-size   字体大小

常用单位 px em

line-height 行高

数值 + 单位;    数值; 倍数   字体大小的倍数

font-style（字体风格）

normal	正常  不倾斜
italic	斜体
oblique	倾斜

font-weight（字体粗细）

normal	正常
bold	粗体
bolder	加粗
lighter	细体

 font的缩写  font: font-style值  font-weight值  font-size值/line-height值  font-famliy值;

文本相关样式

text-align（文本对齐方式）

left	默认  左对齐
right	右对齐
center	居中对齐
justify	两端对齐

text-indent  文本缩进 常用单位  em

text-decoration（文本修饰）

none	无修饰
underline	下划线
line-through	中划线  删除线
overline	上划线

text-transform（英语大小写转换）

uppercase	全大写
lowercase	全小写
capitalize	首字母大写

 etter-spacing  字母与字母之间的距离  汉字与汉字之间的距离
 word-spacing  单词与单词之间的距离

单行省略标记

overflow:hidden	内容溢出隐藏
white-space:nowrap	不换行
text-overflow:ellipsis	文本溢出显示省略标记

overflow （内容溢出处理）

visible	默认  内容溢出部分可见
hidden	内容溢出部分隐藏
scroll	显示滚动条
auto	浏览器自动处理

伪类： 

· :link{ }    未访问状态
  :visited{ }   访问后的状态
  :hover{ }  悬停状态
  :active{ } 激活状态

padding （内边距）

top	上内边距
bottom	下内边距
left	左内边距
right	右内边距

缩写： 

  padding : 值     ||  上、下、左、右内边距一致
  padding : 值1   值2    || 值1:上、下内边距，值2:左、右内边距
  padding : 值1   值2   值3；||   值1:上内边距，值2:左、右内边距，值3:下内边距
  padding : 值1 值2 值3 值4;   ||  值1:上内边距，值2:右内边距，值3:下内边距，值4:左内边距

borde（边框）

width	边框宽度	top	上边框
colo	边框颜色	bottom	下边框
style	边框样式	left	左边框
		right	右边框

缩写：border : border-width值   border-style值   border-color值 ;