HTML样式和图像

最新推荐文章于 2024-01-15 00:46:18 发布

王阿文要努力啊

最新推荐文章于 2024-01-15 00:46:18 发布

阅读量214

点赞数

本文链接：https://blog.csdn.net/WangaWen1229/article/details/107402653

版权

在这里插入图片描述
1.内联样式：当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。

<p style="color:blue;margin-left:20px;">这是一个段落。</p>

如上，改变段落的颜色和左外边距。

<body style="background-color:pink;">
<h2 style="background-color:red">我的第一个标题</h2>
<p style="background-color:green;">我的一个段落</p>
</body>

在这里插入图片描述

background-color背景色属性。

<h1 style="font-family:verdana;">我的第一个标题</h1>
<p style="font-family:arial;color:red;font-size:20px;">这是一个段落。</p>

font-family(字体)，font-size(字体大小)，color(字体颜色)

<body>
<h1 style="text-align:center;">我的第一个标题</h1>
<p>这是一个段落</p>
</body>

text-align（文字对齐）:center，文字居中
2.内部样式表
当单个文件需要特别样式时，就可以使用内部样式表。可以在<head>部分通过<style>标签定义内部样式表

<head>
<style type="text/css">
     body{background-color:yellow}
     p{color:bule}
</style>
</head>

3.外部样式表
当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。可通过更改一个文件来该表整个站点的外观。

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

4.样式标签
<style>:定义文本样式
<link>:定义资源引用地址
5.图像
<img>是空标签，即只包含属性，没有闭合标签。
alt属性是用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。
在浏览器无法载入图像时，替换文本属性告诉读者他们失去的信息。此时。浏览器将显示这个替代性的文本而不是图像。
height(高度)与width(宽度)属性用于设置图像的高度和宽度。

<img src="url" alt="some_text">

url指存储图像的位置。alt

<img border="0" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1594890896369&di=c32dc708a45eaae39fed1e4738cb473e&imgtype=0&src=http%3A%2F%2Fp0.ifengimg.com%2Fpmop%2F2018%2F0910%2FA13AFF25F3140C3AF6E4A56B1C7B9546474FBCC6_size65_w440_h609.jpeg" alt="Pulpit rock" width="304" height="228">

<map>定义图像地图
<area>定义图像地图中的可点击区域