您的位置：首页 > Web前端 > CSS

HTML CSS基本语法

2017-04-10 02:36 375 查看

HTML CSS基本语法

本文由 Luzhuo 编写,转发请保留该信息.

原文: 
http://blog.csdn.net/rozol/article/details/69941527


主要用于爬虫而写的html基本语法

CSS页面效果

HTML

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

<!-- style 行内样式表(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>


CSS

/* 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;
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  css html 爬虫
相关文章推荐
新的分享
章节导航