【前端】怎样制作本身的网站(7)

打印 上一主题 下一主题

主题 563|帖子 563|积分 1689

以下内容接上文。
结合图片的超链接
将img元素作为内容,放在a元素中。即可为图片添加一个超链接。

例如右边的代码,点击头像就会打开“aboutme.html“。

点击右边的图片试试~






两个非文本元素——图片与超链接。

从现在开始,制作网页不再只是编写一个HTML文档,而是结合了多张图片、多个html文档的开发项目。

学习了网页的根本骨架,并利用HTML语言在网页中添加了文本和图片等HTML元素。

当然,假如一个网页只有根本骨架和根本元素,那么它看起来就会非常杂乱,不敷雅观。

目的

为了让网页层次更加分明,样式更加雅观,我们就必要引入CSS

本节课,我们将通过CSS的语法规则、引用方式、分类几个方面先来学习CSS的底子。


利用HTML时,必要遵从一定的规范,CSS也是如此。要想熟练地利用CSS对网页设置样式,起首必要了解CSS的语法规则。


CSS语法规则
代码的作用

第2到4行,定义了一个CSS。


CSS包含选择器、属性、属性值三个部分。




解释代码:
选择器

选择器,用于指定要为哪个HTML元素定义样式。


好比,这里的选择器h1,就表现为所有h1元素定义样式。




/* css语法规则 */
h1 {        
    color: red;
}
属性

属性,是指我们给HTML元素设置的样式名称。


好比,这里的color表现设置颜色。


更多的属性我们将在后续逐一学习。



/* css语法规则 */
h1 {        
    color: red;
}
属性值

属性值,用来控制某个属性的显示结果。


好比,这里的red就是控制颜色显示出红色。


/* css语法规则 */
h1 {        
    color: red;
}
冒号

英文冒号:用于将属性与属性值分隔开。


/* css语法规则 */
h1 {        
    color : red;
}
分号

英文分号;放到属性值后,作为结束标记,是固定格式。


/* css语法规则 */
h1 {
    color: red;
}
声明

属性和属性值的组合,可以看作一个声明。


一条声明的格式为属性: 属性值;



/* css语法规则 */
h1 {
    color: red;
}
代码风格

CSS中,没有强制规范代码的书写风格。


为了使 CSS 更具可读性,我们可以在定义CSS时每一行代码上只放置一个声明。


好比,h1 {color: red;font-size: 20px;}

我们会写成如图的结构。



CSS的出现,使得网页的样式与内容分离开来。

HTML负责网页中有哪些内容,CSS负责以哪种样式来展现这些内容。因此,CSS必须和HTML协同工作,那么怎样在HTML中引用CSS呢?


免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览

快速回复

您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

星球的眼睛

金牌会员
这个人很懒什么都没写!
快速回复 返回顶部 返回列表