html图像标记和css核心基础

最新推荐文章于 2024-03-02 14:23:43 发布

windyghdfh

最新推荐文章于 2024-03-02 14:23:43 发布

阅读量279

点赞数 2

分类专栏： html

本文链接：https://blog.csdn.net/windyghdfh/article/details/103503285

版权

html 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

html图像标记

常用的图像格式—GIF，PNG，JPG
GIF
优点:支持背景透明，支持动画，支持图像渐进、支持无损压缩.
缺点:只有256色，不适宜摄影、印刷或者高质量图片。

JPG
优点:支持上百种颜色，能使用有所压缩，所以图像较小，从浏览者来说图像质量较好
缺点:因支持有损压缩，不适宜打印，不支持动画、背景透明、图像渐进。

PNG
优点:可移植网络图形，是很好的网络图像格式,PNG使用从LZ77派生的无损数据压缩算法，一般应用于JAVA程序、网页或S60程序中，原因是它压缩比高，生成文件体积小。

图像标记

<img src="图像URL" />

该语法中src属性用于指定图像文件的路径和文件名，他是img标记的必需属性。

属性	属性值	描述
src URL		图像的路径
alt	文本	图像不能显示时的替换文本
title	文本	鼠标悬停时显示的内容
width	像素	设置图像的宽度
height	像素	设置图像的高度
border	数字	设置图像边框的宽度
vspace	像素	设置图像顶部和底部的空白（垂直边距）
hspace	像素	设置图像左侧和右侧的空白（水平边距）
align	left	将图像对齐到左边
	right	将图像对齐到右边
	top	将图像的顶端和文本的第一行文字对齐，其他文字居图像下方
	middle	将图像的水平中线和文本的第一行文字对齐，其他文字居图像下方
	bottom	将图像的底部和文本的第一行文字对齐，其他文字居图像下方

CSS核心基础

CSS样式规则
1.行内式：在标记的style属性中设定CSS样式，这种方式本质上没有体现出CSS的优势，因此不推荐使用。
2. 嵌入式：对页面中的各种元素的设置集中在<head></head>之间。
3. 导入式和链接式：目的都是将一个独立的CSS文件引入HTML文件中。链接式使用HTML的标记引入外部CSS文件
基本CSS选择器
1 标记选择器

选择器包含：选择器本身、属性和值。

如 h1{ color:red,font-size:12px;}.

2 类别选择器

类别选择器的名称由用户自定义，属性和值跟标记选择器一样，也必须符合CSS规范。

如 .class{color:green;}
3 ID选择器

ID选择器只能在HTML页面中使用一次，针对性更强。

CSS文本外观属性
1文本颜色

颜色属性被用来设置文字的颜色。

颜色是通过CSS最经常的指定：

十六进制值 - 如: ＃FF0000
一个RGB值 - 如: RGB(255,0,0)
颜色的名称 - 如: red
CSS文本外观属性
1文本颜色
颜色属性被用来设置文字的颜色。
颜色是通过CSS最经常的指定：
十六进制值 - 如: ＃FF0000
一个RGB值 - 如: RGB(255,0,0)
颜色的名称 - 如: red
例如：
body {color:red;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}

2文本的对齐方式
文本排列属性是用来设置文本的水平对齐方式。
文本可居中或对齐到左或右,两端对齐.
例如：
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}

3 文本修饰
text-decoration 属性用来设置或删除文本的装饰。
从设计的角度看 text-decoration属性主要是用来删除链接的下划线：
例如：
a {text-decoration:none;}

4 文本转换
文本转换属性是用来指定在一个文本中的大写和小写字母。
可用于所有字句变成大写或小写字母，或每个单词的首字母大写。
例如：
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}

5 文本缩进
文本缩进属性是用来指定文本的第一行的缩进。
例如：
p {text-indent:50px;}·

作业

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>小绿和小蓝</title>
		<style type="text/css">
			h2 {
				font-weight: bold;
			}

			#bold {
				font-weight: bold;
			}
		</style>
	</head>
	<body>
		<h1 align="center">
			<font size="7" color="burlywood">小绿</font>
			<font size="5" color="burlywood">和</font>
			<font size="7" color="burlywood">小蓝</font>
		</h1>
		<img src="xj2/gab.jpg" alt="小绿和小蓝" title="小绿和小蓝" align="left" hspace="20" height="400">
		<p>作者：Ocarina </p>
		<h2>漫画围绕小绿，小蓝讲述了生活中杂七杂八的小故事。</h2>
		<p>&nbsp;&nbsp;&nbsp;&nbsp;目前漫画分为《演员篇》、《机器人篇》、《魔法少女篇》、《魔王篇》以及其他各不同系列，其中长短不一，并且世界观各自独立。</p>
		<p>&nbsp;&nbsp;&nbsp;&nbsp;《机器人篇》从第90话《机器人1-诞生》开始连载，剧情独立于其它各话(部分可视为《演员篇》)且连续。《演员篇》中，小绿和小蓝都是专业演员，并负责出演编剧(笛子)所写的剧本(《演员篇》中各话的正篇部分)。《演员篇》中部分话后面有拍摄花絮，可以在这里看出《演员篇》中小绿和小蓝的真实关系与性格。《魔法少女篇》的主角则是小亚麻，讲述了小亚麻成为魔法少女的各种经历。《魔王篇》的背景是游戏世界，小绿和小蓝分别成为了魔王和骑士团团长，在小绿与小蓝的对话、经历中，作者再次展现了一个不同的世界。其他的还有《回忆》《记忆碎片》《世界树的意志》等短篇幅系列，在此不一
			一介绍。尽管故事杂乱，但每一篇都富有不同的感情，都可以为我们带来一些新的体会和领悟
		</p>
		<p id="bold">绿蓝漫画链接↓</p>
		<a href="https://ac.qq.com/Comic/ComicInfo/id/536332">为了伯伦希尔的荣耀</a>
	</body>
</html>

在这里插入图片描述

windyghdfh

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
html图像标记和css核心基础

html图像标记常用的图像格式—GIF，PNG，JPGGIF优点:支持背景透明，支持动画，支持图像渐进、支持无损压缩.缺点:只有256色，不适宜摄影、印刷或者高质量图片。JPG优点:支持上百种颜色，能使用有所压缩，所以图像较小，从浏览者来说图像质量较好缺点:因支持有损压缩，不适宜打印，不支持动画、背景透明、图像渐进。PNG优点:可移植网络图形，是很好的网络图像格式,PNG使用从L...
复制链接

扫一扫