1.设置图片边框:border-width:(粗细) ; border-color:(颜色) ; border-style:(线性) ;
不同的边框可以设置不同的样式,eg:border-left-style、 border-top-width .... solid实线
2.图片的缩放: width height (百分比,像素)
3.图文混排:
文字环绕:float (浮动)
图片与文字对齐方式:水平对齐 text-align: 垂直对齐 vertical-align:
4,。设置背景颜色与图像:background-color: background-image:url(地址)
可以使用background-repeat:来控制平铺,repeat:水平和垂直方向平铺,默认值。
no-repeat:不平铺。
repeat-x:只沿水平方向平铺。
repeat-y:只沿垂直方向平铺。
5.设置背景图像位置:background-position:( 可以设置两个值 eg:left top)
6.设置背景图片固定位置 :background-attchment:fixed; 图片滚动: scroll
补充:去掉无序列表前的小圆点,list-style: none;
7.设置图片边框:border-width:(粗细) ; border-color:(颜色) ; border-style:(线性) ;
不同的边框可以设置不同的样式,eg:border-left-style、 border-top-width .... solid实线
8.图片的缩放: width height (百分比,像素)
9.图文混排:
文字环绕:float (浮动)
图片与文字对齐方式:水平对齐 text-align: 垂直对齐 vertical-align:
10,。设置背景颜色与图像:background-color: background-image:url(地址)
可以使用background-repeat:来控制平铺,repeat:水平和垂直方向平铺,默认值。
no-repeat:不平铺。
repeat-x:只沿水平方向平铺。
repeat-y:只沿垂直方向平铺。
11.设置背景图像位置:background-position:( 可以设置两个值 eg:left top)
12.设置背景图片固定位置 :background-attchment:fixed; 图片滚动: scroll
补充:去掉无序列表前的小圆点,list-style: none;
13.绝对定位:(设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状,它原本所占的空间仍保留。)
position: absolute;
top:..px;
left:..px;
14.相对定位: ( 绝对定位的元素的位置相对于最近的已定位的元素,
如果元素没有已定位的元素,那么它的位置相对于最初的包含块。)position:relative;
top:..px;
left:..px; 3.居中 margin:0 auto 要在div里设置的
css基本属性—表格样式
1.控制表格:cellspacing:列间距 cellpadding:列的内边距
border:表格边框 bgcolor:表格颜色 border-collapse:合并相邻列的边框线
border-spacing : 设置列的间距
设置表格宽度:table-layout:fixed(固定)或者auto(自动)
<thead>:表示表头 <tbody>:表示表内容 <tfoot>:表示表尾 (顺序可以不一样,但一般还是按顺序)
2.设置鼠标经过时表格的样式:a:hover
3.CSS与表单:a:制作像文字一样的按钮
transparent(透明的) 设置背景透明
border:0px; eg:<button id="" type="button" style="background: transparent;border:0px /none">......</button>
b:制作多彩下拉菜单 select option
c:制作只有下划线的输入框 border:0px/none;
border-bottom:1px (粗细) dashed(线性) #000000(颜色); 补充:
1.display:black(行级元素换成块级元素)/ inline(块级元素换成行级元素)
2.CSS3的选择器: :nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素.
n 可以是数字、关键词或公式。
用CSS设置链接与导航菜单 (les9)
1.设置超链接样式: 在HTML中<a> 在CSS中还可以用伪类选择器的四个样式 a:link(未访问) a:visited(已访问)。
a:hover(鼠标移上去) a:active(激活)
2.创建按钮式超链接:text-decoration: none; a:link{ } a:active{ }
(可以设置这些) background: ;
color: ;
border-right: px solid ;
border-bottom: px solid ;
border-left: px solid ;
border-top: px 。
3.制作荧光菜单: 应用无序列表,<div>,a:hover, ( 查 les9)。
4.控制鼠标(cursor)指针 . {cursor: } (查 属性下的其他 CSS 2.0 中文手册)。
5.设置项目列表格式: 可以用有序列表<ol>与无序列表<ul> 用 list-style 来设置。
6.创建简单的导航菜单:
a:垂直排列菜单
很多时候会用上 list-style-type:none 其作用是去掉有序或无序列表前的数字或圆点。
b:横向菜单
实现横竖转换只需设置float:left即可,同时把宽度取消掉。
7.设置图片翻转效果:(指网页中的一个图片,在鼠标指针经过时换成另外一个图片。) 可以用hover.
补充CSS3的属性 rotate(角度)
效果:当鼠标移上去的时候,列表可以转动你设置的角度。(正为顺时针,负为逆时针,若是180度,可以看见字是倒立的。不能清楚的看见转动
,但可以看见字的变化)
transform(转换):rotate( 旋转;循环 使旋转;使转动;使轮流)(-20deg) ; deg:程度(degree)
CSS的盒模型
1.盒子的概念:在CSS中,一个独立的盒子模型content(内容)、border(边框)、padding(内边距)和margin(外边距)4个部分组成。
一个盒子实际所占用的宽度或高度是由“内容+内边距+边框+外边距”组成的。
2.设置边框,内边距,外边距:
a 内边距(padding) padding属性可以设置1、2、3、4个属性值,分别如下:
设置1个属性值时,表示上下左右4个padding均为该值。
设置2个属性值时,前者为上下padding的值,后者为左右padding的值。
设置3个属性值时,第1个位上padding的值,第2个为左右padding的值,第3个为下padding得值。
设置4个属性值时,按照顺时针方向,依次为上、右、下、左padding的值。
b 外边距(margin) margin指的是元素与元素之间的距离 margin and padding 的设置时一样的。
3.盒子之间的关系:
标准的文档流:
<div>标记与<span>标记:div简单而言是一个区块容器标记,即<div>与</div>之间相当于一个容器,
可以容纳段落、标题、表格、图片、乃至章节等各种HTML元素。
二者的区别在于div是块级元素,它包含的元素会自动换行。而span是内嵌元素,不会换行。
4.盒子在标准流中的定位原则:
行内元素之间的水平margin :当两个行内元素紧邻时,它们之间的距离为第1个元素的margin-right加上第2个元素的margin-left。
块级元素之间的垂直margin :当两个块级元素是垂直排列,则情况有所不同。两个块级元素之间的距离不是margin-bottom与margin-top的总和, 而是两者中的较大者。
{背景定位:background-position:center; 为 background-position 属性提供值有很多方法。首先,
可以使用一些关键字:top、bottom、left、right 和 center。通常,这些关键字会成对出现,
不过也不总是这样。还可以使用长度值,如 100px 或 5cm,最后也可以使用百分数值。)
CSS盒子的浮动与定位
1.盒子的浮动(float):在标准流中,一个块级元素在水平方向会自动伸展。在垂直方向就不会并排。
CSS中有一个float属性,默认为none,float属性的值设置为left或right,元素就会向其父元素的左侧或右侧靠紧,
使用clear清楚浮动的影响
clear属性除了可以设置为了left和right之外,还可以设置为both,表示同时清除左右两边的影响。
position属性可以设置4个值:
static:默认值
relative:相对定位 (会相对于它原本的位置,通过偏移指定的距离,到达新的位置。不影响其他盒子)
absolute:绝对定位(其父元素的相对位置 其会影响他后面的盒子 就好像这个盒子被拿走了,
其他排在后面的盒子将填补前面的位置。)
fixed:固定定位(当滚动条滑动式其不会改变位置,会一直在那里。)
2.盒子的定位(static):
盒子的定位(relative) ——left、right、top、bottom这四个属性只有当position属性设置为absolute、relative或fixed时才有效。
3.z-index :z-index属性用于调整定位时重叠块的上下位置,z-index值大的元素位于值小的上方。(默认的z-index值为0,当两个块的z-index值一样时,
将保持原有的高低覆盖关系。)
4.盒子的display属性 :display属性的block和inline两个值,一个代表块级显示,一个代表内嵌显示。display还有个值为none,当设置为none时,
表示该元素将被隐藏。此隐藏表示该元素彻底从页面上消失。
补充
1.height:auto
overflow:hidden 这是个组合件,其作用是:使自动变到与内部方框(或是最高的那个方框)一样高。必须一起使用。
2.定位 (position) 这里的left是指:离左边多远。top是指离上边多远。
相对定位:(position:relative;)其参考点是:本身原来位置的左上角。移动后原来的那个位置会被占据。
绝对定位:(position:absolute;)其参考点是:其父元素有position的左上角。移动后原来的那个位置会空出来。
3.清除(clear) 只影响清除的本身。其意思是:想让哪块动,就在哪块上用clear。通常用clear:left; clear:both;
4.display(显示): display:none; 隐藏,空间留给他们用。
visibility:hidden; 隐藏,位置空出来,仍在那里。
display:inline;此元素会被显示为内联元素,元素前后没有换行符。
display:block; 此元素将显示为块级元素,此元素前后会带有换行符。
5.用iframe实现框架结构:
<iframe src=“URL” width=“x” height=“x” scrolling="[auto|yes|no]" frameborder="0|1“ name="内部框架的名称”></iframe>
<a href="地址" target="内部框架的名称">文字</a>
6.opacity(不透明):值为0到1.
7.a标签的提交方式默认为get.
8.行级元素设置的width,height,是没有用的。