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.伪类和伪元素
用于定义元素的某种特定状态或位置。