10.文本样式属性

网页设计与制作（HTML5+CSS3）主讲教师：周礼萍0

1字体样式属性02文本外观属性03列表样式属性目录contentsPART1字体样式属性1.font-size:字号大小

font-size属性用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位。其中，相对长度单位比较常用，推荐使用像素单位px，绝对长度单位使用较少。具体如下：相对单位说明px像素%百分百em1em=“当前元素”字体大小rem1rem=“根元素（html）”字体大小绝对单位说明cm厘米mm毫米in英寸pt磅，印刷的点数pcpica,1pc=12pt绝对单位定义的的大小是固定的，不依赖其他元素的大小值，使用的是物理度量单位，显示效果不会受到外界因素的影响，一般用于传统的平面印刷，极少使用与前端开发。绝对单位相对单位定义的大小不是固定的，一般相对其他长度而言1.px（像素）像素是指一张图片中最小的点，或者计算机显示屏中最小的点如：计算机分辨率为800px*600px，就是指计算机显示屏宽度由800个小方点，高由600个小方点组成。相对单位--px2.%（百分百）在CSS中，支持百分比做单位的属性一般分为以下三种。1.width、height、font-size的百分比是相对于父元素“相同属性”的值来计算。2.line-height的百分比是相对于父元素font-size的值来计算。（了解）3.Vertical-align的百分比是相对于当前元素的line-height值来计算的。（了解）相对单位--%3.em相对于“当前元素”的字体大小而言这里的字体大小就是当前元素font-size的值如：当前元素font-size：20px;则1em=20px;2em=40px;...相对单位--em/rem4.rem指相对于根元素的font-size字体大小根元素就是html标签html标签的font-size值默认是16px也可以自行设置2.font-family:字体font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等。p{font-family："微软雅黑"；}指定多个字体，各字体之间以英文逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体。body{font-family：Arial，"MicrosoftYaHei"，"宋体",tahoma；}1.现在网页中普遍使用16px+。2.尽量使用偶数的数字字号。3.各种字体之间必须使用英文状态下的逗号隔开。4.中文字体需要加英文状态下的引号，英文字体一般不需要加引号。5.当需要设置英文字体时，英文字体名必须位于中文字体名之前。6.如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号。7.尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。常用技巧font-weight属性用于定义字体的粗细，其可用属性值：3.font-weight:字体粗细属性值属性值解释normal

400正常(默认值)bold

700定义粗体bolder更粗lighter更细数字100~900100的整数倍，不带单位实际运用中，我们更喜欢用数字来表示。font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体实际运用中，最常用与取消<em>和<i>标签自带的倾斜效果用法：4.font-style:字体风格em,i{font-style：nomal；}其基本语法格式如下：5.font:字体属性连写选择器{font：font-stylefont-weightfont-size/line-heightfont-family；}使用font连写属性时：font-size和font-family的值是必需写的其他不需要设置的属性可以省略（取默认值）各个属性以空格隔开font:字体属性连写text-stroke为文本添加了描边，它定义了文本字符的笔触颜色和宽度。此CSS属性是以下两个属性的连写：text-stroke-width：描述描边效果的粗细并采用单位值。text-stroke-color：它采用颜色的值。语法：6.text-stroke：文字描边text-stroke：text-stroke-widthtext-stroke-color；6.text-stroke：文字描边CSS代码显示效果h2{line-height:100px;font-size:100px;-webkit-text-stroke:rgb(247,91,24)3px;color:transparent;}

PART2文本外观属性color属性用于定义文本的颜色(即字体颜色)，其取值方式有如下几种：1.颜色名称如：red，green，blue等不区分大小写2.十六进制符号如#FF0000（#F00），#FF6600（#F60），#29D794等实际工作中，十六进制是最常用的定义颜色的方式1.color：文本颜色3.rgb代码即红-绿-蓝（red-green-blue）如：红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)如果使用RGB代码的百分比颜色值，取值为0时也不能省略百分号，必须写为0%color：文本颜色4.rgba红-绿-蓝-阿尔法rgba扩展了RGB颜色模式，它包含了阿尔法通道，允许设定一个颜色的透明度a表示透明度：0=透明；1=不透明如：rgba(255,0,0,0.1)/*10%不透明*/rgba(255,0,0,0.4)/*40%不透明*/rgba(255,0,0,0.7)/*70%不透明*/rgba(255,0,0,1)/*不透明，即红色*/color：文本颜色1.letter-spacing字符间距用于定于字间距，属性值可以为不同单位数值，允许为负，默认normal2.word-spacing单词间距用于定义英文单词之间的间距，对中文字符无效2.letter-spacing（字符间距）/word-spacing（单词间距）3.line-height：行高line-height常用的属性值单位有三种：像素px相对值em百分比%line-height用于设置行间距，即行与行之间的距离，字符的垂直间距，一般称为行高实际工作中使用最多的是像素px3.line-height行高的设置（1）一般情况下，行距比字号大7~8像素左右就可以了（2）行号如果没有带单位，则表示倍数如：字体为16px，line-height:1.5；那么此时行高就是16*1.5=24px（3）行高<盒子的高度时，文字就在盒子内偏上。

行高=盒子的高度时，文字就在盒子内垂直居中；

行高>盒子的高度时，文字就在盒子内偏下。4.text-align：文本水平对齐方式text-align属性用于设置文本内容的水平对齐，相当于html中的align对齐属性。其可用属性值如下：值描述left把文本排列到左边。默认值：由浏览器决定right把文本排列到右边center把文本排列到中间justify实现两端对齐文本效果vertical-align:设置元素的垂直对齐方式。（默认基线对齐）5.vertical-align:元素垂直的对齐方式5.vertical-align对齐属性值描述baseline默认。元素放置在父元素的基线上sub垂直对齐文本的下标super垂直对齐文本的上标top把元素的顶端与行中最高元素的顶端对齐text-top把元素的顶端与父元素字体的顶端对齐middle把此元素放置在父元素的中部text-bottom把元素的底端与父元素字体的底端对齐bottom使元素及其后代元素的底部与整行的底部对齐length将元素升高或降低指定的高度，可以是负数%使用

"line-height"属性的百分比值来排列此元素,允许使用负值inherit规定应该从父元素继承

vertical-align属性的值6.text-decoration：文本装饰用于给链接修改装饰效果，其属性值如下：不同单位的数值em字符宽度的倍数于浏览器窗口宽度的百分比%允许使用负值值描述none默认。定义标准的文本underline定义文本下的一条线overline定义文本上的一条线line-through定义穿过文本下的一条线blink定义闪烁的文本inherit规定应该从父元素继承

text-decoration属性的值text-decoration演示text-decoration实际运用在实际运用中文字样式标签通常都不需要倾斜、加粗、下划线等效果。所以，text-decoration最常用的就是给链接a取消自带的下划线。取消/添加文字效果属性em和i取消倾斜font-style：normal；添加倾斜font-style：italic；strong和b取消加粗font-weight：normal/400；添加加粗font-weight：bold/700；u和ins删除下划线text-decoration：none；添加下划线text-decoration：underline；s和del删除删除线text-decoration：none；添加删除线text-decoration：line-through；7.text-indent:首行缩进text-indent属性用于设置首行文本的缩进其属性值可为：不同单位的数值em字符宽度的倍数相对于浏览器窗口宽度的百分比%允许使用负值建议使用em作为设置单位如：text-indent:2em;每段前面空2个字8.text-shadow：文本阴影text-shadow给文字添加阴影效果，其属性如下值描述h-shadow必需。水平阴影的位置。允许负值（向左）v-shadow必需。垂直阴影的位置。允许负值（向上）blur可选。模糊的距离color可选。阴影的颜色8.text-shadow代码演示9.text-transform：设置文本大小写text-transform属性控制文本的大小写，其属性如下值描述none默认。定义带有小写字母和大写字母的标准的文本capitalize文本中的每个单词以大写字母开头uppercase定义仅有大写字母lowercase定义无大写字母，仅有小写字母inherit规定应该从父元素继承

text-transform属性的值9.text-transform代码演示10.white-space：规定文本是否换行white-space规定段落中的文本不进行换行，其属性如下值

描述normal默认。空白会被浏览器忽略pre空白会被浏览器保留。（多个空格都能被浏览器识别）nowrap文本不会换行，文本会在在同一行上继续，直到遇到

<br>标签为止pre-wrap保留空白符序列，但是正常地进行换行pre-line合并空白符序列，但是保留换行符inherit规定应该从父元素继承

white-space属性的值11.text-overflow：处理溢出文本text-overflow属性指定当文本溢出包含它的元素时，应该如何显示。可以设置溢出后：文本被剪切显示省略号(...)显示自定义字符串（不是所有浏览器都支持）

text-overflow属性值

描述lip剪切文本，不显示符号...ellipsis剪切文本，显示省略符号

...

来代表被修剪的文本string使用给定的字符串来代表被修剪的文本inherit从父元素继承该属性值

text-overflow属性text-overflow需要配合以下两个属性使用：white-space:nowrap;

文字不换行显示overflow:hidden;溢出隐藏（可以理解为超出内容将会被修剪）text-overflow:ellipsis;被修剪的文本显示符号...overflow：控制内容溢出属性overflow属性指定如果内容溢出一个元素的框，怎样显示其属性如下：属性值描述visible默认值。内容不会被修剪，会呈现在元素框之外hidden内容会被修剪，并且其余内容是不可见的scroll内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容auto如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容inherit规定应该从父元素继承

overflow属性的值12.overflow：控制内容溢出属性在CSS3中还新增overflow-x

属性和overflow-y属性，意思分别是水平和垂直内容超出时的处理方式，属性值如下：属性值描述visible不裁剪内容，可能会显示在内容框之外hidden裁剪内容

-不提供滚动机制scroll裁剪内容

-提供滚动机制auto如果溢出框，则应该提供滚动机制no-display如果内容不适合内容框，则删除整个框no-content如果内容不适合内容框，则隐藏整个内容HTML代码CSS代码显示效果<div>

<imgsrc="./1.png"alt="">

<p>君子曰：学不可以已。</p>

<p>青，取之于蓝，而青于蓝；冰，水为之，而寒于水。木直中绳，輮以为轮，其曲中规。虽有槁暴，不复挺者，輮使之然也。故木受绳则直，金就砺则利，君子博学而日参省乎己，则知明而行无过矣。</p><p>故不登高山，不知天之高也；不临深溪，不知地之厚也；不闻先王之遗言，不知学问之大也。干、越、夷、貉之子，生而同声，长而异俗，教使之然也。诗曰：“嗟尔君子，无恒安息。靖共尔位，好是正直。神之听之，介尔景福。”神莫大于化道，福莫长于无祸。

</p></div>

div{

width:200px;

height:200px;

background-color:azure;

border:1pxsolid#333;

padding:10px;

}img{

width:300px;

}

div{

overflow:auto;

}

div{

overflow:hidden;

}

div{

overflow-y:hidden;

}<!--y轴超出隐藏，x轴默认自动-->overflow代码演示PART3列表样式属性1.list-style-type属性list-style-type属性设置列表项标记的类型,属性值如下:值描述none无标记disc默认。标记是实心圆circle标记是空心圆square标记是实心方块decimal标记是数字decimal-leading-zero0开头的数字标记。(01,02,03,等)lower-roman小写罗马数字(i,ii,iii,iv,v,等)upper-roman大写罗马数字(I,II,III,IV,V,等)lower-alpha小写英文字母Themarkerislower-alpha(a,b,c,d,等)upper-alpha大写英文字母Themarkerisupper-alpha(A,B,C,D,等)lower-greek小写希腊字母(alpha,beta,gamma,