HTML&CSS基础-字体的样式

                                          作者:尹正杰

版权声明:原创作品,谢绝转载!否则将追究法律责任。

一.HTML源代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>字体的样式</title> <style>
.hello{
/**
* 设置字体颜色,使用color来设置文字的颜色
*/
color: red; /**
* 设置文字的大小,浏览器中一般默认的文字大小都是16px
* font-size设置的并不是文字本身的大小
* 在页面中,每个文字都是处在一个看不见的框中的
* 我们设置的font-size实际上是设置格的高度,并不是字体的大小
* 一般情况下文字都要比这个格要小一些,也有时会比格大,根据字体的不同,显示效果也不同。
*/
font-size: 30px; /**
* 通过font-family可以指定文字的字体
* 当采用某种字体时,如果浏览器支持该字体则使用,如果浏览器对该字体不支持,则使用默认字体
* 该样式可以同时指定多个字体,多个字体之间使用,分开当采用多个字体时,浏览器会优先使用前边的字体,如果前面的字体没有,则尝试依次匹配下一个字体,若一个都匹配不上则使用默认字体。
* 浏览器使用的字体默认就是计算机中的字体,如果计算机中有则使用,若没有就不用。windows操作系统默认存放系统路径在:"C:\Windows\Fonts"
* 在开发中,如果字体太奇怪,用的太少了,尽量不要使用,有可能用户电脑没有(比如windos中的"curlz mt","微软雅黑"等字体,在linux操作系统不一样有哟~),就不能达到想要的效果。
*/
font-family: "curlz mt","华文彩云","arial", "微软雅黑";
}
</style>
</head>
<body> <p class="hello">我是一个P标签,12345,上上打老虎,abcdefg</p>
</body>
</html>

二.浏览器打开以上代码渲染结果

HTML&CSS基础-字体的样式的更多相关文章

  1. HTML&CSS基础-内联样式和内部样式表

    HTML&CSS基础-内联样式和内部样式表 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.CSS(Cascading Style Sheets)简介 层叠样式表(Cas ...

  2. css基础—字体那些事

    css基础-字体那些事 1. 首先讲字的大小样式等 字体大小 font-size: 40px; 文字字体 font-family: "宋体",Arial; 文字样式 font-st ...

  3. css 基础 字体和文本样式

    字体样式处理font-size:30px:// 设置字体大小 font-weight:700://设置粗体 font-sytle:italic; //设置文字斜体 font-family: 斜体,宋体 ...

  4. CSS font-size字体大小样式属性

    设置字体大小CSS单词与语法 基本语法结构: .divcss5{font-size:12px;}设置了文字大小为12px像素Font-size+字体大小数值+单位 单词:font-size语法:fon ...

  5. CSS基础-字体

    字体变化设置 改变字体颜色 color 改变字体大小 font-size 改变字体粗细 font-weight 改变字体样式 font-family 改变字间距 letter-spacing 改变字体 ...

  6. Python 45 长度及颜色单位 、字体样式 、文本样式 、背景样式 、css基础选择器

    一:长度及颜色单位   长度单位       px(像素)        in(英寸)       pt(点),一个标准的长度单位,1pt = 1/72in       mm(毫米)       cm ...

  7. WEB前端开发CSS基础样式全面总结

    Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...

  8. CSS3基础(2)—— 文字与字体相关样式、盒子类型、背景与边框相关样式、变形处理、动画功能

    一. CSS3 文字与字体相关样式 1. 给文字添加阴影 text-shadow: length length length ccolor; 属性适用于文本阴影,指定了水平阴影,垂直阴影,模糊的距离, ...

  9. CSS基础选择器(选择器的优先级),CSS样式块( 长度/颜色/显示方式/文本样式),盒模型组成,盒模型-block,盒模型布局

    CSS基础选择器 (1)id选择器:   #       =>  标签拥有 id="user"  属性 <style> #user { width: 200px; ...

随机推荐

  1. ireport初接触

    我用的版本5.6.0 @官网下载地址 下载安装@参考博客龙凌云端,着重留意:在windows下使用,只下载iReport-5.6.0-windows-installer.exe就行了 安装后配置环境变 ...

  2. LInux学习之路

    linux 简单操作命令 cd 进入目录 ls 查看 ll详细查看 man ls -- help touch mkdir find 正则表达式 ? [] [a-z][0-9] {字符串,} {a..z ...

  3. win运行canal

    1.mysql开启log_bin 用命令查看是否开启 SHOW VARIABLES LIKE 'log_bin'; OFF为未开启,ON为开启 Win环境的话找到my.ini,Linux环境的话找到m ...

  4. Zookeeper架构及FastLeaderElection机制

    原文链接:http://www.jasongj.com/zookeeper/fastleaderelection/ Zookeeper是什么 Zookeeper是一个分布式协调服务,可用于服务发现,分 ...

  5. python基础教程(2)

    Python 基础教程 Python 是一种解释型.面向对象.动态数据类型的高级程序设计语言. 执行Python程序 对于大多数程序语言,第一个入门编程代码便是 "Hello World!& ...

  6. docker使用2

    新建并启动容器 docker  run  [options]  imageId options -i  以交互模式运行容器 -t  为容器重新分配一个为终端设备 -p  主机端口:容器端口 --nam ...

  7. Django中的admin

    1.基本知识 在用Django框架写了一个网站之后,我们添加数据大概有两种方式: 1.在连接的数据库中添加数据 2.登录admin,进入后台添加数据 创建一个Django项目后,我们在url.py中会 ...

  8. IDLE与pycharm执行相同代码结果却不同,原因分析

    最近在熟悉Python的class类的时候,无意中发现同样的代码,在pycharm和IDLE中结果不同,闲话少说先上代码: class aa(): def __init__(self,name): p ...

  9. TZOJ5697: 数据结构实验:归并排序

    #include<stdio.h> #include<stdlib.h> void merge(int a[], int start,int mid,int end) { )) ...

  10. java 简易日历表

    在页面上输出1900年以后任意一年的简易日历表 package text3; import java.util.Scanner; public class MyCalendar { public st ...