CSS 入门 笔记

来源:互联网 发布:道路工程预算软件 编辑:程序博客网 时间:2024/04/30 21:08

一、布局属性
display
1、block:元素显示在下一行,作为一个新段落。
2、list-item:元素显示在下一行,前面与列表元素标记。
3、inline:元素显示在当前段落内。
4、none:元素不显示。
margin和padding属性——用于添加元素周围的间距。
1、margin(边距)
说明:margin指的是在元素”外面”添加空隙,是”相对于“另外一个元素来进行添加空隙的。
2、padding(填充)
说明:padding指的是由元素”内部“向外部扩充空间,例如padding-left:20px,意思就是在当前元素的大小上向右增加20px大小。
align和float属性——用于将元素相对其他内容放置。
1、align(对齐)
a)text-align(水平对齐)
b)vertical-align(垂直对齐)
c)text-indent(水平缩进)
举例:对图像设定垂直方向中间对齐,那么图像周围的文字就会垂直对齐它。也就是说当图像很大而只有一段文字的话,文字就会在图像的垂直方向的中间显示。
2、float(浮动)
说明:float只有left和right,当设置元素向一边浮动时,元素会尽可能的向设定边靠拢,除非遇到其它元素,否则会一直向浏览器边界靠拢。
而且随着浏览器大小的改变,元素也会跟着浮动,当第一排不够时移向第二排,且无需管display,但是对滚动条的改变无效,想要实现对滚动条有效果请使用背景图片,并且设置background-attachment : scroll;以及用background-position-x(y)指定位置 。
min-width:可以设定最小宽度,当低于这个宽度的时候float无效。
定位
relative(相对定位)
说明:相对于父级元素定位。(可用z-index调节显示顺序)
abslution(绝对定位)
说明:相对于其它元素(包括父级元素)定位。
z-index(显示层级)
说明:可以控制元素的显示顺序,但是被设置的元素一定要设定abslution这种可以用z-index调节显示顺序的定位方式,不设定无效。
二、格式化属性
文字
字体风格
1.font-family:字体集
2.font-size:字体大小
3.font-style:字体样式
4.font-weight:字体粗细
5.line-height:设置文本行的高度
使用一下技术管理文本流
1.float:决定文本如何沿元素绕排。(也就是说你设置了这个元素那么他周围的文字就得按设定的来绕排)
2.clear:禁止元素沿元素绕排。
3.overflow:在元素太小而不能包含所有文本时控制文本的溢出方式。
图像
图像属性
1.alt 图像替换文本,当图像未能加载成功显示的文本。
图像映射
说明:可以将一张图分割成很多份,然后给每一份设定要访问的网址。一般情况下不使用,都是将很多张图合成一张大的,然后每张图设定要访问的网址。

伪类    说明:是一种描述应用到某种情况的元素样式类,比如用户与该元素互动的各种状态。    例如<a>的伪类有如下:        a:link 描述未被访问过的超链接样式。        a:visited 描述访问过并且存在于浏览器内存的超链接样式。        a:hove 描述用户鼠标悬停下(单击之前)的超链接样式。        a:active 描述被点击但未被释放时超链接的样式。    示例代码:        <style type="text/css">        a:hover{            color:#CCCCCC        }        </style>列表
0 0
原创粉丝点击