Java学习总结--044 CSS概述

CSS
1.1 CSS是什么？
CSS指层叠样式表（Cascading Style Sheets）
样式定义如何显示HTML元素
1）样式通常存储在样式表【.CSS文件、CSS区域】中；
2）把样式添加到HTML4.0中，是为了解决内容与表现分离的问题；
3）外部样式表可以极大提高工作效率；
4）外部样式表通常存储在CSS文件中；
5）多个样式定义可层叠为一；

1.2 CSS作用
1）样式表解决了HTML的内容与表现分离；
2）使用样式表极大的提高了工作效率；

1.3 CSS书写规则
本语法
1）CSS规则主要由两部分组成a.选择器 b.一条或多条属性声明；
2）选择器主要作用是为了确定需要改变样式的HTML元素；
3）每一条声明由一个属性和一个值组成，使用花括号来包围声明，属性与值之间使用冒号（：）分开；
4）

书写注意事项
1.如果值为若干单词，则要给值加引号；
2.多个声明之间使用分号（；）分开；
3.CSS对大小写不敏感，如果涉及到与HTML文档一起使用时，class与id名称对大小写敏感；

1.4 导入CSS方式
第一种：内联样式表
1）要使用内联样式，需要在相关的标签内使用样式（style)属性。style属性可以包含任何CSS属性；
2）例如：

3）注意：慎用这种方式，它将内容与显示混合在一起，损失了样式表的优势；
4）一般情况下，这种方式只有在一个标签上只应用一次样式时才会使用；

第二种 内部样式表
1）可以使用

第三种：外部样式表
1）如果想要在多个页面使用同一个样式表，可以使用外部样式表来导入；
2）可以在html页面上使用标签来导入外部样式表；
3）例如：

第四种：@import导入
1）这种方式也是外部导入

优先级问题
内联样式表 > 内部样式表 > 外部样式表

1.5 CSS选择器
1）CSS选择器主要是用于选择需要添加样式的html元素；
2）对于CSS来说，它的选择器有很多，我们主要介绍一下几种：
Id选择器
Id选择器使用#引入，它引入的是id属性中的值。
HTML标签：id是可以重复；

类选择器
类选择器使用时，需要在类名前面加一个（.）

伪类
1.CSS伪类用于向某些选择器添加特殊效果；
2.下面介绍一下锚伪类；
在支持CSS的浏览器中，链接的不同状态都可以不同的方式显示；
这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。


层级选择器

1.6 CSS属性
字体
A)CSS字体属性定义文本的字体系列，大小，加粗，风格和变形；
B)常用属性：
Font：简写属性，作用是把所有针对字体的属性设置在一个声明中；
Font-family:定义字体系列；
Font-size:定义字体的尺寸；
Font-style:定义字体风格；

文本
1.CSS文本属性可定义文本的外观。通过文本属性，可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进，等等。
2.常用属性：
A)Color：定义文本颜色；
B)text-align：定义文本对齐方式；
C)Letter-spacing： 定义字符间隔；

背景
1.CSS允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果。CSS在这方面的能力远远在HTML之上。
2.常用属性：
A)Background: 简写属性，作用是将背景属性设置在一个声明中；
B)Background-color: 定义背景颜色；
C)Background-image: 定义背景图片；
D)Background-position: 定义背景图片的起始位置；
E)Background-repeat: 定义背景图片是否及如何重复；

尺寸
1.CSS尺寸属性允许你控制元素的高度和宽度；
2.常用属性：
Width： 设置元素的宽度；
Height： 设置元素的高度；

列表

1. CSS列表属性允许你放置、改变列表项的标志，或者将图像作为列表项标志；
2. 常用属性：
   List-style: 简写属性。用于把所有用于列表的属性设置于一个声明中；
   List-style-image: 定义列表项标志为图像；
   List-style-position：定义列表项标志的位置；
   List-style-type: 定义列表项标志的类型。
   
   表格
   1.CSS表格属性可以帮助极大的改善表格的外观；
   2.常用属性：
   Border-collapse: 定义是否把表格边框合并为单一的边框；
   Border-spacing: 定义分隔单元格边框的距离；
   Caption-side: 定义表格标题的位置；
   
   轮廓
   1.轮廓是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用；
   2.CSS outline属性规定元素轮廓的样式、颜色和宽度；
   3.常用属性：
   Outline：在一个声明中设置所有的轮廓属性；
   Outline-color: 定义轮廓的颜色；
   Outline-style: 定义轮廓的样式；
   Outline-width: 定义轮廓的宽度；
   

定位
1.CSS定位属性允许你对元素进行定位；
2.定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置；
3.CSS有三种基本的定位机制：普通流、浮动和绝对定位。
4.常用属性：
Position: 把元素放置到一个静态的，相对的，绝对的，或固定的位置中；
Top: 定义了定位元素的上外边距边界与其包含块上边界之间的偏移量；
Right：定义了定位元素右外边距边界与其包含块右边界之间的偏移；
Left：定义了定位元素左外边距边界与其包含块左边界之间的偏移；
Bottom：定义了定位元素下外边距边界与其包含块下边界之间的偏移；

相对定位：如对一个元素进行相对定位，它将出现在它所在的位置上。然后通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。

绝对布局

浮动
常用属性：
Clear: 设置一个元素的侧面是否允许其他的浮动元素；
Float: 定义元素在哪个方向浮动；
Cursor: 当指向某元素之上时显示的指针类型；
Display: 定义是否及如何显示元素；
Visibility: 定义元素是否可见或不可见；