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

1、超连接

2、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

3、CSS颜色

4、CSS盒模式

块级标签： Block-level Tags

内联标签：Inline-level Tags

块标签之间的距离：

4.2 盒模式

若是都同样：margin: 6px

计算盒子的尺寸：

总结：

5、DIV布局

5.2 内容居中

1. text-align: center

   或

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

6、图片

图片是如何加载的：

6.1 内容图片

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

6.2 布局图片

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

6.3 用户交互图片

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

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

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

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