CSS学习总结

CSS学习总结

CSS是级联样式表的缩写，它用来将HTML撰写页面的内容在屏幕上呈现，即是用来修饰HTML的元素以及许多方面的布局等等。
一条CSS样式规则由选择器和一条或多条声明组成。选择器是要指定的对象，每条声明由一个属性和值组成。选择器有元素选择器，id选择器和class选择器。其中class最为普遍。用法是：在html定义了class的值，然后便可以在CSS文件中使用class的值，从而来对这个值所对应的元素进行操作。让css对页面生效，一般有三种方法，分别是外部样式表，内部样式表，内联样式。我们最好使用外部样式表，即在css文件中来对html文件中的元素进行操作。css可以更改各种各样的颜色，我们可以在ColorDrop和LOL Corlors中挑选网站配色。css可以用height 和 width 设定元素内容占据的尺寸。常见的尺寸单位有：像数 px，百分比 %等。还可以将text-align属性设置为left, center, right来实现元素中文本的对齐。
CSS中的盒子模型指的是一个 HTML 元素可以看作一个盒子。从内到外，这个盒子是由内容 content, 内边距 padding, 边框 border, 外边距 margin构成的。
Content ：盒子的内容，如文本、图片等
Padding ：填充，也叫内边距，即内容和边框之间的区域
Border ：边框，默认不显示
Margin ：外边距，边框以外与其它元素的区域
我们可以使用position属性来对元素进行定位，可以设置以下的值：静态：static，相对：relative，固定：fixed，绝对：absolute。
static为默认的定位方式，它将按照元素在HTML出现的先后顺序从上到下，从左到右进行元素的安排。
relative将把元素相对于他的静态（正常）位置进行偏移。
fixed将使得元素固定不动，即使你上下左右拖动浏览器的滚动条。
absolute将使元素相对于其最近设置了定位属性（非static）的父元素进行偏移。
当元素内容超过其指定的区域时，我们通过溢出overflow属性来处理这些溢出的部分。
设置float属性可以让元素水平方向上向左或者右移动。
利用opacity可以对元素设置不透明度，值在[0.0～1.0]之间，值越低，透明度越高。一般用于图片。
通过组合选择器，能够更加精确地选择元素来进行修饰。
此外，CSS中还有一些伪类或者伪元素。例如一些需求：鼠标移到某元素上变换背景颜色
超链接访问前后访问后样式不同
离开必须填写的输入框时出现红色的外框进行警示
保证段落的第一行加粗，其它正常
这些可以通过伪类来实现。