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

HTML学习笔记（三）

2017-02-09 13:34 225 查看

一引入样式有三种常用方法
外部引入

内部引入包起来在这里面编写样式

行内样式

二常用样式
背景

三看着更舒服的hello world

一、引入样式有三种常用方法，

1.外部引入：

<link href="css/style.css" rel="stylesheet" type="text/css">

href指向.css文件位置。

2.内部引入包起来，在这里面编写样式：

<style type="text/css">
*{
padding: 0;margin: 0
}
</style>

*表示所有元素都应用该样式

3.行内样式。

<div  style="color:#333";margin:auto;><div>

二、常用样式

1.背景

可以使用 background-color 属性为元素设置背景色。

把body的背景设置为黑色：

<body style="background-color:black;"></body>

等价于

<body style="background-color:#000;"></body>

background-img用于设置元素背景图片，例如为div设置一个背景图片

<div style="background-img:url();">

url里面的值为图片的相对位置。

如果需要在页面上对背景图像进行平铺，可以使用background-repeat属性，也可以利用 background-position属性改变图像在背景中的位置。

例如，将div中的背景图片居中显示：

<div style="background-repeat:background-repeat:no-repeat;background-position:center;">

利用background-size:cover；可以实现背景图片的拉伸。

如果想让背景图片不随文档滚动而滚动，可以用background-attachment:fixed

2.文本

元素的文本熟悉，是对元素内容的文本进行修饰。

例如

p {
color:red;
font-size:14px;
text-indent:2em;
text-align:center;
text-decoration:underline；

}

该样式采用元素选择器，所有段落文字进行修饰，color规定文字颜色，font-size规定文字大小，text-indent设置首行缩进，text-align设置文字对齐方式，text-decoration规定文字修饰例如下划线。

3.位置与大小

CSS中的通过尺寸属性控制元素大小：

height 设置元素的高度。

line-height 设置行高。

max-height 设置元素的最大高度。

max-width 设置元素的最大宽度。

min-height 设置元素的最小高度。

min-width 设置元素的最小宽度。

width 设置元素的宽度。

通过位置属性控制元素位置：

position 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。

top 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。

right 定义了定位元素右外边距边界与其包含块右边界之间的偏移。

bottom 定义了定位元素下外边距边界与其包含块下边界之间的偏移。

left 定义了定位元素左外边距边界与其包含块左边界之间的偏移

position属性常用属性值：

absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位，元素所占空间会关闭。

fixed 生成绝对定位的元素，相对于浏览器窗口进行定位，元素所占空间会关闭。

relative 生成相对定位的元素，相对于其正常位置进行定位。

4.框模型

height与width设置的是元素内容的大小

padding设置的是元素内容到边框的距离，称为内边距。

margin设置的是元素其他元素距离该元素边框的最小值，称为外边距。

通常将margin设置为auto来实现元素的水平居中。

三、看着更舒服的hello world

源码如下：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<title>Hello world</title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="style/style.css" />
<script src="js/jquery-3.1.1.min.js"></script>
<style type="text/css">
p{
border-bottom-style:solid;
border-bottom-color:black;
border-bottom-width:1px;
padding-bottom:20px;
text-indent:2em;
line-height:1.4em;
}
.hide{
display:none;
}
</style>
</head>
<body>
<div style="margin:auto;width:800px;">
<h1>Hello World</h1>
<p>Hello World ，中文意思：你好，世界。世界上的第一个程序就是Hello World，由Brian Kernighan创作。</p>
<h3>Hello World起源</h3>
<p>“Hello, world"程序是指在计算机屏幕上输出“Hello,world”这行字符串的计算机程序，“hello, world”的中文意思是“世界，你好”。这个例程在Brian Kernighan 和Dennis M. Ritchie合著的《The C Programme Language》使用而广泛流行。因为它的简洁，实用，并包含了一个该版本的C程序首次出现在1974年Brian Kernighan所撰写的《Programming in C: A Tutorial》<br>
<!-- ‘../’表示回到上一层文件夹，在这里等效于D:/HTML学习笔记/ -->
<img src="../image/img2.jpg" alt="helloworld" /></p>
<h3>最初的Hello World</h3>
<p>最初的"hello, world"打印内容有个标准，即全小写，有逗号，逗号后空一格，且无感叹号。不过沿用至今，完全遵循传统标准形式的反而很少出现。</p>
<img src="" alt="这张图片不能正常显示" class="hide" />

</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航