首页 > 其他分享 >CSS入门（主要讲解字体，链接，列表，表格）

CSS入门（主要讲解字体，链接，列表，表格）

时间：2024-11-20 17:44:16浏览次数：3  
标签：入门 表格 color 列表 paragraph 字体 font 链接 CSS

一.CSS字体

1.CSS字体属性要定义字体的加粗，大小，文字样式

2.设置字体系列

font-family 属性设置文本的字体系列。

font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体。

注意: 如果字体系列的名称超过一个字，它必须用引号，如Font Family："宋体"。

多个字体系列是用一个逗号分隔指明：

p{font-family:"Times New Roman", Times, serif;}

3.常用的字体组合并且通用的字体系列。

Serif 字体

字体文本示例
Georgia, serif

This is a heading

This is a paragraph

"Palatino Linotype", "Book Antiqua", Palatino, serif

This is a heading

This is a paragraph

"Times New Roman", Times, serif

This is a heading

This is a paragraph

sans - serif字体

字体文本示例
Arial, Helvetica, sans-serif

This is a heading

This is a paragraph

Arial Black, Gadget, sans-serif

This is a heading

This is a paragraph

"Comic Sans MS", cursive, sans-serif

This is a heading

This is a paragraph

Impact, Charcoal, sans-serif

This is a heading

This is a paragraph

"Lucida Sans Unicode", "Lucida Grande", sans-serif

This is a heading

This is a paragraph

Tahoma, Geneva, sans-serif

This is a heading

This is a paragraph

"Trebuchet MS", Helvetica, sans-serif

This is a heading

This is a paragraph

Verdana, Geneva, sans-serif

This is a heading

This is a paragraph

Monospace 字体

字体文本示例
"Courier New", Courier, monospace

This is a heading

This is a paragraph

"Lucida Console", Monaco, monospace

This is a heading

This is a paragraph

 4.字体的样式

主要是用于指定斜体文字的字体样式属性。

这个属性有三个值：

  • 正常 - 正常显示文本
  • 斜体 - 以斜体字显示的文字
  • 倾斜的文字 - 文字向一边倾斜（和斜体非常类似，但不太支持）

代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>
<style>
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
</style>
</head>

<body>
<p class="normal">这是一个段落,正常。</p>
<p class="italic">这是一个段落,斜体。</p>
<p class="oblique">这是一个段落,斜体。</p>
</body>

</html>

效果：

5.字体大小

font-size 属性设置文本的大小。

如果你不指定一个字体的大小，默认大小和普通文本段落一样，是16像素（16px=1em）。

 代码示例：

h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}

 6.设置字体的粗细

font-weight属性设置字体的粗细

代码示例： 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>
<style>
p.normal {font-weight:normal;}
p.light {font-weight:lighter;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}
</style>
</head>

<body>
<p class="normal">This is a paragraph.</p>
<p class="light">This is a paragraph.</p>
<p class="thick">This is a paragraph.</p>
<p class="thicker">This is a paragraph.</p>
</body>

</html>

效果：

7.翻译理解

serif（印刷），style（样式），normal（正常的），

italic（斜体字），oblique（斜的），weight（重量），

bold（粗体字），light（微弱的）

二.CSS链接

1.链接样式

链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。

特别的链接，可以有不同的样式，这取决于他们是什么状态。

这四个链接状态是：

  • a:link - 正常，未访问过的链接
  • a:visited - 用户已访问过的链接
  • a:hover - 当用户鼠标放在链接上时
  • a:active - 链接被点击的那一刻

代码示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
a:link {color:#000000;}      /* 未访问链接*/
a:visited {color:#00FF00;}  /* 已访问链接 */
a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */
a:active {color:#0000FF;}  /* 鼠标点击时 */
</style>
</head>
<body>
<p><b><a href="/css/" target="_blank">这是一个链接</a></b></p>
<p><b>注意：</b> a:hover 必须在 a:link 和 a:visited 之后，需要严格按顺序才能看到效果。</p>
<p><b>注意：</b> a:active 必须在 a:hover 之后。</p>
</body>
</html>

2.对链接文本进行修饰

常见的链接样式

根据上述链接的颜色变化的例子，看它是在什么状态。

让我们通过一些其他常见的方式转到链接样式：

文本修饰

text-decoration 属性主要用于删除链接中的下划线：

实例

a:link {text-decoration:none;} 
a:visited {text-decoration:none;} 
a:hover {text-decoration:underline;} 
a:active {text-decoration:underline;}

背景颜色

背景颜色属性指定链接背景色：

实例

a:link {background-color:#B2FF99;} 
a:visited {background-color:#FFFF85;}
 a:hover {background-color:#FF704D;} 
a:active {background-color:#FF704D;}

3.定义一个链接框

代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
a:link,a:visitedhttps://www.runoob.com/css/
{
	display:block;
	font-weight:bold;
	color:#FFFFFF;
	background-color:#98bf21;
	width:120px;
	text-align:center;
	padding:4px;
	text-decoration:none;
}
a:hover,a:active
{
	background-color:#7A991A;
}
</style>
</head>

<body>
<a href="/css/" target="_blank">这是一个链接</a>
</body>
</html>

效果：

4.翻译理解

link（链接），visited（访问（过去式）），

active（积极的），decoration（装饰）

三.CSS列表

1.CSS 列表属性作用如下：

  • 设置不同的列表项标记为有序列表
  • 设置不同的列表项标记为无序列表
  • 设置列表项标记为图像

2.在 HTML中，有两种类型的列表：

  • 无序列表 ul - 列表项标记用特殊图形（如小黑点、小方框等）
  • 有序列表 ol - 列表项的标记有数字或字母

代码示例：

1
<!DOCTYPE html>
2
<html>
3
<head>
4
<meta charset="utf-8"> 
5
<title>菜鸟教程(runoob.com)</title> 
6
<style>
7
ul.a {list-style-type:circle;}
8
ul.b {list-style-type:square;}
9
ol.c {list-style-type:upper-roman;}
10
ol.d {list-style-type:lower-alpha;}
11
</style>
12
</head>
13
​
14
<body>
15
<p>无序列表实例:</p>
16
​
17
<ul class="a">
18
  <li>Coffee</li>
19
  <li>Tea</li>
20
  <li>Coca Cola</li>
21
</ul>
22
​
23
<ul class="b">
24
  <li>Coffee</li>
25
  <li>Tea</li>
26
  <li>Coca Cola</li>
27
</ul>
28
​
29
<p>有序列表实例:</p>
30
​
31
<ol class="c">
32
  <li>Coffee</li>
33
  <li>Tea</li>
34
  <li>Coca Cola</li>
35
</ol>
36
​
37
<ol class="d">
38
  <li>Coffee</li>
39
  <li>Tea</li>
40
  <li>Coca Cola</li>
41
</ol>
42
​
43
</body>
44
</html>

即无序列表在ul中定义标记的特殊图形，有序列表在ol中定义标记为数字或字母等

效果：

3.优化标记

代码示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
ul
{
	list-style-type:none;
	padding:0px;
	margin:0px;
}
ul li
{
	background-image:url(sqpurple.gif);
	background-repeat:no-repeat;
	background-position:0px 5px; 
	padding-left:14px;
}
</style>
</head>

<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>

</html>

例子解释：

  • ul:
    • 设置列表类型为没有列表项标记
    • 设置填充和边距 0px（浏览器兼容性）
  • ul 中所有 li:
    • 设置图像的 URL，并设置它只显示一次（无重复）
    • 您需要的定位图像位置（左 0px 和上下 5px）
    • 用 padding-left 属性把文本置于列表中

效果：

4.总结所有的CSS列表属性

属性描述
list-style简写属性。用于把所有用于列表的属性设置于一个声明中
list-style-image将图像设置为列表项标志。
list-style-position设置列表中列表项标志的位置。
list-style-type设置列表项标志的类型。

5.翻译理解 

【ul】unordered list（无序列表），【ol】ordered list（有序列表），

【li】list item（列表项） square（正方形），lower（较小的），

upper（上层的），roman（罗马），alpha（按字母顺序的）

四.CSS表格

1.表格边框

样式代码：

<style>
table,th,td
{
	border:1px solid black;
}
</style>

效果：

2.折叠边框

样式代码：

table
{
    border-collapse:collapse;
}
table,th, td
{
    border: 1px solid black;
}

效果：

2.表格宽度和高度

width和height属性定义表格的宽度和高度。

下面的例子是设置100％的宽度，50像素的th元素的高度的表格：

table 
{
    width:100%;
}
th
{
    height:50px;
}

3.设置垂直对齐

使用vertical-align:属性

样式代码：

table, td, th
{
	border:1px solid black;
}
td
{
	height:50px;
	vertical-align:bottom;
}

效果：

4.制定一个个性表格

代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>
<style>
#customers
{
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    width:100%;
    border-collapse:collapse;
}
#customers td, #customers th 
{
    font-size:1em;
    border:1px solid #98bf21;
    padding:3px 7px 2px 7px;
}
#customers th 
{
    font-size:1.1em;
    text-align:left;
    padding-top:5px;
    padding-bottom:4px;
    background-color:#A7C942;
    color:#ffffff;
}
#customers tr.alt td 
{
    color:#000000;
    background-color:#EAF2D3;
}
</style>
</head>

<body>
<table id="customers">
<tr>
  <th>Company</th>
  <th>Contact</th>
  <th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr class="alt">
<td>Berglunds snabbköp</td>
<td>Christina Berglund</td>
<td>Sweden</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr class="alt">
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr class="alt">
<td>Königlich Essen</td>
<td>Philip Cramer</td>
<td>Germany</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr class="alt">
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
<tr>
<td>North/South</td>
<td>Simon Crowther</td>
<td>UK</td>
</tr>
<tr class="alt">
<td>Paris spécialités</td>
<td>Marie Bertrand</td>
<td>France</td>
</tr>
</table>
</body>
</html>

效果：

5.翻译理解

border（边框），solid（立方体），bottom（底部），

collapse（折叠），vertical（垂直），align（排成一行）

标签：入门,表格,color,列表,paragraph,字体,font,链接,CSS
From： https://blog.csdn.net/Time_Controller/article/details/143812248

相关文章

  • 【MySQL】MySQL表的基本操作入门指南
    ......
  • 适用于学生入门项目的汇总
    今天推荐几个项目，毕业设计可借鉴下面这几个GitHub项目，我不是简单的推荐项目，还会给出一些思路，基于这些GitHub项目魔改成自己的项目，至少还能增加一个项目经验不是？除了一些GitHub项目，老逛还会推荐一些渠道，从这些渠道你同样可以获取到一些实战项目和源码。提示：本文章推......
  • 零基础 AI 入门实战（深度学习 + Pytorch）
    零基础AI入门实战（深度学习+Pytorch）一、引言在当今这个科技飞速发展的时代，人工智能（AI）已经渗透到了我们生活和工作的方方面面。深度学习作为AI领域中的强大技术，更是展现出了巨大的应用潜力。而Pytorch作为一款广受欢迎的深度学习框架，为我们实现各种AI应用提供了便捷的工......
  • Djourney新手入门基础：AI摄影+AI设计+AI绘画——AIGC作图的探索之旅
    Djourney新手入门基础：AI摄影+AI设计+AI绘画——AIGC作图的探索之旅随着人工智能技术的飞速发展，AIGC（ArtificialIntelligenceforGenerativeContent）技术正在重塑我们的创作方式，特别是在摄影、设计和绘画领域。Djourney作为一款集成了AI技术的强大作图工具，为创意者提供了无限可能......
  • 智能绘画Midjourney AIGC在设计领域中的应用从入门到精通
    智能绘画MidjourneyAIGC在设计领域中的应用：从入门到精通引言随着人工智能技术的飞速发展，AIGC（ArtificialIntelligenceforGenerativeContent）技术正逐步渗透到各个创作领域，特别是在设计行业中引发了革命性的变革。Midjourney作为AI绘画技术的代表，以其强大的图片生成能力和多样......
  • CSS2DRenderer
    /***@authormrdoob/http://mrdoob.com/*/THREE.CSS2DObject=function(element){ THREE.Object3D.call(this); this.element=element; this.element.style.position='absolute'; this.addEventListener('removed',function......
  • [SAS 扩展器]入门级12 Gb/s SX03-0B00-00/SX04-0B00-00 和 采用SAS-4技术SX06-0B00-02
    为数据密集型应用程序启用海量存储基础设施。SAS扩展器允许服务器、控制器卡和外部存储连接到大量驱动器。DataBolt技术聚合了SATA存储设备的带宽，以提供更高的系统性能。SX03-0B00-00入门级12Gb/sSAS35x36RSAS扩展器SX04-0B00-00入门级12Gb/sSAS35x28RSAS扩展器S......
  • 入门网络安全工程师要学习哪些内容（详细教程）
    ......
  • XXL-JOB快速入门（什么是XXL-JOB、部署XXL-JOB、在SpringBoot项目中接入XXL-JOB、XXL-JO
    文章目录1.分布式任务调度2.@Scheduled注解的局限3.什么是XXL-JOB4.通过源码部署调度中心4.1下载源码4.2源码说明4.3运行数据库脚本4.4补充：xxl_job数据库中八张表的作用4.5调度中心配置4.5.1数据库相关配置4.5.2日志相关配置4.6启动调度中心4.7访问调度中......
  • 初始化CSS
    html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em0}hr{box-sizing:content-box;height:0;overflow:visible}pre{f......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99