精华内容
下载资源
问答
  • css字体样式
    千次阅读
    2021-11-25 19:46:06

    目录

    字体大小font-size属性

    字体样式font-style属性

    字体系列font-family属性

    字体变体font-variant属性

    字体粗细font-weight属性

    字体font属性


    font子属性表 属性 说明 font-size 设置字体的大小 font-size 设置字体风格 font-variant 设置小型的大写字母字体 font-family 设置字体名 font-weight 设置字体的粗细

    字体大小font-size属性

    font-size:绝对大小|相对大小|关键字;

    绝对大小:可以使用in、cm、mm、pt、pc等单位为font-size赋值

    相对大小:可以使用em、ex、px、%等单位来赋值

    关键字:x-small、small、medium、large、x-large、xx-large

    字体样式font-style属性

    font-style:normal|italic|oblique
    font-style属性取值及说明表
    属性值说明
    normal表示不用斜体,是font-style默认属性
    italic表示使用斜体显示文字
    oblique表示使用倾斜字体显示

    字体系列font-family属性

    font-family:字体1,字体2,...,字体n;

    属性值为多个字体名称时,可以使用逗号()分隔。浏览器依次查找字体,只要存在就使用该字体,不存在将会继续找下去,以此类推,直到最后一种字体,仍不存在则使用默认字体(宋体)。如果字体名称中出现空格,必须使用双引号将字体括起来。

    字体变体font-variant属性

    font-variant:normal | small-caps;
    font-variant属性取值表
    属性值说明
    normal表示正常的字体,是font-variant属性的默认值
    small-caps表示使用小型的大写字母字体

    字体粗细font-weight属性

    font-weight:noral | bold | bolder | lighter |100|200|...|900
    font-weight属性取值表
    属性值说明
    normal表示正常的字体,是font-weight属性的默认值
    bold表示标准的粗体
    bolder表示特粗体(为相对参数)
    lighter表示细体(为相对参数)
    整数取值为100、200、...、900来表示粗细程度,100表示最细、400等价于normal、700等价于hold

    字体font属性

    font属性是复合属性,一次完成多个字体属性的设置,包括字体粗细、风格、字体变体、大小/行高及字体名称

    font:font-style font-weight font-variant font-size/line-height font-family
    更多相关内容
  • CSS字体样式

    千次阅读 2022-01-30 19:37:30
    CSS字体样式字体样式属性一、字体类型1.设置一种字体2.设置多种字体二、字体大小三、字体粗细四、字体风格五、字体颜色1、关键字2、16进制RGB值 字体样式属性 一、字体类型 font-family可以指定多种字体。使用多个...

    字体样式属性

    在这里插入图片描述

    一、字体类型

    font-family可以指定多种字体。使用多个字体时,将按从左到右的顺序排列,并且以英文逗号‘,’ 隔开。

    1.设置一种字体

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>字体类型</title>
        <style>
            .div1{font-family: Arial;}
            .div2{font-family: 'Times New Roman';}
            .div3{font-family: '微软雅黑';}
        </style>
    </head>
    <body>
        <div class="div1">Arial</div>
        <div class="div2">Times New Roman</div>
        <div class="div3">微软雅黑</div>
    </body>
    </html>
    

    在这里插入图片描述
    对于font-family属性,如果字体类型只有一个英文单词,则不需要加上双引号;如果字体类型是多个英文单词或者是中文,则需要加上双引号。

    2.设置多种字体

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Document</title>
        <style>
            p{font-family: Arial, Verdana, Georgia;}
        </style>
    </head>
    <body>
        <p>CSDN博客网</p>
    </body>
    </html>
    

    分析:p{font-family:Arial,Verdana,Georgia;}这一句的意思是:p元素优先使用Aria字体来显示,如果你的电脑没有装Arial字体,那就接着考虑Verdana字体。如果你的电脑还是没有装Verdana字体,那就接着考虑Georgia字体……以此类推。如果Arial、Verdana、Georgia这三种字体都没有安装,那么p元素就会以默认字体(即宋体)来显示。

    二、字体大小

    font-size属性取值有两种,一种是“关键字”,如small、medium、large等。另外一种是“像素值”,如 10px、16px、21px等。在实际开发中,关键字这种方式基本不会用。

    三、字体粗细

    字体粗细(font-weight)跟字体大小(font-size)是不一样的。粗细指的是字体的“肥瘦”,而大小指的是字体的“宽高”。font-weight属性取值有两种:一种是100~900的“数值”;另外一种是“关键字”。
    在这里插入图片描述

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>字体粗细</title>
        <style>
            .one{font-weight: 400;}
            .two{font-weight: 700;}
            .tree{font-weight: bold;}
        </style>
    </head>
    <body>
        <div class="one">CSDN博客网</div>
        <div class="two">CSDN博客网</div>
        <div class="tree">CSDN博客网</div>
    </body>
    </html>
    

    在这里插入图片描述

    四、字体风格

    使用font-style属性来定义斜体效果。font-style属性取值如下所示:
    在这里插入图片描述

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>字体样式</title>
        <style>
            .one{font-style: oblique;}
            .two{font-style: italic;}
            .tree{font-style: normal;}
        </style>
    </head>
    <body>
        <div class="one">CSDN博客网</div>
        <div class="two">CSDN博客网</div>
        <div class="tree">CSDN博客网</div>
    </body>
    </html>
    

    在这里插入图片描述
    上述代码中,font-style属性值为italic或oblique时,页面效果是一样的。这两者还是有区别的:有些字体有斜体italic属性,但有些字体却没有italic属性。oblique是让没有italic属性的字体也能够有斜体效果。

    五、字体颜色

    color属性取值有几种:比如“关键字”,“16 进制RGB值”。除了这两种,其实还有RGBA、HSL等。

    1、关键字

    关键字,指的就是颜色的英文名称,如red、blue、green等。

    2、16进制RGB值

    单纯靠“关键字”,满足不了实际开发需求,因此我们还引入了“16进制RGB值”。所谓的16进制RGB值,指的是类似#FBF9D0形式的值。
    例子:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>字体样式</title>
        <style>
            .one{color: aqua;}
            .two{color: #f5e90c;}
        </style>
    </head>
    <body>
        <div class="one">CSDN博客网</div>
        <div class="two">CSDN博客网</div>
    </body>
    </html>
    

    在这里插入图片描述

    展开全文
  • CSS字体样式调整详解

    千次阅读 2022-01-29 19:20:49
    大家好,今天分享一下CSS字体样式调整 我们对文本样式做以下的调整 1.颜色 2.文本对齐的方式 3.首行缩进 4.行高 5.装饰 写HTMl代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset...

    大家好,今天分享一下CSS字体样式调整

    我们对文本样式做以下的调整

    1.颜色

    2.文本对齐的方式

    3.首行缩进

    4.行高

    5.装饰

    写HTMl代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    
    <h1>字体样式</h1>
    <p class="p1">
        如果你听到一个 13 岁的黑客吹嘘他是多么的牛逼,是有可能的,因为有 Kali Linux 的存在。尽管有可能会被称为“脚本小子”,但是事实上,Kali 仍旧是安全专家手头的重要工具(或工具集)。
    <</p>
        Kali 是一个基于 Debian 的 Linux 发行版。它的目标就是为了简单:在一个实用的工具包里尽可能多的包含渗透和审计工具。Kali 实现了这个目标。大多数做安全测试的开源工具都被囊括在内。
    <p>
        相关 : 4 个极好的为隐私和安全设计的 Linux 发行版
    </p>
    
    <p>
        Kali 是一个基于 Debian 的 Linux 发行版。它的目标就是为了
    </p>
    
    </body>
    </html>
    

    显示网页页面效果:

    在这里插入图片描述

    这就是一段普通的网页文本

    看效果:
    在这里插入图片描述

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            h1{
                color: red;
                text-align: right;
                /*向右*/
                /*text-align:排版*/
            /*    将h1标签当中的元素,更改背景颜色为red(红色)*/
            }
        </style>
    </head>
    <body>
    
    <h1>字体样式</h1>
    <p class="p1">
        如果你听到一个 13 岁的黑客吹嘘他是多么的牛逼,是有可能的,因为有 Kali Linux 的存在。尽管有可能会被称为“脚本小子”,但是事实上,Kali 仍旧是安全专家手头的重要工具(或工具集)
    </p>
        Kali 是一个基于 Debian 的 Linux 发行版。它的目标就是为了简单:在一个实用的工具包里尽可能多的包含渗透和审计工具。Kali 实现了这个目标。大多数做安全测试的开源工具都被囊括在内。
    <p>
        相关 : 4 个极好的为隐私和安全设计的 Linux 发行版
    </p>
    
    <p>
        Kali 是一个基于 Debian 的 Linux 发行版。它的目标就是为了
    </p>
    
    </body>
    </html>
    

    效果:
    在这里插入图片描述

    字体标题居中:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            h1{
                color: red;
                text-align: center; /*居中*/
                /*text-align: right;*/     /*向右*/
    
                /*text-align:排版*/
            /*    将h1标签当中的元素,更改背景颜色为red(红色)*/
            }
        </style>
    </head>
    <body>
    
    <h1>字体样式</h1>
    <p class="p1">
        如果你听到一个 13 岁的黑客吹嘘他是多么的牛逼,是有可能的,因为有 Kali Linux 的存在。尽管有可能会被称为“脚本小子”,但是事实上,Kali 仍旧是安全专家手头的重要工具(或工具集)
    </p>
        Kali 是一个基于 Debian 的 Linux 发行版。它的目标就是为了简单:在一个实用的工具包里尽可能多的包含渗透和审计工具。Kali 实现了这个目标。大多数做安全测试的开源工具都被囊括在内。
    <p>
        相关 : 4 个极好的为隐私和安全设计的 Linux 发行版
    </p>
    
    <p>
        Kali 是一个基于 Debian 的 Linux 发行版。它的目标就是为了
    </p>
    
    </body>
    </html>
    

    效果:

    在这里插入图片描述

    .p1{
                text-indent: 2em;
            /*这里是首行缩进    */
            }
    

    效果:

    在这里插入图片描述

     .p3{
                background: burlywood;
                height: 300px;
                line-height: 300px;
            }
    
    <p class="p3">
        Kali 是一个基于 Debian 的 Linux 发行版。它的目标就是为了
    </p>
    

    效果:

    在这里插入图片描述

    在HTML主体部分写上:

    <p class="li1">12455123</p>
      <p class="li2">12455123</p>
      <p class="li3">12455123</p>
    

    在style 当中写这样的代码:

     .li1{
                text-decoration: underline;
                /*这是下划线*/
            }
            .li2{
                text-decoration: line-through;
                /* 这是中划线*/
            }
            .li3{
                text-decoration: overline;    
                /*这是下划线*/
            }
    

    结果:

    在这里插入图片描述

    看箭头指向的三个地方

    分别是下划线,中划线,上划线

    创建images目录

    在这里插入图片描述

    放图片:

    在这里插入图片描述

    写以下代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <p>
        <img src="images/1.png" alt="">
        shdhydhhfj
    </p>
    </body>
    </html>
    

    看效果

    在这里插入图片描述

    写css代码:

    <style>
            img,span{
                /*这样就会有文字居中的效果*/
                vertical-align: middle;
            }
        </style>
    

    看效果:

    在这里插入图片描述

    好了,有关CSS字体样式调整就讲到这里了,谢谢大家。

    展开全文
  • 之前学习了css的一些基础选择器,然而今天要介绍css的复杂选择器,复杂选择器一共有三种 1.父子(派生)选择器 <em>234 <em>123 此时要使234有颜色,需要用到父子选择器,虽说用之前的标签选择器可以让它有...
  • 9款漂亮的纯css字体样式

    千次阅读 2021-02-04 23:20:16
    样式: 代码: <html> <head> </head> <style> body{ text-align: center; } .hcqFont{position:relative;letter-spacing:.07em;font-size:3em;font-weight:normal;margin:0 auto} ....

    样式:
    在这里插入图片描述
    代码:

    <html>
    <head>
    </head>
    <style>
        body{
        	text-align: center;
        }
        .hcqFont{position:relative;letter-spacing:.07em;font-size:3em;font-weight:normal;margin:0 auto}
        .hcqFont:before,.hcqFont:after{position:absolute;top:0;left:0;right:0}
        .hcqStyle1{color:hsl(184,80%,25%);text-shadow:0 0 1px currentColor,/*highlight*/-1px -1px 1px hsl(184,80%,50%),0 -1px 1px hsl(184,80%,55%),1px -1px 1px hsl(184,80%,50%),/*light shadow*/1px 1px 1px hsl(184,80%,10%),0 1px 1px hsl(184,80%,10%),-1px 1px 1px hsl(184,80%,10%),/*outline*/-2px -2px 1px hsl(184,80%,15%),-1px -2px 1px hsl(184,80%,15%),0 -2px 1px hsl(184,80%,15%),1px -2px 1px hsl(184,80%,15%),2px -2px 1px hsl(184,80%,15%),2px -1px 1px hsl(184,80%,15%),2px 0 1px hsl(184,80%,15%),2px 1px 1px hsl(184,80%,15%),-2px 0 1px hsl(184,80%,15%),-2px -1px 1px hsl(184,80%,15%),-2px 1px 1px hsl(184,80%,15%),/*dark shadow*/2px 2px 2px hsl(184,80%,5%),1px 2px 2px hsl(184,80%,5%),0 2px 2px hsl(184,80%,5%),-1px 2px 2px hsl(184,80%,5%),-2px 2px 2px hsl(184,80%,5%)}
        .hcqStyle2{display:inline-block;font-weight:bold;color:#def;text-shadow:0 0 1px currentColor,-1px -1px 1px #000,0 -1px 1px #000,1px -1px 1px #000,1px 0 1px #000,1px 1px 1px #000,0 1px 1px #000,-1px 1px 1px #000,-1px 0 1px #000;-webkit-filter:url(#diff1);filter:url(#diff1);/*background:#def;padding:0 .2em*/}
        .hcqStyle3{background: #EEE url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAIAAAAmkwkpAAAAHklEQVQImWNkYGBgYGD4//8/A5wF5SBYyAr+//8PAPOCFO0Q2zq7AAAAAElFTkSuQmCC) repeat;text-shadow: 5px -5px black, 4px -4px white;font-weight: bold;-webkit-text-fill-color: transparent;-webkit-background-clip: text}
    	.hcqStyle4{color: transparent;-webkit-text-stroke: 1px red;letter-spacing: 0.04em;}
    	.hcqStyle5{color: transparent;background-color : blue;text-shadow : rgba(255,255,255,0.5) 0 5px 6px, rgba(255,255,255,0.2) 1px 3px 3px;-webkit-background-clip : text;}
    	.hcqStyle6{color: gold;letter-spacing: 0;text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135}
    	.hcqStyle7{font-family:cursive;text-shadow:6px 2px 2px #333;color:deeppink}
    	.text-reflect-base{color: palegreen;-webkit-box-reflect:below 10px;}
    	.text{
    	    width: 300px;
    	    height: 200px;
    	    position: absolute;
    	    left: 50%;
    	    margin-left: -150px;
    	    background-image: -webkit-linear-gradient(left,blue,#66ffff 10%,#cc00ff 20%,#CC00CC 30%, #CCCCFF 40%, #00FFFF 50%,#CCCCFF 60%,#CC00CC 70%,#CC00FF 80%,#66FFFF 90%,blue 100%);
    	    -webkit-text-fill-color: transparent;
    	    -webkit-background-clip: text;
    	    -webkit-background-size: 200% 100%; 
    	    -webkit-animation: masked-animation 4s linear infinite;
    	    font-size: 35px;
    	}
    	@keyframes masked-animation {
    	    0% {
    	        background-position: 0  0;
    	    }
    	    100% {
    	        background-position: -100%  0;
    	    }
    	}
    </style>
    <body>
        <h1 class='hcqFont hcqStyle1'>hcqFont hcqStyle1</h1>
        <h1 class='hcqFont hcqStyle2'>hcqFont hcqStyle2</h1>
        <h1 class="hcqStyle3">hcqStyle3</h1>
    	<h1 class="hcqStyle4">hcqStyle4</h1>
    	<h1 class="hcqStyle5">hcqStyle5</h1>
    	<h1 class="hcqStyle6">hcqStyle6</h1>
    	<h1 class="hcqStyle7">hcqStyle7</h1>
    	<h1 class='text-reflect-base'>text-reflect-base</h1>
    	<div class="text"><p>text</p></div>
    </body>
    </html>
    
    展开全文
  • 二十款漂亮的CSS字体样式

    千次阅读 2021-08-04 07:44:54
    样式一:body {margin: 0;padding: 0;line-height: 1.5em;font-family: "Times New Roman", Times, serif;font-size: 14px;color: #000000;background: #f2e7ca url(images/templatemo_body.jpg) top center no-...
  • css文本样式(一):css字体样式

    千次阅读 2021-05-05 17:57:51
    css字体样式 文字样式属性: 字体:font-family 文字大小:font-size 文字颜色:font-color 文字粗细:font-weight 文字样式:font-style font-family字体属性:定义元素内文字以什么字体来显示。 语法:font-...
  • 主要为大家介绍下css下的字体样式,font的属性与写法,需要的朋友可以参考下
  • css字体样式属性大全(内附实例)

    千次阅读 2020-07-31 00:08:53
    综合设置字体样式 font-size:字号大小 font-size 属性用于设置字体字号,该属性的值可以使用相对长度单位,也可以使用绝对单位长度,其中,相对单位比较常用,推荐使用像素单位px,绝对单位使用较少 可选参数值...
  • bakgrond ? ? ? 在一个声明中设置所有的背景属性 ? bacground-attachment ? 设置背景图像是否固定或者随着页面的其余部分滚动 bacound-olo ? 设置元素的背景颜色 bckruige ? 设置元素的背景图像 ?... CSS 字体属性F
  • 7款漂亮的纯css字体样式

    千次阅读 2020-11-10 10:57:04
    转载于:https://blog.csdn.net/aa19891204/article/details/81021591 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>...h1 class="vintage1">
  • css字体样式属性有哪些

    千次阅读 2021-08-04 07:04:04
    css字体样式属性有:1、color是字体颜色;2、【font-size】字号大小;3、【font-family】字体;4、【font-weight】字体粗细;5、【font-style】字体风格。本教程操作环境:windows7系统、css3版,DELL G3电脑。css...
  • CSS字体样式

    千次阅读 多人点赞 2020-06-21 14:10:43
    1. CSS字体样式属性 1.1 font-size:字号大小 font-size属性用于设置字号,该属性的值可以使用相对长度单位,也可以使用绝对长度单位。其中,相对长度单位比较常用,推荐使用像素单位px,绝对长度单位使用较少。具体...
  • css字体样式属性有:1、font-size:字号大小。2、font-family:规定元素的字体系列。3、font-weight:字体粗细。4、font-style:字体风格。5、font:综合设置字体样式。.css字体属性说明:1、font-size:字号大小font...
  • CSS字体样式设置、CSS文本样式设置

    万次阅读 2019-10-22 18:23:54
    一、CSS字体样式设置 1.字体样式设置 字体样式大致有如下几种特征: 字体类型(风格)、字体粗细、字体大小、字体系列 (1)字体类型(风格) font-style 用于设置字体风格,可设置以下值: ① normal:普通字体 ② ...
  • 1.指定字体:font-family (1)实用通用字体系列: 复制代码代码如下:body {font-family: sans-serif;} (2)制定字体系列: 复制代码代码如下: h1 {font-family: Georgia, <span xss=removed>serif;} 在所有 ...
  • 使用CSS来编辑字体有各种各样的方法,每位设计师都会有自己偏爱的设计习惯,但必须选择更能提高用户体验的方法。今天暴风彬彬将集中讨论字体大小的控制来体  在设计网页时,没有比页面的外观更重要的了。所以,如果...
  • CSS——CSS常用的字体样式

    千次阅读 2020-11-08 19:54:56
    CSS——字体样式 常用: font-family:字体 font-size:大小 font-weight:粗细 color:颜色 字体样式测试 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title...
  • 手机端应用的CSS字体样式规范

    千次阅读 2019-06-26 11:24:38
    本人主要是前后端开发,设计不是很在行,在没有设计师的情况下,调字体样式真的很苦恼。这里整理一下自己通用的字体大小和颜色,方便后续直接使用。 这里是借鉴了微信小程序的视觉规范,主要是用于手机端H5应用、像...
  • CSS字体样式属性 font-size:字号大小 font-size属性用于设置字号,该属性的值可以使用相对长度单位,也可以使用绝对长度单位。其中,相对长度单位比较常用,推荐使用像素单位px,绝对长度单位使用较少。具体如下: ...
  • CSS基础之字体样式

    2022-04-23 20:29:14
    CSS基础之字体样式
  • css中文字体样式代码

    千次阅读 2020-06-12 14:26:32
    { font-family:"Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STHeiti,MingLiu } 加上中文名“微软雅黑”是为了兼容opera 在css中使用英文表示法,以下附常见中文字体的英文名:
  • css怎么改字体样式

    千次阅读 2021-06-29 08:44:51
    CSS是一种定义样式结构如字体、颜色、位置等的语言,那么我们该如何使用css设置字体样式呢?下我们来看一下使用css字体样式的方法。css字体样式的方法:1、font-size指定字体大小,常用单位有em和px2、font-...
  • 爱是朝朝暮暮的相守CSS字体样式属性font-size:字号大小font-family:字体注意CSS Unicode字体font-weight:字体粗细font-style:字体风格font:综合设置字体样式 (重点)CSS外观属性color:文本颜色line-height:行间距text...
  • CSS文字样式

    千次阅读 2022-01-30 21:10:46
    CSS文字样式,color,font-size,cursor:pointer;a{text-decoration:line-through;}a{text-decoration:overline;}underlinecolor:red;font-size:30px;font-weight:bold;font-weight:bold;font-family:"楷体";font-...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 154,896
精华内容 61,958
关键字:

css字体样式