Web技术应用基础——CSS
文章平均质量分 88
少年游四方
低头赶路,敬事如仪。
展开
-
表格样式
表格样式1.表格边框任务描述相关知识代码文件2.表格颜色、文字与大小任务描述相关知识代码文件1.表格边框任务描述本关任务:在本关中,我们将学习如何使用CSS设置表格样式,使表格更好看。本关任务完成之后的效果图(index.html)如下:完成index.html中表格样式。要求如下:设置表格为折叠边框;设置 Table属性边框为2px粗的黑色(black)实线;设置th属性边框为1px粗的灰色(grey)实线;设置td属性边框为1px粗的灰色(grey)点线。注意:本关中,使用单词的原创 2021-03-31 23:44:58 · 3809 阅读 · 0 评论 -
使用 HTML/CSS 实现 Educoder 顶部导航栏
使用 HTML/CSS 实现 Educoder 顶部导航栏任务描述相关知识使用flex布局justify-content: space-between属性使用flex布局flex:1权重布局代码文件任务描述本关任务:使用flex布局实现容器两端对齐的效果。效果如下: 使用flex布局初步实现Educdoer顶部导航栏最外层容器两端对齐的效果,具体要求如下:页面最小宽度:1200px导航栏背景颜色16进制:#24292D导航栏高度:60px 测试过程:平台将读取用户补全后的index.h原创 2021-03-31 23:21:58 · 3916 阅读 · 6 评论 -
CSS入门——背景样式
背景样式1.背景颜色任务描述相关知识代码文件2.背景图片任务描述相关知识代码文件3.背景颜色任务描述相关知识代码文件1.背景颜色任务描述本关任务:在本关中,我们将学习如何使用CSS去更改HTML元素的背景属性。本关任务完成之后的效果图如下:完成如下要求: 设置body的背景颜色(background)为象牙色(ivory); 设置段落p的背景颜色(background)为浅蓝色(lightblue)。相关知识背景色我们可以使用background-color为元素设置背景色,通常属原创 2021-03-31 18:08:57 · 1800 阅读 · 0 评论 -
文本与字体样式3.0
文本装饰与文本布局任务描述相关知识文本装饰text-decoration文本布局文本对齐text-align行高 line-height字符间距和字间距letter-spacing和word-spacing任务描述本关任务是使用CSS字体属性设置页面装饰与文本布局。任务完成之后,页面效果如下: 同时设置 h1, h2 文字居中对齐; 设置footer, photos居中对齐; 设置h3文字左对齐; 设置a:link元素的text-decoration属性为none; 设置a:hover元素原创 2021-03-31 17:36:07 · 758 阅读 · 0 评论 -
文本与字体样式2.0
字体粗细与风格任务描述相关知识字体粗细font-weight字体风格font-style任务描述上一篇中,我们学习了使用color,font-family和font-size来设置字体的属性。本篇中,我们将继续学习如何在网页中设置字体粗细以及字体风格。本关任务是使用CSS字体属性设置页面字体的粗细和风格,设置之后页面标题和页脚效果如下:要求:同时设置 h1, h2 的font-weight为normal;设置footer的字体粗细为light;显示效果为斜体(italic)。相关知识字原创 2021-03-31 17:03:28 · 965 阅读 · 0 评论 -
CSS从入门到精通——文本与字体样式1.0
1.字体颜色、类型与大小任务描述相关知识字体颜色color字体类型font-family字体系列字体栈字体大小font-size设置方式常用单位像素em百分比结合 em任务描述请在右侧的编辑框中修改style.css文件。 设置 h1, h2 的font-family 为:PingFang SC, Verdana, Helvetica Neue,Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif,WenQuanYi Micro Hei,原创 2021-03-31 16:46:30 · 2842 阅读 · 0 评论 -
CSS样式引入方式
CSS样式引入方式任务描述相关知识样式引入方式内部样式表外部样式表内部样式使用哪一种样式表样式的优先级顺序任务描述本关任务:在上一关中,我们了解了CSS的基础概念。这一关中,我们将要理解CSS继承和多种样式引入方式。本关任务完成之后的效果图如下:相关知识样式引入方式CSS样式有三种引入方式: 内部样式表:如同之前实例中所示,在文档头部中引入; 外部样式表:通过外部文件引入; 内联样式:直接在特定元素中引入。下面,我们将为大家一一介绍这三种引入方式。内部样式表首先,对于内部样式表原创 2021-03-24 18:03:58 · 5681 阅读 · 0 评论 -
初识CSS:丰富多彩的网页样式
丰富多彩的网页样式1、任务描述2、相关知识2.1 CSS基本概念2.2 一个简单地实例2.3 CSS基本语法2.3.1 选择器2.3.2 声明1、任务描述本关任务:通过编写CSS给网页添加基本的样式。显示效果如下:2、相关知识2.1 CSS基本概念 CSS(Cascading StyleSheets)即层叠样式表,它是一种用来为结构化文档(例如HTML文档或XML应用)添加样式的计算机语言,目前由W3C定义和维护。 在前端网页开发中,我们使用CSS来定义网页元素的样式,例如背景颜色、字体展示原创 2021-03-24 17:48:54 · 5332 阅读 · 0 评论 -
CSS id选择器
CSS id选择器任务描述相关知识任务描述在本关中,你将通过id选择器的方式完成页面菜单栏样式布局,栏目导航等任务。完成任务之后,基本页面效果如下:相关知识id选择器id选择器与我们上一关中学习的类选择器类似,但在使用上有不同。 使用类选择器时,指定一个元素属于某类,使用的是关键字class,例如:<body> <h1 class="important">温馨提示</h1> <p>少一串脚印,多一份绿意。</p>&l原创 2021-03-24 17:28:48 · 2028 阅读 · 0 评论 -
CSS 类选择器
CSS 类选择器任务描述相关知识任务描述本关任务是通过类选择器的方式,更改独立于文档元素的属性。相关知识类选择器 类选择器允许以一种独立于文档元素的方式来指定样式。通常情况只希望应用样式,而不考虑具体的元素时,会使用类选择器。例如,对于HTML页面:<body><div class="main"> <article class="news"> <h1>地震自救指南</h1> <p>大的晃动时间约原创 2021-03-24 17:21:13 · 1369 阅读 · 0 评论 -
CSS从入门到精通——基础选择器
基础选择器引言1、CSS 元素选择器任务描述相关知识引言层叠样式表(Cascading Style Sheets, CSS)是一种用来为结构化文档(例如HTML文档或XML应用)添加样式的计算机语言,由W3C定义和维护。目前最新版本是CSS2.1,为W3C的推荐标准。CSS3现在已被大部分现代浏览器支持,而下一版的CSS4也已经在开发中。使用外部文件的层叠样式表,可以将内容与表现分离。同时,可以极大提高工作效率。1、CSS 元素选择器任务描述在完成本实训之后,你将掌握元素选择器、类选择器和i原创 2021-03-24 17:10:00 · 912 阅读 · 0 评论 -
用CSS3实现放大效果
用CSS3实现放大效果任务描述相关知识transform属性transition属性代码文件任务描述本关任务:用CSS3放大效果。相关知识为了完成本关任务,你需要掌握:transform属性transition属性transform属性下面是基本的html结构,:<div class="scale"> <img src="img/diary1.jpg" alt="diary1"/></div>现在需要基于中心放大1.2倍。该如何实现原创 2021-03-18 17:21:04 · 895 阅读 · 0 评论 -
CSS3实现移动效果
CSS3实现移动效果任务描述相关知识transform属性transition属性代码文件任务描述本关任务:用CSS3实现物体移动效果。相关知识为了完成本关任务,你需要掌握:transform属性transition属性。transform属性下面是基本的html结构,:<div class="move"> <p>向上移动</p></div>效果如下:现在需要平滑的往上移动200px。该如何实现呢?咱们先实现往上移动原创 2021-03-18 17:14:22 · 1640 阅读 · 0 评论