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

一、超链接

二、CSS选择器

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

2.1 类型选择器

2.2 派生选择器

2.3 伪类选择器

<style >

        a{
            text-decoration: none;
            color: black;
        }
        /*注意它们是有先后顺序的，否则不起效果！！！*/
        
        /*未访问的链接，和a{}相同并且同时存在时会覆盖a{}*/
        a:link{
            color:darkblue;
        }
        /*鼠标移动到超链接上时*/
        a:hover{
            text-decoration: underline;
            color: darkred;
        }
        /*被选定的超链接*/
        a:active{
            text-decoration: underline;
            color: yellow;
        }
        /*已访问的超链接*/
        a:visited{
            color: lightblue;
        }
    </style>

2.4 类选择器

2.5 link标签

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

2.6

三、CSS颜色

四、CSS盒模式

块级标签： Block-level Tags

内联标签：Inline-level Tags

块标签之间的距离：

4.2 盒模式

如果都一样：margin: 6px

计算盒子的尺寸：

总结：

五、DIV布局

5.2 内容居中

1. text-align: center

   或

2. 固定宽度：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小时入门经典视频教程