HTML+CSS

最新推荐文章于 2024-04-16 15:27:29 发布

张晗潇

最新推荐文章于 2024-04-16 15:27:29 发布

阅读量270

点赞数

本文链接：https://blog.csdn.net/weixin_45722921/article/details/103506009

版权

HTML的图像标记

1.常用格式

1.GIF格式
支持动画，无损的图像格式，在修图片前后图片质量没有亏损
2.PNG格式
体积更小，支持alpha透明（全透明，半透明，全不透明），并且颜色过渡平滑，但是不支持动画。
3.JPG格式
所显示的色彩比较多，网页制作过程中类似的照片的图像比如横幅广告，商品图片，较大的插图都可以使用这种，应用的比较多

2.图像标记

插入图片基本格式：

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

src URL 图像的路径
alt 文本图像不能显示时的替换文本
title 文本鼠标悬停时显示的内容
width 像素（xhtml不支持%页面百分比）设置图像的宽度
height 像素（xhtml不支持%页面百分比）设置和图像的高度
border 数字设置图像边框的宽度
vspace 像素设置图像顶部和底部的空白（垂直边距）
hspace 像素设置图像左侧和右侧的空白部分（水平边距）

                                                           left                                                                     将图像对齐到左边

                                                           right                                                               将图像对齐到右边
                                                         
align                                                       top                                                              将图像的顶端和文本的第一行文字对齐，其他文字居于图像的下方
                                                          
                                                           middle                                                         将图像的水平中线和文本的第一行文字对齐，其他文字位于图像的下方

                                                           bottom                                                          将图像的底部和文本的第一行文字对齐，其他文字位于图像的下方

相对路径和绝对路径

相对路径：盘中存的图片
也就是存在本地的照片需要的路径
绝对路径：
1.图像文件和html文件位于同一文件夹：只需输入图像文件的名称即可，如.
2.图像文件位于html文件的下一级文件夹：输出文件夹名和文件名，之间用"/"隔开。如<img src="img/img01/logo.gif/>
3.图像文件位于html文件的上一级文件夹：在文件之前加入“/’,如果是上两级，则需要使用”。。。/。。。/“,以此类推，如

CSS样式规则

格式：

选择器{属性1：属性值1；属性2：属性值2；属性3：属性值3；}

属性和属性值之间用英文“：”连接，多个“键值対”之间用英文“：”进行区分。
CSS代码结构特点：
1.CSS样式中的选择器严格区分大小写，属性和值不区分大小写，按照书写习惯一般将“选择器、属性和值”都采用小写的方式。
2.多个属性之间必须用英文状态下的分号隔开，最后一个属性后的分号可以省略，但是为了便于增加新样式最好保留。
3.如果属性的值由多个单词组成且中间包含空格，则必须为这个属性值加上英文状态下的引号。
4.在编写CSS代码时，为了提高代码的可读性，通常会加上CSS注释。
5.在CSS代码中空格是不被解析的，花括号以及分号前后的空格可有可无。因此，可以使用空格键、Tab键、Enter键等对样式代码进行排版，即所谓的格式化CSS代码，这样可以提高代码的可读性。

引入CSS样式表

1.行内式
行内式也称为内联样式，是通过对标记的style属性来设置元素的样式，
基本语法格式：

< 标记名  style="属性1：属性值1；属性2：属性值2；">内容</标记名>

2.内嵌式
内嵌式是将CSS代码集中写在HTML文档的< head>头部标记中，并且用< style>标记定义。
基本语法格式：

< head>
< style type="text/css">
        选择器{属性1：属性值1；属性2：属性值2；}
</style>
</head>

链入式
链入式是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过< link/>标记将外部样式表文件链接到HTML文档中。
基本语法格式：

< head>
<link href="CSS文化的路径" type="text/css"rel="stylesheet"/>
</head>

4.导入式
导入式与链入式相同，都是针对外部样式表文件的。但两者的加载时间和顺序不同，这就是大多数网站采用链入式的原因。
基本语法格式：

<style type="text/css">
      @import url;或@import "css文件路径";
      /*在此还可以存放其他css样式*/
</style>

CSS基础选择器

1.标记选择器
是指用HTML标记名称作为选择器，按照标记名称分类，为页面中某一类标记指定统一的CSS样式。
基本语法格式：

标记名{属性1：属性值1；属性2：属性值2；}

2.类选择器
类选择器使用“.”（英文点号）进行标识，后面紧跟类名。
基本语法格式：

.类名{属性1：属性值1；属性2：属性值2；}

3.id选择器
id选择器使用“#”进行标识，后面紧跟id名。
基本语法格式：

#id名{属性1：属性值1；属性2：属性值2；}

4.通配符选择器
通配符选择器用“#”号表示，它是所有选择器中作用范围最广的，能匹配页面中所有的元素。
基本语法格式：

*{属性1：属性值1；属性2：属性值2；}

CSS字体样式属性

1.font-size字号大小
CSS长度单位：

相对长度单位	说明
em	相对于当前对象内文本的字体尺寸
px	像素，最常用，推荐使用

绝对长度单位	说明
in	英寸
cm	厘米
mm	毫米
pt	点

2.font-family:字体
可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体。
例:

body{font-family:"华文彩云","宋体","黑体";}

注意：
（1）各种字体之间必须使用英文状态下的逗号隔开。
（2）中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当设置英文字体时，英文字体名必须位于中文字体名之前。
（3）如果字体名中包含空格、#、￥等符号，则该字体必须加英文状态下的单引号或双引号，
（4）尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。
3.font-weight:字体粗细
font-weight可用属性值：

值	描述
normal	默认值，定义标准的字符
bold	定义粗体字符
bolder	定义更粗的字符
lighter	定义更细的字符
100~900	定义由细到粗的字符，值越大字体越粗

4.font-variant:变体
（1）normal:默认值，
（2）small-caps:所有的小写字母均会转换为大写，与其余文本相比，其字体尺寸更小。
5.font-s