文本节点 - 公会驻地

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>css练习</title>
<link rel="stylesheet" type="text/css" href="css练习.css">
</head>
<body>

<h1>CSS text-align 实例</h1>
<h2>格式测试</h2>
<h3>格式测试</h3>

<p class="date">2015年3月14号</p>
<p class="main">“当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。”</p>
<p><b>注意：</b>重置浏览器窗口大小查看&quot;justify&quot;是如何工作的。</p>

<p>Link to:<a href="http:www.baidu.com">http:www.baidu.com</a></p>

<p class="uppercase">This is some text</p>
<p class="lowercase">This is some text</p>
<p class="capitalize">This is some text</p>


</body>
</html>

@charset "UTF-8";
/* CSS Document */

body {
    /*
    background-image:url("http://c.hiphotos.baidu.com/image/pic/item/b3b7d0a20cf431ad799ccaf94f36acaf2fdd98a0.jpg");
    background-repeat:no-repeat; 
    background-position:right top; 
    margin-right:200px; 
    */
    /*为了简写这些属性的代码，我们可以将这些属性合并在同一个属性中*/
    /*顺序：background-color background-image background-repeat 
    background-attachment background-position*/
    background:#063 url("http://c.hiphotos.baidu.com/image/pic/item/b3b7d0a20cf431ad799ccaf94f36acaf2fdd98a0.jpg") repeat left top;
    margin:200px;
    /*
    background: 简写属性，作用是将背景属性设置在一个声明中。
    background-attachment: 背景图像是否固定或者随着页面的其余部分滚动。
    background-color: 设置元素的背景颜色
    background-image: 把图像设置为背景。
    background-position: 设置背景图像的起始位置。
    background-repeat: 设置背景图像是否及如何重复
    repeat: 背景图像将向垂直和水平方向重复。这是默认
    repeat-x: 只用水平位置会重复背景图像。
    repeat-y: 只用垂直位置会重复背景图像。
    no-repeat: 图片不会重复。
    inherit: 指定background-repea属性设置应该从父元素继承。
    */
}

/*
text-align属性
left:     把文本排列到左边
right:    把文本排列到右边
center:    把文本排列到中间
justify:实现两端对齐文本效果
inherit:规定应该从父元素继承text-align属性的值


*/


h1 {
    color:#666; /*字体颜色*/
    text-align:center; /*对齐方式*/
    text-decoration:overline; /*字上面加线*/
}

h2 {
    text-decoration:line-through; /*字中间加线*/
}

h3 {
    text-decoration:underline; /*字最下部加线*/
}

p.date {
    text-align:right; /*右对齐*/
}

p.mian {
    text-align:justify; /**/
}

p.uppercase {
    text-transform:uppercase;
}

p.lowercase {
    text-transform:lowercase;
}

p.capitalize {
    text-transform:capitalize;
}

a {
    text-decoration:none; /*去掉连接下的下划线*/
}

宽容他人，放过自己。

目录