css字体属性

简介: css基础

<!DOCTYPEhtml>

<htmllang="en">


<head>

   <metacharset="UTF-8">

   <metahttp-equiv="X-UA-Compatible"content="IE=edge">

   <metaname="viewport"content="width=device-width, initial-scale=1.0">

   <title>字体属性</title>

   <style>

       /* css Fonts(字体)属性用于定义字体系列,大小,粗细,和文字类似 */

       /* 字体系列 */

       /* p {font-family:"微软雅黑";} */

       

       h2 {

           font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

       }

       /* 1各个字体之间必须使用英文状态下的逗号隔开

           2.一半情况下,如果有空格隔开的多个单词组成的字体,就需要加引号

           3.尽量使用系统默认自带字体,保证在任何用户的浏览器中都能正确显示

           4.最常见的几个字体:就是上面那个 */

       /* 1.3.2字体大小 */

       /* css使用font-size属性定义字体大小

           p {

               font-size:20px;

           } */

       

       body {

           font-size: 16px;

       }

       /* 1.px大小是我们页面的最常用的单位

               2.谷歌浏览器的文字大小为16px

               3.不同浏览器可能默认显示的字号大小不一致,我们尽量给一个明确值大小,不要默认大小

               4.可以给body指定整个页面文字的大小 */

       /* 1.3.3字体粗细 */

       

       .bold {

           /* font-weight: bold;与下面等价 可以少计单词,开发中也是更提倡数字 */

           font-weight: 700;

       }

       

       h2 {

           /* font-weight: normal 与下面等价 取消加粗或变细; */

           font-weight: 400;

       }

       /* 1.学会让加粗标签(比如h和strong等)不加粗,或者其他标签加粗

           2.实际开发中,我们更喜欢用数字表示加粗 */

       /* 1.3.4文本样式 */

       

       p {

           font-style: italic;

       }

       

       em {

           font-style: normal;

       }

       /* 平时我们很少个文字加斜体,反而要给斜体标签em改为不倾斜字体 */

       /* 1.3.5字体复合属性 */

       

       div {

           /* 复合属性:简写方式 */

           /* font: font-style font-weight font-size/line-height font-family; */

           font: italic70016px'Microsoft yahei';

           /* 一定按照顺序先斜体 然后大小/行高  再字体 */

           /* 不需要设置的属性可以省略,但是必须保留font-size和font-family属性,否则font属性将不起作用

            */

       }

   </style>

</head>


<body>

   <h2>我的小秘密</h2>

   <h1>你想知道我的小秘密吗</h1>

   <!--标题标签比较特殊改不了大小-->

   <div>我想知道</div>

   <pclass="bold">就不告诉你</p>

   <p>你撒个娇我就告诉你</p>

   <em>哈哈哈</em>

   <div>嘿嘿嘿</div>

</body>


</html>

相关文章
|
3月前
|
前端开发
css的渐变属性linear-gradient
css的渐变属性linear-gradient
|
2月前
|
前端开发
css 设置背景色渐变、字体颜色渐变
css 设置背景色渐变、字体颜色渐变
|
3月前
|
前端开发
CSS属性:盒子模型
CSS属性:盒子模型
33 0
|
3月前
|
前端开发
CSS属性
CSS属性
32 0
|
28天前
|
Web App开发 前端开发 iOS开发
css所有缩写属性,CSS属性简写整理
css所有缩写属性,CSS属性简写整理
23 1
|
3月前
|
前端开发
前端基础(五)_CSS文本文字属性、背景颜色属性
本文详细介绍了CSS中关于文本和背景颜色的样式属性。包括字体大小、字体族、字体加粗、字体样式、文本行高、`font`属性、文本颜色、文本对齐方式、文本装饰线、首行缩进等文本属性,以及背景颜色、背景图片、背景重复、背景位置等背景属性。文章通过示例代码展示了这些属性的具体应用和效果。
43 3
前端基础(五)_CSS文本文字属性、背景颜色属性
|
2月前
|
前端开发
CSS 中哪些属性可以继承
在 CSS 中,属性分为可继承与不可继承。可继承属性会在子元素中沿用父元素的样式设定。常见可继承属性包括:文本属性(如 `font-family`, `color`),列表属性(如 `list-style`),表格布局属性(如 `border-collapse`),以及其他如 `visibility` 和 `direction` 等属性。正确理解这些属性有助于更高效地进行样式设计。
|
2月前
|
存储 前端开发 安全
详解CSS之Web 字体
详解CSS之Web 字体
27 4
|
28天前
|
前端开发
css简写属性
css简写属性
30 0
|
3月前
|
前端开发
【前端web入门第三天】02 CSS字体和文本
本文详细介绍了CSS中字体和文本的相关属性。字体部分涵盖字体大小、粗细、样式、行高、字体族及`font`复合属性,通过具体示例展示了如何设置和使用这些属性。文本部分则讲解了文本缩进、对齐方式、修饰线及文字颜色等属性,并提供了实用的代码示例。此外,还简要介绍了调试工具中的一些细节,如错误属性标识和属性生效状态的控制。
68 28