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>

相关文章
|
1天前
|
前端开发
页面无法滑动-CSS: touch-action属性
页面无法滑动-CSS: touch-action属性
20 0
|
1天前
|
容器
mui.css 滚动条消失 导致超出部分无法显示 overflow属性
mui.css 滚动条消失 导致超出部分无法显示 overflow属性
10 0
|
1天前
|
前端开发
【Web前端】CSS基本语法规范和引入方式&&常见选择器用法&&常见元素属性
【Web前端】CSS基本语法规范和引入方式&&常见选择器用法&&常见元素属性
|
1天前
|
前端开发 容器
css 中可以让文字在垂直和水平方向上重叠的两个属性是什么?
css 中可以让文字在垂直和水平方向上重叠的两个属性是什么?
9 1
|
1天前
|
前端开发 UED
【专栏:CSS 基础篇】CSS 字体与文本样式:美化你的网页内容
【4月更文挑战第30天】网页设计中,字体和文本样式至关重要,影响视觉效果和用户体验。CSS允许设计师设置字体家族、大小、颜色、加粗、倾斜、行高和对齐方式等。高级特性包括引入外部字体和使用字体变体。响应式设计适应不同设备,确保良好阅读体验。实际案例和最佳实践强调易读性和一致性。掌握这些技巧能提升网页美感和用户交互,创造更多可能。
|
1天前
|
前端开发
css样式字体、文本、背景属性,盒子模型详解,轻松调教出优美的字体和网页背景色
css样式字体、文本、背景属性,盒子模型详解,轻松调教出优美的字体和网页背景色
|
1天前
|
前端开发
css_字体混合正片叠底与发光
css_字体混合正片叠底与发光
15 0
css_字体混合正片叠底与发光
|
1天前
|
前端开发 开发者 流计算
css字体
【4月更文挑战第23天】css字体
14 3
|
1天前
|
前端开发
CSS列表属性
CSS列表属性。
18 5
|
1天前
|
前端开发
css 字体渐变样式(设置字体渐变样式+附加实现源码)
css 字体渐变样式(设置字体渐变样式+附加实现源码)
22 0