精华内容
下载资源
问答
  • font-weight:文字加粗 bold:加粗 ; normal:正常; font-style:文字倾斜 italic:斜体; normal:正常; font-size:文字大小 用数字加单位(像素:px)来表示文字大小 font-family:设置字体 用双引号包裹住...

    font标签

    font-weight:文字加粗
    • bold:加粗 ;
    • normal:正常;
    font-style:文字倾斜
    • italic:斜体;
    • normal:正常;
    font-size:文字大小
    • 用数字加单位(像素:px)来表示文字大小
    font-family:设置字体
    • 用双引号包裹住字体名就可以了;
    font样式的复合写法

    -设置行高的时候要在字体大小后面加上’ / '。

    行高

    • line-height:行高:文字在一行里面占用的位置,当行高与容器的高度一致时,文字会垂直居中。
    • 多行文字测量行高的办法:
      1. 确定文字的大小
      2. 确定两行文字之间的空隙大小
      3. 空袭大小除以2,得出来的值就是每行文字的上下的空袭的大小
      4. 注:当行高的大小为奇数时,文字的上方要比下方少一个像素,当行高为偶数时 ,那么文字的上下空隙一致。

    段落

    color:该段落文字的颜色
    • 正常表示颜色的方式都可以为其值。
    text-align:文本对齐(显示)
    • left(默认),right,center。
    em:字体大小的单位
    • 一般根据当前字体大小来计算
    text-indent:首行缩进
    • 以em为标准单位
    text-decoration:文本修饰
    • underline 下划线。
    • none 没有下划线。
    letter-spacing:字母间距
    • 数字加上单位就行了。
    word-spacing:单词间距
    • 以空格为解析单位。
    white-space:强制不换行
    • normal:正常(换行 );
    • nowrap:不换行;

    小技巧:

    • 一个空格的大小时宋体字状态下文字大小的一半。
    • 测量文字的大小最好使用从上到下的方法。
    展开全文
  • 本文是HTML及CSS课程的第十二课。CSS中文本属性定义字符间距、对其方式、文本缩进等;字体属性定义字体系列、大小、加粗、风格等。本文主要介绍CSS中常见的文本属性和字体属性

    本文是HTML及CSS课程的第十二课。CSS中文本属性定义字符间距、对其方式、文本缩进等;字体属性定义字体系列、大小、加粗、风格等。本文主要介绍CSS中常见的文本属性和字体属性

    一、常见文本属性

    CSS中文本属性定义字符间距对其方式文本缩进等。

    1、文本装饰

    CSS中使用text-decoration属性为文本添加装饰线
    下面是一个示例:

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        <title> 文本装饰 </title>
        <style type="text/css">
          .p1 {text-decoration: none;}
          .p2 {text-decoration: underline;}
          .p3 {text-decoration: overline;}
          .p4 {text-decoration: line-through;}
        </style>
      </head>
      <body>
        <p class="p1">这里是第一个段落中的文字。</p>
        <p class="p2">这里是第二个段落中的文字。</p>
        <p class="p3">这里是第三个段落中的文字。</p>
        <p class="p4">这里是第四个段落中的文字。</p>
      </body>
    </html>
    

    页面浏览效果:
    文本装饰
    说明:

    • text-decoration属性常见值说明如下:
      属性及值 说明
      text-decoration: none; 不添加装饰线,通常用于去掉超链接的下划线
      text-decoration: underline; 为文本添加下划线
      text-decoration: overline; 在文本顶部添加装饰线
      text-decoration: line-through; 在文本中间添加贯穿的装饰线
    • 另外,可以在一个规则中结合多个装饰线,如下:
      p {text-decoration: underline overline;}
      

    2、文本阴影

    CSS中使用text-shadow属性为文本添加阴影效果。文本阴影和盒子阴影非常类似,只不过将阴影效果用在了文字上。text-shadow属性的语法格式如下:

    text-shadow: 横向偏移量 纵向偏移量 [模糊范围] [阴影颜色]
    

    下面是一个示例:

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        <title> 文本阴影 </title>
        <style type="text/css">
          .p1 {text-shadow: 2px 2px 3px lightsalmon;}
          .p2 {text-shadow: 2px 2px 3px;}
          .p3 {text-shadow: 2px 2px;}
        </style>
      </head>
      <body>
        <p class="p1">这里是第一个段落中的文字。</p>
        <p class="p2">这里是第二个段落中的文字。</p>
        <p class="p3">这里是第三个段落中的文字。</p>
      </body>
    </html>
    

    页面浏览效果:
    文本阴影
    说明:

    • 横向偏移量纵向偏移量必须值。
    • 模糊范围可选值,默认值为0
    • 阴影颜色可选值,默认文字颜色相同。

    3、文本缩进

    CSS中使用text-indent属性可以设置文本缩进
    下面是一个示例:

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        <title> 文本缩进 </title>
        <style type="text/css">
          .p1 {width: 350px; border: 1px solid gray; text-indent: 2em;}
        </style>
      </head>
      <body>
        <p class="p1">这里是第一个段落中的文字。这里是第一个段落中的文字。</p>
      </body>
    </html>
    

    页面浏览效果:
    文本缩进
    说明:

    • 使用text-indent属性,元素的第一行可以缩进一个给定长度
    • 通常,text-indent属性只适用于块级元素行级元素不适用

    4、处理空白符

    CSS中white-space样式属性会影响到浏览器对HTML源文档中的空格tab字符换行处理
    下面是一个示例:

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        <title> 处理空白符 </title>
        <style type="text/css">
          .p1 {width: 350px; border: 1px solid gray; white-space: pre-line;}
          .p2 {width: 350px; border: 1px solid gray; white-space: normal;}
          .p3 {width: 350px; border: 1px solid gray; white-space: nowrap;}
          .p4 {width: 350px; border: 1px solid gray; white-space: pre-wrap;}
          .p5 {width: 350px; border: 1px solid gray; white-space: pre;}
        </style>
      </head>
      <body>
        <p class="p1">这里是  第一个  段落中的
          文字。       这里是第一个            段落中的文字。这里是第一个段落中的文字。</p>
        <p class="p2">这里是  第二个  段落中的
          文字。       这里是第二个            段落中的文字。</p>
        <p class="p3">这里是  第三个  段落中的
          文字。       这里是第三个            段落中的文字。</p>
        <p class="p4">这里是  第四个  段落中的
          文字。       这里是第四个            段落中的文字。</p>
        <p class="p5">这里是  第五个  段落中的
          文字。       这里是第五个            段落中的文字。</p>
      </body>
    </html>
    

    页面浏览效果:
    处理空白符
    说明:

    • 默认情况下,浏览器会将HTML源文档中换行转换空格,同时连续多个一个空白符(空格或tab字符)合并一个空格。这也是设置样式属性white-space值为normal时的效果。normal是属性white-space的默认值。
    • white-space属性常见值所表示的行为如下:
      空白符 换行符 自动换行
      pre-line 合并 保留 允许
      normal 合并 转换为空格 允许
      nowrap 合并 转换为空格 不允许
      pre-wrap 保留 保留 允许
      pre 保留 保留 不允许

    5、文本溢出

    CSS中使用overflow属性规定当盒子中的内容超出盒子尺寸时盒子如何处理。而text-overflow属性规定当盒子中的文本溢出时,文本如何修剪。这两个属性常常一起用来控制盒子中的文本溢出
    下面是一个示例:

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        <title> 文本溢出 </title>
        <style type="text/css">
          .p1 {width: 350px; border: 1px solid gray; white-space: nowrap; overflow: hidden; text-overflow: clip;}
          .p2 {width: 350px; border: 1px solid gray; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
        </style>
      </head>
      <body>
        <p class="p1">这里是第一个段落中的文字。这里是第一个段落中的文字。</p>
        <p class="p2">这里是第二个段落中的文字。这里是第二个段落中的文字。</p>
      </body>
    </html>
    

    页面浏览效果:
    文本溢出
    说明:

    • 样式属性及值text-overflow: clip;表示从盒子边缘修剪文本;text-overflow: ellipsis;表示用省略号来代表被修剪的文本。

    6、文本水平对齐

    CSS中样式属性text-align可以设置元素中文本水平对齐方式。
    下面是一个示例:

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        <title> 文本水平对齐 </title>
        <style type="text/css">
          .p1 {width: 350px; border: 1px solid gray; text-align: left;}
          .p2 {width: 350px; border: 1px solid gray; text-align: right;}
          .p3 {width: 350px; border: 1px solid gray; text-align: center;}
        </style>
      </head>
      <body>
        <p class="p1">这里是第一个段落中的文字。</p>
        <p class="p2">这里是第二个段落中的文字。</p>
        <p class="p3">这里是第三个段落中的文字。</p>
      </body>
    </html>
    

    页面浏览效果:
    文本水平对齐
    说明:

    • 为样式属性text-align设置值leftrightcenter会导致元素中的文本分别左对齐右对齐居中

    7、行高

    CSS中样式属性line-height可以定义一段文本中,文字加文字上下方留白的高度。
    下面是一个示例:

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        <title> 行高 </title>
        <style type="text/css">
          .p1 {width: 350px; height:48px; border: 1px solid gray; line-height: 24px;}
          .p2 {width: 350px; height:64px; border: 1px solid gray; line-height: 2;}
          .p3 {width: 350px; height:96px; border: 1px solid gray; line-height: 300%;}
        </style>
      </head>
      <body>
        <p class="p1">这里是第一个段落中的文字。这里是第一个段落中的文字。</p>
        <p class="p2">这里是第二个段落中的文字。这里是第二个段落中的文字。</p>
        <p class="p3">这里是第三个段落中的文字。这里是第三个段落中的文字。</p>
      </body>
    </html>
    

    页面浏览效果:
    行高
    说明:

    • 样式属性line-height用于设置文本行高
    • 当样式属性line-height的值为一个固定像素值时,行高即为该指定的值。
    • 当样式属性line-height的值为一个数字时,行高为此数字与当前的字体大小相乘所得的值。
    • 当样式属性line-height的值为一个百分数时,与值为数字是类似。
    • 不允许将line-height属性的值设置为负数。

    8、长单词换行

    CSS中word-wrap属性和word-break属性可以控制长单词如何换行
    下面是一个示例:

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        <title> 长单词换行 </title>
        <style type="text/css">
          .p1 {width: 350px; border: 1px solid gray;}
          .p2 {width: 350px; border: 1px solid gray; word-wrap: break-word;}
          .p3 {width: 350px; border: 1px solid gray; word-break: break-all;}
        </style>
      </head>
      <body>
        <p class="p1">I love you soooooooooooooooooooooooooooooooooooo much!</p>
        <p class="p2">I love you soooooooooooooooooooooooooooooooooooo much!</p>
        <p class="p3">I love you soooooooooooooooooooooooooooooooooooo much!</p>
      </body>
    </html>
    

    页面浏览效果:
    长单词换行
    说明:

    • 样式属性及值word-wrap: break-word;word-break: break-all;都能把长单词强行断句
    • word-wrap: break-word;会首先起一个新行来放置长单词,新的行还是放不下这个长单词则会对长单词进行强制断句;而word-break: break-all;则不会把长单词放在一个新行里,当这一行放不下的时候就直接强制断句了。

    9、字符转换

    CSS中使用text-transform属性可以进行大小写字母转换
    下面是一个示例:

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        <title> 字符转换 </title>
        <style type="text/css">
          .p1 {text-transform: lowercase;}
          .p2 {text-transform: uppercase;}
          .p3 {text-transform: capitalize;}
        </style>
      </head>
      <body>
        <p class="p1">HERE IS THE TEXT IN THE FIRST PARAGRAPH.</p>
        <p class="p2">here is the text in the second paragraph.</p>
        <p class="p3">here is the text in the third paragraph.</p>
      </body>
    </html>
    

    页面浏览效果:
    字符转换
    说明:

    • text-transform属性常见值说明如下:
      属性及值 说明
      text-transform: lowercase; 将文本中的所有字符都转换为小写字符
      text-transform: uppercase; 将文本中的所有字符都转换为大写字符
      text-transform: capitalize; 将文本中每个单词的首字母转换为大写字符
      text-transform: none; 对文本不做任何改动,默认值

    10、字间隔

    CSS中word-spacing属性可以改变单词)之间的标准间隔
    下面是一个示例:

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        <title> 字间隔 </title>
        <style type="text/css">
          .p1 {word-spacing: 10px;}
          .p2 {word-spacing: -0.5em;}
        </style>
      </head>
      <body>
        <p class="p1">HTML and CSS is very interesting.</p>
        <p class="p2">HTML and CSS is very interesting.</p>
      </body>
    </html>
    

    页面浏览效果:
    字间隔
    说明:

    • 样式属性word-spacing的默认值为normal,与设置为0效果一样,即按正常间隔显示单词)。
    • word-spacing属性接受一个正长度值负长度值。如果提供一个正长度值,那么字之间的间隔就会增加。如果提供一个负长度值,字之间就会拉近

    11、字母间隔

    属性样式letter-spacing与样式属性word-spacing类似,不过字母间隔letter-spacing修改的是字符字母之间间隔
    下面是一个示例:

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        <title> 字母间隔 </title>
        <style type="text/css">
          .p1 {letter-spacing: 5px;}
          .p2 {letter-spacing: -0.1em;}
        </style>
      </head>
      <body>
        <p class="p1">HTML and CSS is very interesting.</p>
        <p class="p2">HTML and CSS is very interesting.</p>
      </body>
    </html>
    

    页面浏览效果:
    字母间隔
    说明:

    • 样式属性letter-spacing的默认值为normal,与设置为0效果一样,即按正常间隔显示字母
    • letter-spacing属性的可取值包括所有长度值,设置的长度值会使字母之间间隔增加减少指定的量。

    二、常见字体属性

    CSS中字体属性定义文字的颜色字体系列大小加粗风格等。

    1、文字颜色

    CSS中使用color属性可以设置文字颜色。前面的章节中我们已经看到很多应用这一属性的例子,这里不再赘述。

    2、字体大小

    CSS中使用font-size属性设置字体大小。常用的有三种赋值方式,分别是使用像素值、使用百分比、使用倍数
    下面是一个示例:

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        <title> 字体大小 </title>
        <style type="text/css">
          * {margin: 0; border: 0; padding: 0;}
          .p1 {font-size: 20px;}
          .p2 {font-size: 150%;}
          .p3 {font-size: 2em;}
        </style>
      </head>
      <body>
        <p class="p1">这里是第一个段落中的文字。</p>
        <p class="p2">这里是第二个段落中的文字。</p>
        <p class="p3">这里是第三个段落中的文字。</p>
      </body>
    </html>
    

    页面浏览效果:
    字体大小
    说明:

    • 使用具体的像素值px)为font-size属性赋值,字体大小将被固定具体指定的
    • 使用百分比%)为font-size属性赋值,字体大小为相对于父元素字体大小的百分比
    • 使用倍数em)为font-size属性赋值,与使用百分比类似,字体大小为相对于父元素字体大小的倍数
    • 当没有指定font-size属性时,<body>标签中字体大小默认16像素

    3、字体粗细

    CSS中使用font-weight属性设置字体粗细。可以设置的值有bold粗体),normal正常),lighter稍细),bolder稍粗)或者100200、…、900
    下面是一个示例:

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        <title> 字体粗细 </title>
        <style type="text/css">
          * {margin: 0; border: 0; padding: 0;}
          .p1 {font-weight: lighter;}
          .p2 {font-weight: normal;}
          .p3 {font-weight: bolder;}
          .p4 {font-weight: bold;}
          .p5 {font-weight: 100;}
          .p6 {font-weight: 300;}
          .p7 {font-weight: 500;}
          .p8 {font-weight: 700;}
          .p9 {font-weight: 900;}
        </style>
      </head>
      <body>
        <p class="p1">这里是第一个段落中的文字。</p>
        <p class="p2">这里是第二个段落中的文字。</p>
        <p class="p3">这里是第三个段落中的文字。</p>
        <p class="p4">这里是第四个段落中的文字。</p>
        <p class="p5">这里是第五个段落中的文字。</p>
        <p class="p6">这里是第六个段落中的文字。</p>
        <p class="p7">这里是第七个段落中的文字。</p>
        <p class="p8">这里是第八个段落中的文字。</p>
        <p class="p9">这里是第九个段落中的文字。</p>
      </body>
    </html>
    

    页面浏览效果:
    字体粗细
    说明:

    • lighter稍细),bolder稍粗)或者100200、…、900这些值并没有得到浏览器的广泛支持,所以一般并不建议使用
    • <h1>标签到<h6>标签默认应用了样式font-weight: bold;
    • 不应当通过调整文本大小文本粗细使段落看上去像标题使标题看上去像段落。要始终正确使用<h1>标签到<h6>标签来定义标题,使用<p>标签来标记段落,这关系到HTML文档中结构和语义的正确性及完整性。

    4、字体风格

    CSS中使用font-style属性设置字体风格
    下面是一个示例:

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        <title> 字体风格 </title>
        <style type="text/css">
          * {margin: 0; border: 0; padding: 0;}
          .p1 {font-style: normal;}
          .p2 {font-style: italic;}
          .p3 {font-style: oblique;}
        </style>
      </head>
      <body>
        <p class="p1">这里是第一个段落中的文字。</p>
        <p class="p2">这里是第二个段落中的文字。</p>
        <p class="p3">这里是第三个段落中的文字。</p>
      </body>
    </html>
    

    页面浏览效果:
    字体风格
    说明:

    • font-style可以设置字体风格,可能的值有normal正常),italic斜体字符),oblique倾斜文本)。
    • 注意区分italicobliqueitalic是一套专门针对相对应的字体而设计的斜体字符,而oblique是由浏览器负责把正常的字符倾斜显示不是所有的字体都有对应的斜体字符,如果设置了italic,当浏览器没有找到斜体字符时,会自动将该字符倾斜显示

    5、字体系列

    CSS中使用font-family属性设置字体系列

    5.1、设置已有的字体系列

    我们可以使用font-family属性设置常见的一些字体系列,比如微软雅黑黑体宋体VerdanaArialTimes New Roman等等。
    下面是一个示例:

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        <title> 字体系列 </title>
        <style type="text/css">
          * {margin: 0; border: 0; padding: 0;}
          .p1 {font-family: Times, TimesNR, 'New Century Schoolbook', Georgia, 'New York', serif;}
          .p2 {font-family: 微软雅黑, 黑体, Arial, "Arial Black", sans-serif;}
        </style>
      </head>
      <body>
        <p class="p1">这里是第一个段落中的文字。</p>
        <p class="p1">here is the text in the second paragraph.</p>
        <p class="p2">这里是第三个段落中的文字。</p>
        <p class="p2">here is the text in the fourth paragraph.</p>
      </body>
    </html>
    

    页面浏览效果:
    字体系列
    说明:

    • font-family属性的值可以定义一个字体,也可以定义一个字体列表,每个字体用逗号分开,一个字体包括多个单词时使用引号
    • 不同用户,不同计算机,不同操作系统上的字体可能都不同,字体列表其实是一个字体优先列表,浏览器优先使用最左边的字体,如果没有找到,再按从左向右顺序依次寻找字体,直到找到一个字体
    • 字体列表的后面应该指定一个“通用字体系列”,如果浏览器没有找到字体列表前面任何字体,会使用计算机中所拥有通用字体系列中的字体。常见的通用字体系列如下:
      通用字体系列 说明 常见包含字体
      sans-serif 无衬线字体 笔画粗细一致,在计算机屏幕上更容易阅读 VerdanaArial BlackArial微软雅黑黑体
      serif 有衬线字体 笔画末端有装饰性的线条或凸起,报纸中的正文使用的正是该字体 TimesGeorgiaTimes New Roman宋体
      monospace 等宽字体 每个字母宽度一致,常用于软件代码示例 CourierCourier NewAndale Mono
      cursive 手写体 试图模仿人的手写体 Comic SansApple Chancery华文行楷
      fantasy 装饰性字体 设计感较强的字体 LAST NINJImpact华文琥珀
    • 字体列表中的字体通常应该来自于同一个字体系列,以保证网页在使用不同字体不会有太大变化
    • 如果计算机中没有指定通用字体系列中任何字体,那浏览器会使用系统默认字体

    5.2、 添加新的字体系列

    在CSS3之前使用font-family属性设置字体时,所指定的字体必须在用户的计算机上提前安装,而同时,我们无法控制用户计算机安装什么字体
    CSS3中提供了@font-face规则,允许自定义字体名称位置,然后在页面中使用。
    下面是一个示例:

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        <title> 添加新的字体系列 </title>
        <style type="text/css">
          * {margin: 0; border: 0; padding: 0;}
          @font-face {
            font-family: EmblemaOne;
            src: url("font/EmblemaOne/EmblemaOne.woff"),
                 url("font/EmblemaOne/EmblemaOne.ttf");
          }
          .p1 {font-family: EmblemaOne, sans-serif; font-size: 20px;}
        </style>
      </head>
      <body>
        <p class="p1">HTML and CSS is very interesting.</p>
      </body>
    </html>
    

    页面浏览效果:
    添加新的字体系列
    说明:

    • 从网络上可以找到并下载需要的字体,本例中选择了EmblemaOne字体。一般,我们要确保找到文件扩展名为.woff.ttf的字体文件。常见的字体格式说明如下:
      字体格式 文件扩展名 说明
      TrueType .ttf 全真字体,是由Apple公司和Microsoft公司联合推出的
      OpenType .otf 建立在TrueType基础之上,比TrueType更新
      Embedded OpenType .eot OpenType的一种压缩格式,Microsoft公司专用,仅IE支持
      SVG字体 .svg SVG是一种通用图像格式,SVG字体使用SVG图像格式保存字符
      Web Open Font Format .woff 建立在TrueType基础之上,已发展为Web字体的事实标准,几乎现代浏览器都支持该格式
    • CSS中使用@font-face规则引入定义需要的字体@font-face规则中属性font-family为该字体指定一个名称,属性url指定字体文件位置,可以使用绝对路径相对路径,多个位置之间用,隔开。
    • 使用font-family属性,指定@font-face规则中定义好的字体名称,对应元素中的字符将会使用自定义字体显示。
    • 确保使用之前@font-face规则已经定义,因此要将@font-face规则放置在CSS属性的前面

    6、简写的字体设置

    在CSS中可以使用font属性一次设置常用的文本及字体属性,font属性的语法格式如下:

    font: [font-style] [font-weight] font-size[/line-height] font-family;
    

    下面是一个示例:

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        <title> 简写的字体设置 </title>
        <style type="text/css">
          .p1 {width: 350px; border: 1px solid gray; font: 20px 微软雅黑;}
          .p2 {width: 350px; border: 1px solid gray; font: italic bold 16px/2 微软雅黑;}
        </style>
      </head>
      <body>
        <p class="p1">这里是第一个段落中的文字。这里是第一个段落中的文字。</p>
        <p class="p2">这里是第二个段落中的文字。这里是第二个段落中的文字。</p>
      </body>
    </html>
    

    页面浏览效果:
    简写的字体设置
    说明:

    • 使用font属性时,至少要指定字体大小(/font-size)和字体系列font-family)。
    展开全文
  • font-size:12px;设置字体大小,数值越大字号越大,单位有px、em、%、rem、pt等。还可以不写单位。font-family:"黑体"; 设置字体样式,如果设置的字体不是英文,需要用"... 设置文字颜色,可以是单词...

    font-size:12px;设置字体大小,数值越大字号越大,单位有px、em、%、rem、pt等。还可以不写单位。

    font-family:"黑体"; 设置字体样式,如果设置的字体不是英文,需要用""冒号包起来。

    font-weight:200;  字体加粗,数值越大越粗,不过,只能是整百的,最多不超过900,但是一般只写bold。而且好多写了没效果。

    color:red;  设置文字颜色,可以是单词,可以是颜色值,可以是rgb颜色值。

    font-style: 设置文本的方向,比如顷斜。

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>标签</title>
        <style type="text/css">
            div{
                font-size: 20px;
                font-family: "黑体";
                font-weight: bold;
                color:red;
                font-style: italic;
            }
        </style>
    </head>
        <body>
            <div>卡特琳娜</div>
        </body>
    </html>

    展开全文
  • web笔记

    2021-01-09 22:43:41
    font-weight:文字加粗 lighter:细的 normal:普通默认的 bold:加粗 bolder:更粗 设置数值 text-decoration:文字划线 none:无样式 underline:下划线 line-through:中划线 overline:上划线 blink:闪烁(目前...

    文字与文本相关属性:
    color:文字颜色
    font-family:文字字体
    font-size:文字大小px或pt
    font-weight:文字加粗
    lighter:细的
    normal:普通默认的
    bold:加粗
    bolder:更粗
    设置数值
    text-decoration:文字划线
    none:无样式
    underline:下划线
    line-through:中划线
    overline:上划线
    blink:闪烁(目前浏览器不支持)
    font-style:文字的样式
    text-shadow:文字的阴影复合属性
    color:阴影的颜色
    xoffset:阴影横行偏移量正值向右
    yoffset:阴影纵向偏移量正值向下
    radius:阴影的模糊程度
    text-transform:文字的大小写(英文)
    none:默认
    capitalize:首字母大写
    uppercase:所以字母大写
    lowercase:所以字母小写
    line-height:文字的行高
    letter-spacing:字符之间的间距
    word-spacing:单词之间的间距
    文本的相关属性:
    text-indent:文本的缩进
    text-overflow:文本溢出
    clip:溢出剪裁
    ellipse:溢出剪裁
    前提overpse:hedden
    vertical-align:垂直对齐方式
    auto:自动对齐
    baseline:基线对齐
    sub:与文本下标对齐
    super:与文本上标对齐
    top:顶端对齐
    middle:中间对齐
    bottom:底端对齐
    length:偏移距离
    text-align:水平对齐方式
    justify两端对齐
    work-break:文本换行方式
    normal:依赖于浏览器换行行为
    break:允许在单词中间换行
    white-space:空格处理方式-是否换行
    normal:默认,到达容器边界在换行
    nowrap:强制在同一行直至结束,如果遇到
    在换行
    balackground:背景色
    background-color:背景色
    background-image:背景图
    backgrou-attachment:背景图是否可以滚动
    scroll:滚动
    fixed:固定
    backg-position:背景图的位置
    background-repeat:平铺
    repeat横纵平铺
    repeat-x:横向平铺
    repeat-y:纵向平铺
    no-repeat:不平铺
    新增的几个属性
    background-clip:背景覆盖范围
    border-box覆盖有边框内边距内容
    no-clip:同上
    padding-box:内边距 内容
    content-box:内容
    border:复合属性可以设置边框粗细,线性、颜色
    border-width
    border-style
    none
    hidden
    dotted:点
    dashed:虚线
    soild:实线
    double:双实线
    groove:3D凹槽
    ridge:3D凸槽
    inset:3D凹入
    outset:3D凸出
    border-color
    border-top|right|
    border-collapse:行货单元格边框的显示方式
    seperate:分开
    collapse:合并
    border-spacing:单元格与单元格之间的距离前提是分开的
    caption-side:表标题的位置top bottom
    empty-cells:单元格如果没有内容时是否显示
    show
    hide
    tabel-layout:表格宽度的布局auto自动fixed固定
    1、通过col或colgroup设置宽度,表的宽度就是所有列宽度的总和、
    2、第一行所有单元格设置宽度,表的宽度就是第一行单元格宽度的总和
    3、直接平均分配,忽略实际宽度
    列表的相关属性
    list-style:复合属性
    list-style-image:让列表编号以图片显示
    list-style-position:编号的位置是在元素之前outside在元素之类
    list-style-type:列表编号文字样式
    动画属性
    transition-property:针对属性
    transition-duration:变化时长
    transition-timing-function:渐变速度
    aese:慢快慢
    linear:匀速
    ease:慢快
    ease:快慢
    cubic-bezier:延迟时间

    展开全文
  • Android 开发中经常会有对 TextView 的局部文字样式做单独处理的需求,比如针对某些文字进行加粗或是改变颜色等等。这种处理在 Web 开发中十分简单,HTML 的标签能够很方便的进行调整。但是在 Android 开发中,却要...
  • Web-Day03

    2021-01-09 23:29:25
    文章目录Web-Day03CSS文字CSS文本CSS背景CSS边框CSS表格CSS列表CSS鼠标光标CSS转换CSS过渡CSS动画CSS动画 CSS文字 color:颜色 font-family:字体 font-size:大小 相对长度:em,rem,vw,vh,% 绝对长度:px ...
  • Web前置课(3)

    2021-01-09 13:52:04
    Web前置课(3)文字与文本相关属性文本相关属性背景与边框相关属性背景相关属性边框相关属性表格与列表相关属性表格相关属性列表相关属性2.5.3 控制光标相关属性2.6 变形与动画相关属性变形相关属性Transition动画...
  • 文字转化

    2019-12-26 11:33:48
    加粗样式文字转换 在这里插入代码片 你好 1.java编程从入门到放弃 2.mysql编程从入门到入狱 3.web开发从入门到入土 4.联系方式:8888888 # 欢迎使用Markdown编辑器 你好! 这是你第一次...
  • WEB前端-html基础篇

    2019-09-06 11:20:59
    Web页或Web应用,就是互联网上的一个网页程序,通常以 .html或.htm作为后缀的文件 WEB页是由HTML编写而成 ...a : 26个字符中的首字符 超文本a:超链接的功能 ... 超文本b:给文字加粗 Markup :标记,规定了超文本的...
  • web前端基础摘要

    2019-04-08 20:32:34
    ctrl+B 将文字加粗 ctrl+1 /2 /3 标题 ctrl+shift + i 插入图片 不是编程语言 编程语言都会有自己的语法结构 html语言不是编程语言 它是标记语言 一组标签 --》特定功能—》浏览器里的渲染引擎 html hyper 超 ...
  • Web 安全问题

    2016-08-19 16:00:10
    HTML: 网页的根本,用于设置网页哪里显示图片,哪里显示文字,哪里显示输入CSS: 网页样式,就是类似皮肤,同样是文字,带不带加粗变色等等JS: 网页脚本,一种脚本语言,用来操作网页上的节点和处理一些数据HTTP基础: 网络...
  • web常用标签

    2019-02-21 16:57:32
    上面是文字,下面是效果 开始和结束 用来设置网页标题 设置网页编码方式 标题标签 段落标签 组合行内元素 为 input 元素定义标注 斜体文本 加粗文本 strong 标签同样加粗 文本自带下划线 &gt;删除线文本 ...
  • web前端基础6

    2018-09-25 17:11:33
    表格样式注意事项: ...th里面的内容上下居中显示,文字加粗; td的内容默认上下居中,文字居左显示; table决定整个表格的宽度; table里面单元格的宽度会转换为百分比; 表格里面的每一列必须有宽度; ...
  • web标准 做有意义的事

    2008-12-29 13:37:44
    选择合适的标签 1)布局 网页头部 网页内容 网页底部 2) 文本 文章标题 文章副标题 —用于识别标题内容 正文 文字加粗 文字加粗 3)图片及其他元素 [...]...
  • 1.文字加粗及斜体等的字体的默认样式 文字加粗: font-weight:normal; 文字斜体: font-style:normal; 2.清除body,ul等元素的边距及填充的默认样式 padding:0; margin:0; 3.li的默认样式清除 li-style:none;...
  • web前端表格学习

    2017-02-21 15:32:33
    2017.2.21 表格标签: (属性:borde边框属性,cellpadding内容与边框的距离,cellspdding单元格之间的空格)  (表示行)  (表示头标,特点文字加粗水平显示)
  • JAVA Web 04 HTML

    2020-08-25 20:27:18
    文字标签 <font size="5" color="blue" face="arial black">文字标签</font> 格式化标签 <h2>文本标签</h2> <b>加粗</b> <strong>加粗</s
  • web前端html

    2019-04-11 23:00:00
    strong字体加粗 i,em字体倾斜 del删除字体,中间有横杠 u字体下加下划线 img:图像标签 1、src图片路径 2、alt替换文本 3、title鼠标悬停时显示文字 a标签: <a href="http://www.sina.com">...
  • 记录-web(语义化)

    2020-03-18 18:58:22
    web语义化 语义化:让网页的含义更加明确...都是用来进行语气的强调的,但em强调的文字会斜体显示出来,strong强调的文字加粗显示,表示用更强烈的语气来强调 自定义列表dl,列表项dt,描述dd eg:<dl》 <d...
  • 单标签 1.注释标签: ctrl+/ ...文本加粗显示:或者 文字斜体显示: 或 下划线标签:或者 删除价格标签:或者 图片标签: sec:设置一个图片要显示的路径 title:设置鼠标悬停图片显示的文字 al...
  • 学习web day02

    2019-09-04 17:27:54
    行内样式 我是一级标题 2.内嵌样式 5.color字体颜色 ...8. font-weight字体加粗 9.font-style字体倾斜 10. 文字修饰(text-decoration):p默认情况下是text-decoration:none; underline下划线 overlin...
  • web-front-basic

    2014-02-12 20:51:08
    加粗文字 :给文字加下划线 、:跟文字加删除线 :文本居中         适用于文字段中少量的引用,适用于一段或多段文字的引用。同时, IE浏览器并不支持q 标签     在严格的HTML中,body的...
  • web前端学习之CSS

    2020-10-10 20:42:35
    web前端学习之CSS什么是CSS为什么要...CSS(Cascading Style Sheets):全程为层叠样式表,它主要用于定义HTML内容在浏览器内的显示样式,如文字大小、颜色、加粗等等。 为什么要使用CSS 使用CSS样式的好处是通过定义
  • 设置文字的字体 属性:font-family 值 例如英文:times New Roman ...设置文字加粗效果 属性:font-weight 值 例如:bold(加粗),normal(普通的,不加粗) 设置英文字母大小写转换 属性:t...
  • **这是加粗文字** *这是倾斜的文字*` ***这是斜体加粗文字*** ~~这是加删除线的文字~~ 引用 >这是引用的内容 >>这是引用的内容 >>>>>>>>>>这是引用的内容 效果如下: ...
  • web前端--Html4

    2020-06-10 22:41:49
    web前端–html4练习 标签总览: <!DOCTYPE html> <html> <...-- b标签加粗文字 br标签换行--> <b> 黄鹤楼送孟浩然之广陵 </b><br /> 故人西辞黄鹤楼
  • Web基本教程~05.CSS属性

    2021-01-08 15:29:00
    此文转载自:... Web基本教程~05.CSS属性 上一期 背景属性在上一期 字体属性 CSS 字体属性定义字体,加粗,大小,文字样式 color 规定文本的颜色 <html>  <head>  ...
  • WEB前端学习-基础语法

    2020-08-22 11:39:42
    WEB前端学习-基础语法 一、基本语法 所有标记的标准属性: id :唯一标识 title:鼠标移到上面提示的文字 class :css中使用 style:css中使用 1.文本标记 1、标题元素 语法:<hn> </hn> n表示数字1到6...
  • Web前端之HTML

    2020-11-01 18:14:46
    文字底线:<U> 加粗标记:<b></b> 删除标记:<s></s> 上标:<sup></sup> 下标:<sub></sub> 换行标记:<br> 空标记:没有终止标记 <div>:网页...
  • WEB_HTML标签

    2019-04-02 20:43:00
    <!--注释HTML页面的基本结构html标签 head: 页面的设置和文件的导入 body: ...<!--h 代表标题标签--><!--hr标签 代表分割线--><...--br标签 代表指定的换行-->...--p 段落标签(处理文字)-->...加粗标...

空空如也

空空如也

1 2 3 4 5 ... 7
收藏数 122
精华内容 48
关键字:

web文字加粗