【CSS】基础知识点小总结

写在前面：本文资料总结来源于pink老师的前端视频

CSS简介：

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

CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。 [2] 

        Greek_SAN:     用来装饰HTML文本的。

 CSS的超链接样式

• a:hover ——定义鼠标悬停经过a元素的样子。也就是说当鼠标悬停经过该链接的时候的样子，而样子是你自己定义的比如：text-decoration:underline；（经过的时候有下划线）
• a:visted——定义a元素访问后的样子。就是鼠标点击改链接后的效果，比如：color:purple；（点击之后链接颜色变成紫色，意味着你曾经点击过）
• a:link——定义a元素未访问过的样子。就是你能看见的链接它的样子，颜色、大小等等。一般情况不做改正，也就是用的少。
• a:active——点击链接之后的样子。

背景样式: 

• background-image：url(/*我是图片的相对/绝对位置*/)；定义背景图片的地址

• background-repeat：no-repeat （我不要图片重复）；定义背景图片重复的方式（repeat、repeat-x、round、space.....)
• background-position：背景图片的位置
• background-attachment：是否随区块滚动
• background-color：背景图片的颜色

 复合写法：

background:color image repeat attachment position;

eg: background: pink url(./static/images/pink.png) no-repeat fixed center center;

列表样式 list-style-type：

有序

• decimal：阿拉伯数字
• lower-roman：小写罗马数字
• oupper-roman：大写罗马数字
• lower-alpha：小写英文字母
• upper-alpha：大写英文字母

无序

• disc： 实心圆
• circle：空心圆
• square：正方形

 表格样式

• caption-side：表格标题所在的位置顶部top或者底部bottom
• border-collapse：决定表格边框是分开separate还是合并的collapse
• border-spacing:相邻单元格边框之间的距离

图片样式

• float：文字环绕、浮动向左left或者向右right
• vertical-align：对齐方式顶部top或中部middle或基线baseline或底部bottom
• 基础：width宽度 height高度

 文字样式

• font-family：字体类型 。
• font-size：字体大小。
• font-weight：字体粗细。  400px是正常 700px是加粗
• font-style：字体风格。
• color：字体颜色。

 文本样式

• text-indent：首行缩进。
• text-align：文本对齐方式居中center或者朝左left...
• text-decoration：文本修饰线外观。
• text-tranform：允许你旋转，缩放，倾斜或平移给定元素。
• line-height：行高。如果行高是18px字体是14px那么就意味着行与行之间的间距是4px
• letter-spacing：文本字符的间距

 边框样式

• border-width：边框的宽度
• border-style：边框的样式
• border-color：边框的颜色
• 局部样式：border-top/bottom/left/right

盒子模型

• center：内容，可以是文本或图片
• padding：内边距，用于定义内用与边框之间的距离（像素值）
• margin：外边距，用于定义当前元素与其他元素之间的距离（像素值）
• border：边框，用于定义元素的边框

 浮动布局

• float：浮动向左left或者向右right
• clear：清楚浮动向左left或者向右left或者both

 定位布局position

• fixed：固定定位
• relative：相对定位
• absolute：绝对定位
• static：静态定位（默认值）