前端开发入门【HTML5、CSS(w3cschool闯关题)】

HTML 元素:如<h1>、<p>、<style>大多数HTML元素都有一个 开始标签<h1> 和一个 结束标签</h1>。自关闭元素不需要结束标签,如<img>、<input>h1元素通常用于主标题,h2元素用于副标题。还有h3,h4,h5和h6元素p 元素是网站上正常段落文本的首选元素。P是“parag...
摘要由CSDN通过智能技术生成

目录

更换文本的颜色

设置标签的字体大小、字体样式(CSS)

引入Google字体

HTML 给页面添加图片、调整图片大小

HTML 给标签增加(尖角)边框、给标签增加圆角边框、给图像设置圆角边框

设置链接锚元素外部页面、在p标签内设置锚链接、使用#符号设置固定链接、为图片设置超链接

HTML 为图片添加alt描述

HTML 创建项目符号无序列表、有序列表

HTML 创建文本输入框、为文本输入框设定预定值(占位符)

HTML 添加表单、为表单添加提交按钮、表单设置为必填

HTML 添加单选框、添加复选框、设置复选框和单选框默认被选中

HTML 在div元素中嵌套多个元素、为div元素设置背景颜色

HTML 为标签添加ID属性、使用ID属性设置标签样式

【HTML 样式】使用padding布局页面标签、使用margin布局页面标签、使用负值设置页面元素的margin属性、为不同方向padding设置不同的值、CSS中padding简写、CSS中margin简写

CSS 样式的继承、继承Body元素样式

CSS 样式的覆盖、多个class处理样式覆盖、通过ID的样式属性覆盖class类的声明、通过内联样式覆盖class类的声明、通过使用Important覆盖所有其他样式

颜色、灰度(CSS 通过使用十六进制代码设置特定的颜色、灰度、十六进制RGB表达式缩写、CSS 使用rgb属性设定颜色)


HTML 元素:如<h1>这是一个一级标题</h1>

大多数HTML元素都有一个 开始标签<h1> 和一个 结束标签</h1>。

自关闭元素不需要结束标签,如<img>、<input>

h1元素通常用于主标题,h2元素用于副标题。还有h3,h4,h5和h6元素

p 元素是网站上正常段落文本的首选元素。P是“paragraph”的缩写。

添加注释: <!-- 开始添加注释,并用 -->,结束注释。

 

 

 

 

 

 

更换文本的颜色

一、style (样式)  【inline style(内联样式)

<h2 style="color: blue">CatPhotoApp</h2>

  • 当你输入<h2 style="color: red">CatPhotoApp</h2>时,你就给h2元素添加了inline style(内联样式)。

二、CSS选择器定义标签

在代码的顶端,创建style元素,:

<style>

</style>

在这个style元素的内部, 你可以为所有h2元素创建一个CSS选择器。例如,如果你希望所有的h2元素都设置为红色, 则你的样式元素将如下所示:

<style>

  选择器 {属性名称: 属性值;}

  h2 {color: red;}

  p{color: gray;}

</style>

三、 使用一个CSS Class去给标签定义Style

类是可重用的样式,可以添加到HTML元素。

下面是一个CSS类声明的例子:

<style>

  .blue-text {

    color: blue;

  }

</style>

你可以看到我们已经在 <style> 标签中创建了一个名为 blue-text 的CSS类。

你可以将类应用于HTML元素,如下所示:

<h2 class="blue-text">CatPhotoApp</h2>

请注意,在CSS样式元素中,类选择器应该添加.为前缀。而在HTML元素的类声明中,类属性不能添加.为前缀

设置标签的字体大小、字体样式(CSS)

字体大小:font-size属性

字体样式:font-family 属性

h1 {

    font-size: 30px;

    font-family: Sans-serif;

}

引入Google字体

现在, 让我们引入并应用 google 字体 (请注意, 如果 google 在你的国家被阻止, 你需要跳过这一挑战)。

首先,你需要用 link 标签来引入谷歌Lobster字体

复制以下代码段并将其粘贴到代码编辑器的顶部

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">

现在,你可以将 Lobster 作为 font-family属性的值应用于你的 h2 元素上。

将你的 h2 元素应用 font-family 属性,值为Lobster。

HTML 处理多个字体降级

在所有浏览器中都有几种可用的默认字体。这些包括 Monospace 、Serif 和 Sans-Serif。

当某种字体不可用时,你可以让浏览器将其 “降级” 为另一种字体。

例如,如果你希望元素使用 Helvetica 字体,但是当 Helvetica 不可用时也会降级为Sans-Serif 字体,则可以使用此CSS样式:

p {

  font-family: Helvetica, Sans-Serif;

}

现在,你可以注释掉对Google字体的使用,注释掉link标签,以使 Lobster 字体不可用。请注意观察它是如何降级为 Monospace 字体的。

HTML 给页面添加图片、调整图片大小

你可以使用 img 元素将图片添加到您的网站,并使用 src 属性指向一个图片的具体地址。

例子如下:

<img src="https://www.your-image-source.com/your-image.jpg">

img 元素具有 alt 属性alt 属性中的文本用于屏幕阅读器以提高可访问性,并且如果图像无法加载,则会显示。

让我们在上面的 img 示例中添加一个 alt 属性:

<img src="https://www.your-image-source.com/your-image.jpg" alt="your-image">

请注意,img 元素是自关闭元素,不需要结束标签

CSS包含一个 width 的属性用于控制元素的宽度。就像使用字体一样,我们将使用 px(像素)来指定图片的宽度。

例如,如果我们要创建一个名为 larger-image 的CSS类,把HTML元素的宽度设定为500像素,我们将使用:

<style>

  .larger-image {

    width: 500px;

  }

</style>

scr 和class之间不要逗号,留空格

HTML 给标签增加(尖角)边框、给标签增加圆角边框、给图像设置圆角边框

CSS 边框具有 style(样式)、color(颜色)、width(宽度) 等属性。

例如,如果我们想要设定一个HTML元素的边框颜色为红色、边框宽度为5像素(px)、边框样式为实线(solid),代码如下所示:

<style>

  .thin-red-border {

    border-color: red;

  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值