HTML和CSS 入门系列（一）：超链接、选择器、颜色、盒模式、DIV布局、图片

woshicixide 发布于2019-08-01 18:30 / 1384人阅读

摘要：一超链接二选择器的全称叫做级联样式表的缩写。布局图片简写的形式比分开写的性能更高，能简写尽量简写。下一篇和入门系列二文字表单表格浮动定位框架布局参考教学视频和小时入门经典视频教程

一、超链接

二、CSS选择器

CSS的全称叫做： Cascading Style Sheets 级联样式表的缩写。

2.1 类型选择器

2.2 派生选择器

2.3 伪类选择器

2.4 类选择器

2.5 link标签

是一个空标签，因此只需要写属性即可

2.6

三、CSS颜色

四、CSS盒模式

块级标签： Block-level Tags

内联标签：Inline-level Tags

块标签之间的距离：

4.2 盒模式

如果都一样：margin: 6px

计算盒子的尺寸：

总结：

五、DIV布局

5.2 内容居中

text-align: center

或

固定宽度：width: 500px; margin: 30px auto 0 auto

六、图片

图片是如何加载的：

6.1 内容图片

在Google浏览器中需要为图片定义高度和宽带才能在图片没有加载成功的时候显示alt描述文字。

6.2 布局图片

简写的形式比分开写的性能更高，能简写尽量简写。

6.3 用户交互图片

a标签是内联标签，不能设置宽和高。
height: 28px; display:inline-block; 内联块标签：可以让该标签拥有内联标签同时可以拥有独立的宽和高。

line-height: 28px; 设置行高和图片高度一致，是让图片和文字垂直居中的一个小技巧。

下一篇：HTML和CSS 入门系列（二）：文字、表单、表格、浮动、定位、框架布局、SEO

参考教学视频：HTML和CSS 6小时入门经典视频教程

云服务器 GPU云服务器 html改超链接颜色 html超链接图片 html给图片超链接 html多图片选择器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/51780.html

HTML和CSS 入门系列（一）：超链接、选择器、颜色、盒模式、DIV布局、图片

摘要：一超链接二选择器的全称叫做级联样式表的缩写。布局图片简写的形式比分开写的性能更高，能简写尽量简写。下一篇和入门系列二文字表单表格浮动定位框架布局参考教学视频和小时入门经典视频教程一、超链接 showImg(https://segmentfault.com/img/bV26nx?w=1441&h=572); showImg(https://segmentfault.com/img/bV...

GitCafe 2019-08-30 13:55 评论0 收藏0
HTML和CSS 入门系列（二）：文字、表单、表格、浮动、定位、框架布局、SEO

摘要：多余的文字会被隐藏五定位透明度居中显示堆叠顺序可用于将在一个元素放置于另一元素之后。属性六框架布局垂直布局水平布局内联框架标签七搜索引擎优化下一篇和系列三变化元素新增标签多媒体新增表单全局属性参考教学视频和小时入门经典视频教程上一篇：HTML和CSS 入门系列（一）：超链接、选择器、颜色、盒模式、DIV布局、图片一、文字 1.1 属性 showImg(https://segment...

yanwei 2019-08-30 13:55 评论0 收藏0
HTML和CSS 入门系列（二）：文字、表单、表格、浮动、定位、框架布局、SEO

摘要：多余的文字会被隐藏五定位透明度居中显示堆叠顺序可用于将在一个元素放置于另一元素之后。属性六框架布局垂直布局水平布局内联框架标签七搜索引擎优化下一篇和系列三变化元素新增标签多媒体新增表单全局属性参考教学视频和小时入门经典视频教程上一篇：HTML和CSS 入门系列（一）：超链接、选择器、颜色、盒模式、DIV布局、图片一、文字 1.1 属性 showImg(https://segment...

binta 2019-08-01 18:32 评论0 收藏0
CSS 面试题总结

摘要：而名作为标签的身份则是唯一的，在页面中只能出现一次。会导致父容器高度塌陷。堆叠顺序由元素在文档中的先后位置决定，后出现的会在上面。之后的内联对象会被排列在同一行内。的作用是允许浏览器渲染它，但是不显示出来，这样才能实现清除浮动。 CSS 中类 (classes) 和 ID 的区别。书写上的差别：class名用.号开头来定义，id名用#号开头来定义；优先级不同（权重不同）调用上的...

tomato 2019-08-29 15:06 评论0 收藏0
CSS3主要内容

摘要：必须要准确的放置否则声明无效。倒影设置元素的倒影准确的来说不能算是的东西，但需要知道。默认值不可继承背景渐变渐变是在中新增加的图片类型使用渐变可以在两种颜色间制造出平滑的渐变效果用它代替图片，可以加快页面的载入时间减小带宽占用。 CSS3主要内容一、CSS选择器 CSS3选择器规范地址： https://www.w3.org/TR/2011/RE... ...

X_AirDu 2019-08-30 11:15 评论0 收藏0