目录
HTML 给标签增加(尖角)边框、给标签增加圆角边框、给图像设置圆角边框
设置链接锚元素外部页面、在p标签内设置锚链接、使用#符号设置固定链接、为图片设置超链接
HTML 添加单选框、添加复选框、设置复选框和单选框默认被选中
HTML 在div元素中嵌套多个元素、为div元素设置背景颜色
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;