1 、
css的边框用border来设置 。 可以设置任何html元素的边框的样式 宽度颜色 等等
border: dashed 3px blue ; 直接设置border的样式 ,那么 left rigth bottom top都会自动设置
border-left :dashed 3px blue ; 也可以这样设置
border-left-width：3px 也可以精确设置
border-style :dashed ;设置边框的样式 、
具体看文档。
2、img 标签中的图像可以用 css样式的height 和 width设置样式 。
例 img{height:110px ; width:50% ;}
高度是110px ; 宽度是父标签的一半这里也就是浏览器 的一半锁以这张图片可以自适应窗口的大小 。
text-align不仅仅可以设置文本对齐方式 还可以设置图片的对齐 这里的对齐主要是指水平对齐 ；
virtical-align 设置垂直对齐方式
fileFox浏览器和IE浏览器对于对齐方式的显示效果不尽相同使用的时候应该使用相同的对齐方式。
3、图文混排 float:left;可以使先图文混排 头文字下沉的效果 left左边下沉
right右边下沉
left左边下沉
将图片放在文本前然后设置 float属性的值便可以实现 文字环绕图片的效果也叫图文混排
4、background-image css设置背景图片
如果一张小图片被设置成了html背景图片那么 他将会在x y轴上 粘贴满 ,
我们可以设置css样式来 限制
background-repeat 的属性来设置 图像的平铺方式
repeat : 背景图像在纵向和横向上平铺
no-repeat : 背景图像不平铺
repeat-x : 背景图像在横向上平铺
repeat-y : 背景图像在纵向平铺
background-position:bottom right ; 可以控制 背景图片在html窗口中的位置 。。
background-attachment : scroll | fixed 设置背景图片是固定的还是可以移动的
继承性和覆盖性css 还可以设置绝对位置 相对于左上
img标签后字体会换行显示
利用表格控制文本显示的时候 需要设置水平对齐和 垂直对齐 。
text-align virtical-align
图片和文字有时候可以放在一个 段落中进行处理 对body设置text-align可以使div等对齐
5、指定标题列。标题列将在单元格中居中并以粗体显示 th 表示列标题 caption表示table标题会在表格上居中显示
css设置的背景颜色是针对全部的背景 比如表格 对table设置背景那么就是相对于 全部表格 以及子元素的颜色
border-collapse : separate | collapse 设置表格的边线是分开还是合并成一个线
border-spacing : length || length 设置表格边框之间的距离
我们可以为每个th 和td设置边框来实现内外外部边框
span和div树无意义的标签 p标签换行的时候多一行空白 div没有
6、 对于 a标签设置背景图片 标签最大的height width就是图片的实际尺寸 ,超过无效 。
当在表格中插入图片的时候 表格会自动被撑大
对于只有一行一列的table 来说 对于 table tr td设置样式的效果基本一样
xhtml和html在表格中显示超连接按钮的效果不一样 ,xhtml效果不好 。
7、display:block ; 将一个区域变成一个区块 ,区块就和p 一样 一个区块占一行 。这个区块后面的内容自动到下一行显示
利用这个属性我么可以设置一个区域的显示效果 例如下面
a{
text-decoration:none ;
border-left:13px solid #420000 ;
background-color: #BF0000 ;
color:#FFFFFF ;
font-size:20px ;
width:200px ;
height:30px ;
display:block;
}
padding 可以设置内容和父元素之间的边距
8、 margin 和padding的应用 很多时候一个布局的好坏取决于这两个属性
margin是设置当前元素距离他的外层元素 的边距 设置表格边框 之间的边距的时候用这个 我们需要设置那个元素 就使用那个元素的margin
padding是设置这个元素的内容和 元素内部的边距 适合内容的边距的调整 文字
