CSS的字体样式

1. span标签(约定俗成:重要的东西用它括起来)

首选介绍一个约定俗成的东西:span标签。一般将想要突出的东西,比较重要的东西,用span标签括起来。

比如,”学习Java“这几个字,想突出Java,就用<span>和</span>标签把Java括起来,然后在用CSS的比如id标签选择器之类的操作它。

当然,不写成span也无所谓,但这是个约定俗成的东西,用span表示重要。

HTML代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

学习<span id="重要">Java</span>

</body>
</html>

CSS代码:

/*
id选择器:# id名字{}
*/
#重要{
font-size: 50px;
}

效果:

2. 字体

1、字体

2、大小

3、粗细

4、颜色

5、也可以一行把上面全写上

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <link rel="stylesheet" href="style.css">
</head>
<body>

<p class="p1">
  宋钢:“要是换成你,你会怎么办?”
  李光头:“要是换成我,我就宰了你!”
  宋钢:“我是你的兄弟啊?”
  李光头:“兄弟也一样宰了。”
</p>

<p class="p2">
  宋钢听了这话怔住了,过了一会儿他嘿嘿笑了起来,他仔细地看着李光头,
  看着这个相依为命的兄弟。
</p>

<p class="p3">
  这个兄弟刚才的那句话让宋钢突然获得了解放,他觉得自由了,
  他可以全心全意地投入到林红那里去了,而且势不可挡。
</p>

<p class="p4">
  宋钢笑出了声音,他由衷地对李光头说:“你这话说得真好。”
  李光头:“你要干什么?”
  宋钢:“我要去见林红,我要去告诉她,我喜欢她。”
</p>

<p class="p5">
  李光头:“宋钢,我们是兄弟……”
  宋钢幸福地回答:“兄弟也一样宰了。”
</p>

</body>
</html>

CSS:

/*
类选择器:. 类名字{}
*/
.p1 {
   font-family: 楷体;
}

.p2 {
   font-size: 30px;
}

.p3 {
   font-weight: bold;
}

.p4 {
   color: red;
}

.p5 {
   font: oblique bolder 16px "楷体";
}

效果:

CSS的字体样式的更多相关文章

  1. CSS之字体样式

    css字体样式 font-size:字号大小 font-size属性用于设置字号,该属性的值可以使用相对长度单位,也可以使用绝对长度单位.其中,相对长度单位比较常用,推荐使用像素单位px,绝对单位使用 ...

  2. css的字体样式怎么写

    为保证字体的正常加载 sans-serif不能丢 font-family:'MicrosoftYahei','微软雅黑',Arial,'宋体',sans-serif;

  3. css字体样式(Font Style),属性

    css字体样式(Font Style),属性   css字体样式(Font Style)是网页中不可或缺的样式属性之一,有了字体样式,我们的网页才能变得更加美观,因此字体样式属性也就成为了每一位设计者 ...

  4. 详解CSS设置默认字体样式

    浏览器默认的样式往往在不同的浏览器.不同的语言版本甚至不同的系统版本都有不同的设置,这就导致如 果直接利用默认样式的页面在各个浏览器下显示非常不一致,于是就有了类似YUI的reset之类用来尽量重写浏 ...

  5. css中的字体样式及元素样式

    css中的字体样式一般包含有就9中,常见的有7种.这7种依次为: 1.字体样式:font-family: 2.字体大小:font-size: 3.字体加粗:font-weight: 4.字体斜体:fo ...

  6. 详解CSS网页布局中默认字体样式

    浏览器默认的样式往往在不同的浏览器.不同的语言版本甚至不同的系统版本都有不同的设置,这就导致如 果直接利用默认样式的页面在各个浏览器下显示非常不一致,于是就有了类似YUI的reset之类用来尽量重写浏 ...

  7. 【CSS学习】--- 字体样式

    一.前言 CSS字体属性可以定义文本的字体系列.大小.加粗.颜色.风格(如斜体)和变形(如小型大写字母). CSS的字体属性: font-family 设置字体系列 font-size 设置字体的尺寸 ...

  8. CSS字体样式属性

    font-size 字号大小 一般推荐使用相对长度(px ,em),不推荐使用绝对长度(in,cmm,mm,pt) font-family 字体 1.可以同时指定多个字体,中间用英文状态的逗号隔开,英 ...

  9. html网页什么样的字体最好看,css设置各种中文字体样式代码

    css代码如下:{ font-family:"Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STHeiti,Mi ...

随机推荐

  1. 桌面粉笔功能.有window ink功能区开启的快捷键

    功能区开启的快捷键 方法1: win+W唤出工作区,可以直接点击,但是没有快捷键.prtsc是直接截取屏幕(国际通用)然后在画图打开或直接粘贴于某处都可以. 方法2:快捷键是 Windows 徽标键 ...

  2. P1339 [USACO09OCT]热浪Heat Wave(SPFA)

    -------------------------------------- 农夫约翰再显神威,双向热浪,双倍数组 (双倍大小,否则RE) ------------------------------ ...

  3. KMP刷题记录

    [BZOJ4698][SDOI2008]Sandy的卡片 差分一下然后选一个串,用这个串的所有前缀和其他串kmp,求出最长的公共部分即可 代码: #include <bits/stdc++.h& ...

  4. qt 带箭头的直线 (类似viso)

    2020.02.27 本来上传到CSDN,后来想想,我要放弃csdn了.csdn已经跟我分享的精神背道而驰了.想要代码,留邮箱吧. 近来Qt开发时可能遇到这样的需求:两个(或多个)矩形,要用直线将它们 ...

  5. Visionpro学习笔记(壹)

    注册4年,第一次发了随笔.我的博客将主要涉及到visionPro软件的学习,labview数据采集方面的思考,c#及VS的学习 此随笔系列主要是关于VisionPro(以后简称VP)的学习及使用. 近 ...

  6. leetcode再次总结

    注释 testcases (1)简单一想O(n)算法,有可能通过二分查找变形优化成log(n) (2)双指针:一快一慢 一静一动(数组中最小的长度满足条件,常常用于,确定了一个范围,然后一个指针静止, ...

  7. Vue图片验证码-自定义组件高级版

    最近项目中要用到图片验证码,网上一查有很多,基本都是千篇一律的4位纯数字验证码.首先得感谢那位一代目兄台提供的模板,由于不能满足需求,所以对其进行了改造升级. 经改造的图片验证码能满足一下情形使用:① ...

  8. pyqt5-进度条控制

    1.基于自定义类的方式 继承自QProgressBar类,然后重写timerEvent方法,当该组件设置定时器的时候,会自己处理定时的处理方法,完成相应的功能 from PyQt5.Qt import ...

  9. 软件分享大会之Bonny使用感想

    近日大一期末临近,处在计算机大类专业的我也即将面临专业分流.在软件工程这个新的开始前,未来的系主任组织了一次软件分享会,通过大二.大三学生向大一的我们的作品展示,提前让我们了解自制软件如现流行软件的不 ...

  10. VUE动画Javascript钩子不生效问题记录

    举例小球动画如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...