CSS学习总结

CSS学习总结

1.什么是CSS

​ CSS是级联样式表（Cascading Style Sheets）的缩写。HTML 用于撰写页面的内容，而 CSS 将决定这些内容该如何在屏幕上呈现（整个页面的布局，元素的位置、距离、颜色、大小、是否显示、是否浮动、透明度，等）。

​ CSS入门简单，精通使用较难。

2.语法

​ 由两个主要部分构成：选择器（需要改变样式的对象）和用{}包裹的一条或多条声明（由属性和值构成，用；分割）。

​ 选择器规则：id选择器前有符号#，class选择器前有符号 . 。

3.如何生效

​ 外部样式表：创建.css文件，写入样式表。

​ 内部样式表：写入style标签内，即

<style>...</style>

​ 内联样式：写在标签内的style属性内，即

<p style="...">
    
</p>

​ 优先级：内联样式>内部或外部样式表>浏览器缺省样式

4.颜色，尺寸，对齐

​ 颜色：部分颜色可使用其英文名称（如：red，yellow），也可以使用颜色的16位rgb值（如：#ff0000纯红，#0000ff纯蓝）。

​ 尺寸：可以使用height和width设置元素内容的尺寸，常见单位有：像素px，百分比%，等。

​ 对齐：设置text-align的属性：left，center，right（缺省为left）。

5.盒子模型

​ 每一个html元素都可以看做一个盒子从内到外，这个盒子是由内容（content，放文本，图片，等）, 内边距 （padding，也叫填充，即内容和边框之间的区域）, 边框（border，默认不显示）, 外边距（margin，边框以外与其他元素之间的区域）构成的。

​ 设置大小时默认顺序为顺时针，即上，右，下，左，如：

<p style="padding:25px 50px 25px 50px">
    ...
</p>

6.定位

​ position属性用于元素定位，设置该属性后才能使用top，bottom，left，right属性，该属性有如下值：

​ 1.static：默认值，所有设置该值的元素顺序排列；

​ 2.relative：相对定位，需要设置方位相对值否则不偏移，此时与static无异；

​ 3.fixed：固定位置，无论页面大小如何变化，都存在于页面相同位置；

​ 4.absolute：绝对定位，相对最近设置的非static定位属性父元素进行偏移。

7.溢出

​ 当元素内容超过其指定区域时，可以通过overflow属性来处理溢出部分，该属性有如下值：

​ 1.visible：默认值，溢出部分显示于区域外，影响页面美观；

​ 2.hidden：裁剪溢出部分且不可见；

​ 3.scroll：裁剪溢出部分，提供滚动条以显示裁剪部分；

​ 4.auto：裁剪溢出部分，视情况提供滚动条。

​ 横竖滚动条可以分别设置，使用overflow-x和overflow-y属性。

8.浮动

​ 在一个区域的容器内，我们可以设置float属性让某个元素水平方向上左右移动，周围元素重新排列，通常使用该方法设置图片与文字的位置。使用clear:both样式可以使周围元素在浮动元素之下方显示。

9.不透明度

​ 可以使用opacity对元素（通常为图片）设置不透明度，它的值在0~1.0之间，值越低，透明度越高。

10.组合选择器

​ 后代选择器：选择某元素的所有相同后代元素，以空格分隔；

​ 子选择器：选择某元素的所有相同直接后代元素，以>分隔。

11.伪类和伪元素

​ 用于定义元素的某种特定状态或位置。