当text-align设置为"justify",每一行被展开为宽度相等,左,右外边距是对齐(如杂志和报纸)。
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
text-decoration属性主要是用来删除链接的下划线:
a {text-decoration:none;} //删除连接的下划线
文本转换属性是用来指定在一个文本中的大写和小写字母。
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
文本缩进属性是用来指定文本的第一行的缩进。
p {text-indent:50px;}
font-family 属性设置文本的字体系列。
font-size 属性设置文本的大小。
如果你不指定一个字体的大小,默认大小和普通文本段落一样,是16像素(16px=1em)。
h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}
为了避免Internet Explorer 中无法调整文本的问题,许多开发者使用 em 单位代替像素。
在所有浏览器的解决方案中,设置 <body>元素的默认字体大小的是百分比:
body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}
四个链接状态
a:link - 正常,未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻
a:hover 必须跟在 a:link 和 a:visited后面
a:active 必须跟在 a:hover后面
指定CSS表格边框,使用border属性。
table, th, td
{
border: 1px solid black;
}
text-align属性设置水平对齐方式,像左,右,或中心:
td
{
text-align:right;
}
如果在表的内容中控制空格之间的边框,应使用td和th元素的填充属性:
td
{
padding:15px;
}
如果在表的内容中控制空格之间的边框,应使用td和th元素的填充属性:
CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。
Margin - 清除边框区域。Margin没有背景颜色,它是完全透明
Border - 边框周围的填充和内容。边框是受到盒子的背景颜色影响
Padding - 清除内容周围的区域。会受到框中填充的背景颜色影响
Content - 盒子的内容,显示文本和图像
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
————————————————————————————————————
---border-style属性用来定义边框的样式
<style>
p.none {border-style:none;}
p.dotted {border-style:dotted;}
p.dashed {border-style:dashed;}
p.solid {border-style:solid;}
p.double {border-style:double;}
p.groove {border-style:groove;}
p.ridge {border-style:ridge;}
p.inset {border-style:inset;}
p.outset {border-style:outset;}
p.hidden {border-style:hidden;}
</style>
————————————————————————————————
通过 border-width 属性为边框指定宽度
border-style:solid;
border-width:5px;
border-color属性用于设置边框的颜色。可以设置的颜色:
border-color单独使用是不起作用的,必须得先使用border-style来设置边框样式。
border-style:solid;
border-color:#98bf21;
------------------
-dotted :有点的
------------------
border-style属性可以有1-4个值:
border-style:dotted solid double dashed;
上边框是 dotted
右边框是 solid
底边框是 double
左边框是 dashed
border-style:dotted solid double;
上边框是 dotted
右边框是 solid
底边框是 double
border-style:dotted solid;
上、底边框是 dotted
右、左边框是 solid
border-style:dotted;
四面边框是 dotted
不仅可以为div设置边框,也可以为元素设置边框
p {
border:5px solid red;
}
设置边框介绍 http://www.w3cschool.cc/css/css-border.html
——————————————————————————————
轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。
——————————————————————————————————————
margin清除周围的元素(外边框)的区域。margin没有背景颜色,是完全透明的
margin可以单独改变元素的上,下,左,右边距。也可以一次改变所有的属性。
auto 设置浏览器边距。这样做的结果会依赖于浏览器
length 定义一个固定的margin(使用像素,pt,em等)
% 定义一个使用百分比的边距
Margin可以使用负值,重叠的内容。
bottom Margin 底部
margin属性可以有一到四个值。/p>
margin:25px 50px 75px 100px;
上边距为25px
右边距为50px
下边距为75px
左边距为100px
margin:25px 50px 75px;
上边距为25px
左右边距为50px
下边距为75px
margin:25px 50px;
上下边距为25px
左右边距为50px
margin:25px;
所有的4个边距都是25px
当元素的 Padding(填充)(内边距)被清除时,所"释放"的区域将会受到元素背景颜色的填充。
单独使用填充属性可以改变上下左右的填充。缩写填充属性也可以使用,一旦改变一切都改变。
length 定义一个固定的填充
% 使用百分比定义一个填充
Padding属性,可以有一到四个值。
上填充为25px
右填充为50px
下填充为75px
左填充为100px
padding:25px 50px 75px;
上填充为25px
左右填充为50px
下填充为75px
padding:25px 50px;
上下填充为25px
左右填充为50px
padding:25px;
所有的填充都是25px
——————————————————————————————————
分组选择器 每个选择器用逗号分隔.
h1,h2,p{
color:green;
}
CSS 尺寸 http://www.w3cschool.cc/css/css-dimension.html
隐藏元素 - display:none或visibility:hidden
visibility:hidden可以让您隐藏某个元素,但它仍然需要像以前一样的空间。该元素将被隐藏,但仍然会影响布局。
display:没有隐藏的元素,它不会占用任何空间。元素将被隐藏,但页面会显示:
块元素是一个元素,占用了全部宽度,在前后都是换行符。
<h1>
<p>
<div>
内联元素只需要必要的宽度,不强制换行。
<span>
<a>
可以改变一个元素的显示 把内联元素变成块元素
Positioning(定位)
static 静态定位的元素不会受到top, bottom, left, right影响。
fixed 元素的位置相对于浏览器窗口是固定位置,即使窗口滚动他也不会移动 ( Fixed 定位在 IE7 和 IE8 下需要描述 !DOCTYPE 才能支持.)Fixed定 位使元素的位置与文档流无关,因此不占据空间。Fixed定位的元素和其他元素重叠。
relativ 相对定位元素的定位是相对其正常位置。
absolute 绝对定位的元素的位置相对于最近的已定位父元素。如果元素没有已定位的父元素,那么它的位置相对于<html>:
Absolutely定位使元素的位置与文档流无关,因此不占据空间。
Absolutely定位的元素和其他元素重叠。
overflow:scroll; div 滚动条
CSS的Float(浮动),元素可以围绕其他元素向左或向右被推动。
Float(浮动),往往是用于图像,但它在布局时一样非常有用。
元素的水平方向浮动,那就意味着元素只能向左或者向右移动/浮动
一个浮动元素会尽量向左或右。通常,这意味着尽所有的可能在所有包含元素的左侧或右侧的。
浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响。
如果图像是右浮动,下面的文本流将环绕在它左边:
http://www.w3cschool.cc/css/css-float.html
元素浮动之后,周围的元素会重新排列,为了避免这种情况,使用clear属性
clear属性指定其他元素双方都不能使用元素的浮动功能。
http://www.w3cschool.cc/try/try.php?filename=trycss_float6
使用float创建一个网页页眉、页脚、左边的内容和主要内容。
_____________________________________________________________________________
margin-left:auto;
margin-right:auto;
在IE8中使用margin:auto属性无法正常工作,除非声明 !DOCTYPE
margin属性可任意拆分为左,右页边距设置自动指定,结果都是出现居中元素:
使用position 属性设置元素绝对对齐
注意:绝对定位与文档流无关,所以它们可以覆盖页面上的其它元素。
使用float属性设置元素的左右对齐