HTML CSS基本语法

本文由 Luzhuo 编写,转发请保留该信息.
原文: http://blog.csdn.net/rozol/article/details/69941527

主要用于爬虫而写的html基本语法
CSS页面效果

html">HTML

html hljs "><!DOCTYPE HTML>
<html>
    <head>
        <title>CSS</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <!-- link:链接外部文件 (html" title=css>css方式3)-->
        <link rel="stylesheet" type="text/html" title=css>css" href="style.html" title=css>css" />
        <!-- 内部样式表(html" title=css>css方式2) -->
        <style>html" title=css>css">
            body {background-color: #123456; color: black}
            h1 {font: 18pt arial bold;}
        </style>
    </head>

    <!-- style 行内样式表(html" title=css>css方式1)-->
    <body style="background-color: #123456;">
        <p>CSS</p>
        <a href="Readme.html" target="_blank" >打开网页</a>
        <!-- class 为元素分类 -->
        <a href="Readme.html" target="_blank" class="abc">打开网页</a>
        <!-- id 为元素标识 -->
        <a href="Readme.html" target="_blank" id="a1">打开网页</a>
        <!-- span用来组织元素,本身不会添加任何东西 -->
        <p>颜色:<span class="c1">红色</span>/<span class="c2">蓝色</spam>/<span id="c3">绿色</span></p>
        <!-- div用来组织多个元素 -->
        <div id="d1">
        <p>CSS</p><p>CSS</p><p>CSS</p><p>CSS</p><p>CSS</p><p>CSS</p><p>CSS</p><p>CSS</p><p>CSS</p><p>CSS</p><p>CSS</p><p>CSS</p><p>CSS</p><p>CSS</p><p>CSS</p><p>CSS</p><p>CSS</p><p>CSS</p><p>CSS</p><p>CSS</p><p>CSS</p><p>CSS</p><p>CSS</p><p>CSS</p><p>CSS</p><p>CSS</p><p>CSS</p><p>CSS</p><p>CSS</p><p>CSS</p><p>CSS</p><p>CSS</p><p>CSS</p><p>CSS</p><p>CSS</p><p>CSS</p>
        </div>
    </body>
</html>

html" title=css>css">CSS

html" title=css>css hljs ">/* body:选择器 background-color:属性 #654321:值 */
/* 修改 body 标签的 background-color 属性改为 #654321 */
body {
    /* 背景颜色 */
    background-color: #654321;
    /* 背景图片 */
    background-image: url("./logo.jpg");
    /* repeat:全屏铺满(默认) / repeat-x:水平重复 / repeat-y:垂直排序 / no-repeat:不重复 */
    background-repeat: repeat-x;
    /* 滚动模式 scroll:滚动; / fixed:不滚动 */
    background-attachment: fixed;
    /* 放置位置 0% 0% / top left right bottom / 100px 100px */
    background-position: 10% 10%;

    /* 综合上述所有属性(有顺序要求) */
    background: #654321 url("./logo.jpg") repeat-x fixed 10% 10%;
}
/* 所有h1的颜色*/
p {
    /* 字体颜色 */
    color: #ffffff;
    /* 字体样式 font-family:字体族类 serif:族类名称*/
    font-family: "Times New Roman", serif;
    /* 字体样式 italic:斜体 */
    font-style: italic;
    /* 大小写字体 */
    font-variant: small-caps;
    /* bold:加粗 */
    font-weight: bold;
    /* 字体大小 */
    font-size: 30px;
}

p {
    /* 缩进 */
    text-indent: 10px;
    /* 对齐 left / right / center / justify:自适应; */
    text-align: left;
    /* 文本装饰 underline(下划线) / overline(上划线) / line-through(删除线) */
    text-decoration: line-through;
    /* 字体间距 */
    letter-spacing: 3px;
    /* 文本转换 uppercase(全部大写) / capitalize(首字母大写) */ 
    text-transform: uppercase;
}

/* 链接 link:未访问 / visited:已访问 / active:鼠标按住 / hover:鼠标悬停 */
a:link { color: blue; text-decoration: none; }
/* 划线 text-decoration: none / overline / line-through / underline / blink */
a:visited { color: blue; text-decoration: none; }

/* a标签写有 class="abc" 元素分类 */
a.abc {
    color: red; text-decoration: none;
}
/* a标签写有 id="a1" 元素标识 */
#a1 {
    color: #123456;
}

/* 在span里用class/id分类元素 */
.c1 { color: red; } /* class */
.c2 { color: blue; }
#c3 { color: green; } /* id */
/* 在div里用id分类元素 */
#d1 { /* 在div里用class分类元素 写法为 div.d1 {}*/
    background-color: #112233;
    /* 边距 margin(外边距) / border(边框) / padding(内边距) / contenu(内容) */
    margin-left: 100px;
    /* border(边框): width / color / style */
    border-width: 10px;
    border-color: #ffffff;
    border-style: dotted;
}