HTML知识-CSS部分

CSS部分的概述以及用法总结：

实例1：

编写HTML代码，实现如图所示的页面效果，利用表格，且表格中的项目是超链接，设置自定。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>珠宝饰品</title><style type="text/css">.div{background-color: plum;border: 1px solid plum;width: 400px;}h2{color: blue;}td{font-size: 20px;color: black;}a{color: black;}a:link{text-decoration: none;}a:hover{color: red;}span{color: red;}</style></head>
<body><div class="div"><h2>珠宝首饰</h2><table cellspacing="0" cellpadding="10" width="400"><tr><td><a href="https://www.tiffany.cn/jewelry/" target="_blank" >首饰套装</a></td><td><a href="https://www.tiffany.cn/jewelry/" target="_blank" >流行饰品</a></td><td><a href="https://www.tiffany.cn/jewelry/" target="_blank" >仿真饰品</a></td><td><a href="https://www.tiffany.cn/jewelry/" target="_blank" >钻饰</a></td></tr><tr><td><a href="https://www.tiffany.cn/jewelry/" target="_blank">天然水晶</a></td><td><a href="https://www.tiffany.cn/jewelry/" target="_blank">翡翠手表</a></td><td><a href="https://www.tiffany.cn/jewelry/" target="_blank">仿真饰品</a></td><td><a href="https://www.tiffany.cn/jewelry/" target="_blank">戒指</a></td></tr></table></div></body>
</html>

实例2：

编写HTML代码，实现如图所示的页面效果。

具体要求：

使用行内样式表修饰本页面中的第一行的文字为h1、居中、隶书，加粗，24px；
使用嵌入样式表，创建一个名为biaoti的类选择器将本网页中所有二级标题（如“实验目的”等）变成黑体、18px、加粗；
创建一个symd类用以修饰“实验目的”中的文字为斜体，微软雅黑，20px，白色，加粗，且背景为浅蓝色；
所有超链接默认是绿色；
“实验内容”中的超链接是红色；
给网页加上背景；
“实验内容”中行间距20px，文字15px，字间距5px；
将下面的诗《临洞庭上张丞相》变成竖排的古文风hanli

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS基本选择器</title><style type="text/css">h1{text-align: center;font-size: 24px;font-weight: bold;font-family: "隶书";}h2.biaoti{font-family: "黑体";font-size: 18px;font-weight: bold;}.symd{font-style: italic;font-family: "微软雅黑";font-size: 20px;color: aliceblue;font-weight: bold;background-color: blue;}a:link{font-size: 20px;}body{background-size: 100%;}.div{line-height: 20px;font-size: 15px;letter-spacing: 5px;}.wm{writing-mode: vertical-rl;}</style>
</head>
<body background="bg4.jfif"><h1>第5次 CSS基本选择器</h1><p>注意：本试验指导文件即为<a href="https://www.runoob.com/html/html-css.html" target="_blank" style="color:green;">第5次 CSS基本选择器.html</a>，以下实验项目均以本文件为操作对象。另除本行外，本网页中 其它超链接均为红色。</p><h2 class=" biaoti">一、实验目的</h2><ol class="symd"><li>掌握CSS样式的语法规则；</li><li>掌握CSS样式的基本选择器的使用；</li><li>掌握CSS样式表的定义位置；</li><li>重点培养应用CSS样式的能力。</li></ol><h2 class=" biaoti">二、实验内容</h2><div class="div"><p>1.使用<a href="https://www.runoob.com/html/html-css.html" style="color: red;">行内样式表</a>修饰本页面中的第一行的文字为h1、居中、隶书，加粗，24px；</p><p>2.使用嵌入样式表，创建一个名为biaoti的类选择器将本网页中所有二级标题（如“实验目的”等）变成黑体、18px、加粗；</p><p>3.创建一个symd类用以修饰“实验目的”中的文字为斜体，微软雅黑，20px，白色，加粗，且背景为浅蓝色；</p><p>4.所有的超链接是绿色；</p><p>5.所有“实验内容”中的<a href="https://www.runoob.com/html/html-css.html" style="color: red;">超链接</a>是红色、20px；</p><p>6.使用CSS使得网页背景变为下图且不平铺居中置顶显示；</p>  <p>7.将“实验内容”中各行之间的间距设至10px，已知字体是16px大小的，并设定字与字之间的间隔为5px。完成后，页面效果如下图将所示。</p>   <p>8.请将图下面的诗《临洞庭上张丞相》变成类似下图白居易的诗的竖排的古文风格。</p><div class="wm"><p>临洞庭上张丞相</p><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;唐. 孟浩然</p><br>            <p>八月湖水平，涵虚混太清</p>  <p>气蒸云梦泽，波撼岳阳城</p><p>欲济无舟楫，端居耻圣明</p><p>坐观垂钓者，徒有羡鱼情</p></div><br><br><p>说明：文本书写顺序属性writing-mode：tb-rl。</p></div></body>
</html>

HTML知识-CSS部分相关推荐

css面试基础知识,CSS知识点与面试题解析
前言 CSS 和 HTML 是网页开发中布局相关的组成部分,涉及的内容比较多和杂乱,本小节重点介绍下常考的知识点. 选择器的权重和优先级 CSS 选择器有很多,不同的选择器的权重和优先级不一样,对于一 ...
css有趣的扩展知识,CSS知识扩展
CSS3.CSS2知识扩展 1:Column的几个属性值:columns是column-width与column-count的缩写前者指的宽度,后者指列数,column-gap指每列之间的宽度:col ...
基础知识 | css基础知识
css概述定义:Cascading style 层叠样式表,简称样式作用:美化页面 css与html属性的使用原则 html属性:代码不能充裕,只对一个元素生效代码没有维护性 css:代码有一定 ...
设置层级为2html,前端知识(Css)汇总2
三. CSS介绍 1.为了让网页元素的样式更加的丰富, 也为了让网页的内容和样式能拆分开, CSS由此而诞生. 2.CSS是 Cascading Style Sheets 的首写字母缩写,意思是层 ...
Web前端知识CSS（响应式设计）
1.什么是响应式设计也叫响应式布局,响应式开发实现不同屏幕分辨率的终端上浏览网页的不同展示方式. 响应式布局是根据设备屏幕宽度不同适当调整标签显示的布局,从而在每种设备屏幕宽度下呈现的界面是不同的 ...
Web前端知识CSS（清浮动的方法、CSS精灵图、滑动门）
一.清浮动的方法清除浮动的方法1.给浮动元素的父级盒子设置一个固定的高度优缺点:不够灵活,适用于高度固定的布局中 2.为浮动元素的父级盒子设置浮动优缺点:会产生新的浮动问题 3.为浮动元素的父盒 ...
前端知识——css 之预处理器 less 语法
目录 1. less 语法 1.1 变量(Variables) 1.2 嵌套(Nesting) 1.3 运算(Operations) 1.4 混合(Mixins)和映射(Maps) 1.5 其他语法补 ...
前端相关知识(CSS)(1)(美化页面效果)
1)HTML只是描述了页面的结构和内容,也就是骨 2)CSS描述的是页面的样式,也就是页面具体长成什么样子,也就是皮 3)具体来说就是就是描述了任意一个网页的元素,大小,位置,字体,颜色,背景,边框, ...
Web前端知识CSS（CSS定位、CSS透明、阴影、边框圆角）
一.CSS 定位定位的作用普通文档流中块元素垂直排列,行内元素水平排列. 定位能够让我们把一个元素从它原本在正常布局流中应该在的位置移动到另一个位置(自由的在某个盒子内移动位置或者固定在屏幕中的某 ...
前端入门知识css之字体样式
文章目录 1 CSS字体 1.1 字体样式 1.2 文本字体 1.3 字体粗细 1.4 字体⼤⼩ 1.5 字体行高 1.6 综合设置 1 CSS字体 1.1 字体样式 font-style 设置字体样 ...

HTML知识-CSS部分

HTML知识-CSS部分相关推荐

最新文章

热门文章