HTML图像标记和CSS入门

最新推荐文章于 2022-12-27 20:16:15 发布

孙祥河

最新推荐文章于 2022-12-27 20:16:15 发布

阅读量604

点赞数

分类专栏： html 文章标签： HTML CSS

本文链接：https://blog.csdn.net/weixin_45724665/article/details/103512784

版权

html 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

HTML图像标记

1.图像标记
1.1 <img src="图像URL“/>
src指定图像文件的路径和文件名，它是img标记的必需品。
1.2 文本属性 alt ：在图像无法显示时告诉用户该图片的内容。
1.3 图像的宽高属性 width，height 两者不能同时使用
1.4 图像的边框的属性 border ：可以为图像添加边框，设置边框的宽度，但边框颜色的调整仅仅通过HTML属性时不能通过的。
1.5 图像的边距属性 vspace 和hspace
1.6图像的对齐方式用align表示
2.相对路径和绝对路径
1.绝对路径
绝对路径一般是指带有盘符的路径

 <img src="D:\html\chapter02\img\laopo.jpg"

2.绝对路径
2. 1 图像文件和html 文件位于同一文件夹：只需输入图像文件的名称即可
2.2 图像文件位于html文件的下一级文件夹：输入文件夹名和文件名，之间用”/“隔开
2.3图像文件位于html 文件的上一级文件夹：在文件名之前加入”…/“,如果时上两级，
则需要使用 ”…/…/“

CSS 核心基础

1.CSS样式规则
1.1选择器严格区分大小写，属性和值不区分大小写
1.2 多个属性之间必须采用英文状态下的分号隔开
1.3 CSS代码中空格时不被解析的
1.4选择器{属性1：属性值1；属性2：属性值2；属性3：属性值3；}

引入CSS样式表：
行内式：<标记名 style=“属性1：属性值1；属性2：属性值2；属性3：属性值3；”>内容</标记名>

内嵌式：

`<head>`
`<stype type="text/css"></head>`

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

链入式：

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

2.CSS基础选择器
2.1 标记选择器：标记名{属性1：属性值1；属性2：属性值2；属性3：属性值3；}

2.2 类选择器“.”后面紧跟类名
.类名{属性1：属性值1；属性2：属性值2；属性3：属性值3；}

2.3 id选择器用“#”进行标识，后面紧跟id名
#id名{属性1：属性值1；属性2：属性值2；属性3：属性值3；}

2.4 通配符选择器用“#”号表示
*{属性1：属性值1；属性2：属性值2；属性3：属性值3；}

3.CSS文本相关样式
3.1 font-size 字号大小
它的属性用于设置字号相对长度 em px 最常用，推荐使用
3.2 font-family 字体
它的属性用于设置字体

p{font-size:"微软雅黑”}

可以同时指定多个字体，中间用逗号隔开各种字体之间必须使用英文的逗号隔开
3.3 font-weight ：字体粗细
字体加粗除了用 b 和 strong 标签之外，可以使用CSS 来实现，但是CSS 是没有语义的。
font-weight属性用于定义字体的粗细，其可用属性值：normal、bold、bolder、lighter、100~900（100的整数倍）。
技巧：
数字 400 等价于 normal，而 700 等价于 bold。但是我们更喜欢用数字来表示。
font-style:字体风格
字体倾斜除了用 i 和 em 标签之外，可以使用CSS 来实现，但是CSS 是没有语义的。
font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下：
normal：默认值，浏览器会显示标准的字体样式。
italic：浏览器会显示斜体的字体样式。
oblique：浏览器会显示倾斜的字体样式。
4.CSS文本外观属性
1.color 文本颜色
2.letter-spacing: 字体间距属性为normal 或px em 允许负值
3…word-spacing:单词间距中文字体无效
4.line-height:行间距 px em %
5.text-transform:文本转换
none 默认值
capitalize 首字母大写
uppercase 全部字符转换为大写
lowercase 全部字符转换为小写
6.text-decoration 文本装饰
none underline overline line-through删除线
7.text-align水平对齐方式
left right center
8.text-indent 首行缩进建议使用em
9.white-space 空白符处理
normal
pre 预格式化
nowrap空格空行无效