码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2019-12-13 19:34:13      阅读:116      评论:0      收藏:0      [点我收藏+]

标签:经典   visit   垂直   之间   用户交互   入门经典   视频教程   https   居中   

一、超链接

技术图片

技术图片

技术图片

技术图片

二、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小时入门经典视频教程

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

标签:经典   visit   垂直   之间   用户交互   入门经典   视频教程   https   居中   

原文地址:https://www.cnblogs.com/homehtml/p/12036601.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!