字体和常用文本和背景属性
css属性分类介绍
css属性分类介绍css属性分类介绍CSS分类⽬录1. ⽂本/字体/颜⾊1. ⽂本相关2. 字体相关3. 颜⾊相关4. 背景相关2. ⼤⼩/布局1. ⼤⼩属性2. margin 外边距3. padding 内边距4. border 边框5. position 定位3. 列表/表格1. 多列属性2. 可伸缩框属性3. 列表属性4. Grid属性5. Table属性4. 动画属性1. Animation 动画属性2. Transition 过渡属性CSS属性分类⽂本/字体/颜⾊/背景字体类1. font-family：指定字体1. 需要考虑客户端机器上是否装有字体2. 可以排列多个字体，⽤逗号分隔，如果有空格⽤引号分隔3. 最后⼀个建议放通⽤字体名，这个属性只有⼏个选项：serif | sans-serif | cursive | fantasy | monospace2. font-size：字体⼤⼩，要注意有绝对⼤⼩，相对⼤⼩，长度，百分⽐1. ⼀般建议采⽤相对⼤⼩，即em或者rem2. 典型的长度单位，详细信息请参考3. font-style：正常体、斜体、倾斜体4. font-weight：设置粗体5. font-variant：⽤来将所有字体都变成⼤写，但是原来是⼤写的字体呢⼜要⽐默认的要⼤⼀些6. font：1. 简写形式，如上所有跟字体相关的字体混合在⼀起2. font-family是必选的，⽽且⼀定要在最后；font-size如果有，必须出现在倒数第⼆个, 后⾯可以⽤/跟⼀个line-height的设置3. 剩下的font-style, font-weight, font-variant就⽆所谓了，前⾯任意排列4. font还⽀持⼀些类似caption, icon等快捷描述5. 详细请参考7. line-height：⼀个数字，默认差不多为1.2，有normal/数字/长度/百分⽐1. ⼀般建议使⽤纯数字, ⽤长度和百分⽐都在某些特殊情况下超出预期，即⼦元素的⾏⾼被⽗亲元素设置了，同时⼦元素还有默认的浏览器字体设置的场景。
CSS3背景、边框、字体和文本
轮廓
轮廓
绘制在HTML元素边框边缘外围
CSS轮廓属性 outline：总体声明所有边框属性
outline值顺序及单个属性 outline-color：设置边框颜色 outline-style：设置边框线样式 outline-width：设置边框线宽度
背景
CSS背景属性 background：总体声明所有背景属性
边框图片
CSS边框图片 Border-image：设置边框填充图片 Border-image-source ：设置图片路径 Border-image-slice ：设置边框向内偏移 Border-image-width ：设置边框宽度 Border-image-outset ：设置图片超出边框的量 Border-image-repeat ：设置图片平铺、铺满、拉伸
• 2、给网页增加背景图片，并让图片放在 顶部居中，不要重复？
• 3、给网页的一个div添加边框，并设置漂 亮的边框效果？
计算机与信息工程系
字体
CSS字体属性 font：总体声明所有字体属性
font值顺序及单个属性 font-style：设置字体样式 font-variant：设置是否小型大写显示文本 font-weight：设置字体粗细 font-size：设置文字大小 font-family：设置字体
字体
@font-face添加自己的字体 默认字体必须在客户机器上存在，有了@font-face就可以使用任何字体了
文本属性
值 color direction Letter-spacing Line-height Text-align Text-decoration Text-indent Text-shadow Text-transform White-space Word-spacing
css常用代码大全
字体属性：(font)大小｛font-size: x-large；｝（特大) xx-small；(极小）一般中文用不到，只要用数值就可以，单位：PX、PD样式{font—style: oblique;｝（偏斜体）italic;(斜体）normal;（正常)行高｛line-height：normal；}(正常) 单位：PX、PD、EM粗细｛font-weight: bold；｝（粗体) lighter;（细体) normal；（正常）变体｛font—variant：small—caps；}(小型大写字母) normal;（正常)大小写｛text—transform: capitalize；}（首字母大写）uppercase;（大写）lowercase；(小写）none;(无）修饰｛text—decoration：underline；}（下划线）overline;(上划线）line-through；（删除线）blink；(闪烁)常用字体：(font-family）"Courier New"，Courier, monospace, "Times New Roman"，Times, serif，Arial，Helvetica, sans—serif, Verdana背景属性：（background）色彩｛background-color: ＃FFFFFF；｝图片{background—image：url（）；}重复｛background-repeat: no—repeat;}滚动｛background—attachment：fixed;}（固定) scroll；（滚动)位置{background-position：left;}（水平) top(垂直）;简写方法{background:＃000 url（.。
）repeat fixed left top；｝/*简写·这个在阅读代码中经常出现，要认真的研究*/区块属性：（Block) /*这个属性第一次认识，要多多研究＊/字间距{letter—spacing: normal；} 数值/*这个属性似乎有用,多实践下＊/对齐{text-align：justify;}(两端对齐) left；（左对齐）right；(右对齐) center;(居中)缩进{text-indent: 数值px;｝垂直对齐｛vertical—align：baseline；｝（基线) sub;（下标) super;（下标) top; text-top;middle；bottom; text—bottom；词间距word—spacing：normal; 数值空格white—space: pre;（保留) nowrap;（不换行）显示｛display：block;}(块）inline；(内嵌) list-item;（列表项) run—in；(追加部分)compact；（紧凑) marker;(标记）table；inline-table；table-raw-group; table-header—group；table—footer—group; table—raw; table—column—group；table-column；table—cell;table-caption；（表格标题）/＊display 属性的了解很模糊＊/方框属性：(Box）width:；height:; float：; clear:both；margin:; padding：；顺序:上右下左边框属性：（Border）border-style: dotted;（点线）dashed；（虚线）solid（实线)；double;(双线) groove;(槽线)ridge；（脊状) inset;(凹陷）outset；border-width：; 边框宽度border-color：#；简写方法border：width style color；/*简写＊/列表属性：(List-style)类型list-style-type：disc；(圆点) circle；（圆圈）square;(方块）decimal;(数字）lower—roman；(小罗码数字）upper—roman；lower—alpha；upper—alpha；位置list-style-position: outside；(外）inside；图像list-style—image: url(。
CSS常用样式属性大全
CSS常用样式属性大全1. 文本属性- `color`：设置文本颜色- `font-size`：设置字体大小- `font-family`：设置字体系列- `font-weight`：设置字体粗细- `text-align`：设置文本对齐方式- `text-decoration`：设置文本装饰（如下划线、删除线等）- `text-transform`：设置文本大小写转换2. 背景属性- `background-color`：设置背景颜色- `background-image`：设置背景图片- `background-repeat`：设置背景图片的重复方式- `background-position`：设置背景图片的位置- `background-size`：设置背景图片的尺寸3. 边框属性- `border`：设置元素边框样式、宽度和颜色- `border-radius`：设置元素边框的圆角- `border-color`：设置元素边框的颜色- `border-width`：设置元素边框的宽度4. 布局属性- `display`：设置元素的显示方式（如块级、内联等）- `width`：设置元素的宽度- `height`：设置元素的高度- `margin`：设置元素外边距- `padding`：设置元素内边距- `float`：设置元素的浮动方式5. 盒模型属性- `box-sizing`：设置元素的盒模型计算方式- `overflow`：设置元素溢出内容的处理方式- `position`：设置元素的定位方式- `top`：设置定位元素的上边距- `bottom`：设置定位元素的下边距- `left`：设置定位元素的左边距- `right`：设置定位元素的右边距以上是CSS中常用的样式属性，通过合理使用这些属性可以实现各种各样的页面效果。
在编写CSS代码时，建议将样式属性单独分行展示，以增加代码的可读性和维护性。
css属性大全
css属性大全CSS属性大全。
CSS（Cascading Style Sheets）是一种用来为网页添加样式和布局的样式表语言。
它可以控制网页的字体、颜色、间距、边框、背景等各种样式，是网页设计中不可或缺的一部分。
在这篇文档中，我们将详细介绍CSS中的各种属性，帮助您更好地掌握CSS的应用。
1. 字体属性。
字体属性用于设置网页中文本的字体样式、大小、粗细等。
常用的属性包括font-family（设置字体系列）、font-size（设置字体大小）、font-weight（设置字体粗细）、font-style（设置字体样式）等。
2. 文本属性。
文本属性用于设置文本的对齐方式、行高、间距等。
常用的属性包括text-align（设置文本对齐方式）、line-height（设置行高）、letter-spacing（设置字符间距）、word-spacing（设置单词间距）等。
3. 背景属性。
背景属性用于设置网页元素的背景样式。
常用的属性包括background-color（设置背景颜色）、background-image（设置背景图片）、background-repeat（设置背景重复方式）、background-position（设置背景位置）等。
4. 边框属性。
边框属性用于设置网页元素的边框样式。
常用的属性包括border-width（设置边框宽度）、border-style（设置边框样式）、border-color（设置边框颜色）、border-radius（设置边框圆角）等。
5. 盒模型属性。
盒模型属性用于设置网页元素的尺寸、内边距、外边距等。
常用的属性包括width（设置元素宽度）、height（设置元素高度）、padding（设置内边距）、margin（设置外边距）等。
6. 定位属性。
定位属性用于设置网页元素的位置。
常用的属性包括position（设置定位方式）、top（设置元素顶部位置）、left（设置元素左侧位置）、z-index（设置元素层级）等。
网页常用英语说明
网页常用英语说明Font and Text Properties 字体文本属性font-family 字体譬如宋体,黑体font-style 字体类型normal正常| italic 斜体|font-variant normal 正常| small-caps 小字体的大写文本font-weight normal 正常| bold 粗体font-size 字体大小letter-spacing 文字间间距line-height 行高度text-decoration 文字修饰underline 下划线|| line-through 横线|| blink 闪烁text-transform 文字转换capitalize第一个字母大写| uppercase大写| lowercase 小写| none正常text-align 内容排列left左边| right右边| center居中text-indent 文字后退段落中第一句后退一定空间vertical-align 垂直排列sub 下标| super 上标Color and Background Properties 颜色和背景属性color 颜色background-color 背景颜色background-image 背景图片background-repeat 背景图片重复background-attachment 背景图片附属scroll滚动| fixed 固定background-position 背景图片的定位background 背景Layout Properties 布局属性margin-top 顶边距margin-right 右边距margin-bottom 底边距margin-left 左..margin 边距指边框外的空间距离padding-top 内顶边距padding-right 内右边距padding-bottom 内底边距padding-left 内左边距padding 边距指边框和内容之间的距离border-top-width 顶边框宽度border边框top顶bottom底width宽度color颜色border-right-widthborder-bottom-widthborder-left-widthborder-widthborder-top-colorborder-right-colorborder-bottom-colorborder-left-colorborder-colorborder-top-style style类型border-right-styleborder-bottom-styleborder-left-styleborder-style none没有| dotted 点线| dashed 虚线| solid 实线border-topborder-rightborder-bottomborder-leftborderfloat 浮动left 左| right右| none没clear 清理浮动none | left | right | both左右两边Classification Properties 分类属性display 显示none隐藏| block 区块显示法| inline 内嵌显示法| list-itemlist-style-type 列表风格类型disc 小圆点| circle小圆圈| square 实心方块| decimal 数字list-style-image 列表风格图片url图片的URL地址| nonelist-style-position 列表单项的摆放位置inside 列表内部| outside 列表外部list-style 列表风格Positioning Properties 定位属性clip 切割height 高度left X坐标overflow 内容覆盖scroll滚动| hidden 隐藏| visible 可见| auto自动position 坐标系统absolute 绝对坐标| relative相对| static默认相对top Y坐标visibility 可见visible 可见| hidden 隐藏| inherit继承width 宽度z-index Z坐标Printing Properties 打印属性page-break-before 打印停顿page-break-after 在什么之后停顿Filter Properties filter 在什么之前停顿Pseudo-Classes and Other Properties 伪类和其他属性active A标签的用法,联接击活后的状态hover 鼠标在联接上的状态@import 从外部导入CSS样式!important 重要CSS样式cursor 光标auto 自动| crosshair十字| default默认| hand小手| move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait等待| help帮助link 未点击过的联接visited 访问过的联接first-letter 一行第一个字first-line 第一行white-space 空格使用CSS的缩写性质CSS的缩写性质（shorthand property）是一些专用的性质名，用来代替多个相关性质的集合。
Java 获取Word文本样式(字体、字号、颜色、背景、行距等)
Java 读取Word文本/段落格式属性本文介绍通过Java后端程序代码来读取Word文本和段落格式的方法。
本次测试环境如下：●Word版本：2013●编译环境：IntelliJ IDEA2018●Work库：free spire.doc.jar 3.9.0●JDK版本：1.8.0通过textrange.getCharacterFormat()方法读取文本字符串格式，通过paragraph.getFormat()读取段落格式，读取具体文字及段落属性时，可支持读取字体、字号、文字颜色、文字背景、文字是否加粗或倾斜、文字下划线、大小写、边框、上标下标、行距、段落缩进、对齐方式、段落边框、背景等等，下表中罗列了所有可支持读取的样式属性，供参考：读取文本格式getCharacterFormat()：读取段落格式：getFormat()用于测试的Word文档：Java示例代码import com.spire.doc.*;import com.spire.doc.documents.Paragraph;import com.spire.doc.documents.TextSelection;import com.spire.doc.fields.TextRange;import java.awt.*;public class GetTextFormat {public static void main(String[] args) {//加载Word源文档Document doc = new Document();doc.loadFromFile("test.docx");//获取段落数量int count = doc.getSections().get(0).getParagraphs().getCount();System.out.println("总共含有段落数:" + count);//查找指定文本TextSelection textSelections = doc.findString("东野圭吾", false, true);//获取字体名称String fontname =textSelections.getAsOneRange().getCharacterFormat().getFontName();//获取字体大小float fontsize =textSelections.getAsOneRange().getCharacterFormat().getFontSize();System.out.println("字体名称:" + fontname +"\n"+"字体大小："+fontsize);//获取第二段Paragraph paragraph2 = doc.getSections().get(0).getParagraphs().get(1);//获取段落行距float linespage = paragraph2.getFormat().getLineSpacing();System.out.println("段落行距：" + linespage);//遍历段落中的子对象for (int z = 0; z < paragraph2.getChildObjects().getCount(); z++){Object obj2 = paragraph2.getChildObjects().get(z);//判定是否为文本if (obj2 instanceof TextRange){TextRange textRange2 = (TextRange) obj2;//获取文本颜色Color textcolor = textRange2.getCharacterFormat().getTextColor();if (!(textcolor.getRGB() == 0)){System.out.println("文本颜色：" + textRange2.getText() + textcolor.toString());}//获取字体加粗效果boolean isbold = textRange2.getCharacterFormat().getBold();if (isbold == true){System.out.println("加粗文本：" + textRange2.getText());}//获取字体倾斜效果boolean isitalic = textRange2.getCharacterFormat().getItalic();if (isitalic == true){System.out.println("倾斜文本：" + textRange2.getText());}//获取文本背景String text = textRange2.getText();Color highlightcolor =textRange2.getCharacterFormat().getHighlightColor();//获取文本的高亮颜色（即突出显示颜色）if (!(highlightcolor.getRGB() == 0 )){System.out.println("文本高亮：" + text +highlightcolor.toString());//输出高亮的文本和颜色}Color textbackgroundcolor =textRange2.getCharacterFormat().getTextBackgroundColor();//获取文字背景（底纹）if (!(textbackgroundcolor.getRGB()==0)){System.out.println("文本背景：" + text + textbackgroundcolor.toString());//输出有背景的文本和颜色}}}}}运行程序，输入获取结果：。
前端学习（7）~css学习（一）：字体属性和文本属性
前端学习（7）~css学习（⼀）：字体属性和⽂本属性本⽂重要内容CSS的单位字体属性⽂本属性定位属性：position、float、overflow等CSS的单位html中的单位只有⼀种，那就是像素px，所以单位是可以省略的，但是在CSS中不⼀样。
CSS中的单位是必须要写的，因为它没有默认单位。
绝对单位1 in=2.54cm=25.4mm=72pt=6pc。
各种单位的含义：in：英⼨Inches (1 英⼨ = 2.54 厘⽶)cm：厘⽶Centimetersmm：毫⽶Millimeterspt：点Points，或者叫英镑 (1点 = 1/72英⼨)pc：⽪卡Picas (1 ⽪卡 = 12 点)相对单位px：像素em：印刷单位相当于12个点%：百分⽐，相对周围的⽂字的⼤⼩为什么说像素px是⼀个相对单位呢，这也很好理解。
⽐如说，电脑屏幕的的尺⼨是不变的，但是我们可以让其显⽰不同的分辨率，在不同的分辨率下，单个像素的长度肯定是不⼀样的啦。
font 字体属性CSS中，有很多⾮布局样式（与布局⽆关），包括：字体、⾏⾼、颜⾊、⼤⼩、背景、边框、滚动、换⾏、装饰性属性（粗体、斜体、下划线）等。
这⼀段，我们先来讲⼀下字体属性。
css样式中，常见的字体属性有以下⼏种：p{font-size: 50px; /*字体⼤⼩*/line-height: 30px; /*⾏⾼*/font-family: 幼圆,⿊体; /*字体类型：如果没有幼圆就显⽰⿊体，没有⿊体就显⽰默认*/font-style: italic ; /*italic表⽰斜体，normal表⽰不倾斜*/font-weight: bold; /*粗体*/font-variant: small-caps; /*⼩写变⼤写*/}⾏⾼CSS中，所有的⾏，都有⾏⾼。
盒⼦模型的padding，绝对不是直接作⽤在⽂字上的，⽽是作⽤在“⾏”上的。
为了严格保证字在⾏⾥⾯居中，我们的⼯程师有⼀个约定：⾏⾼、字号，⼀般都是偶数。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
字体和常用文本和背景属性CSS字体属性字体名称属性(font-family)这个属性设定字体名称，如Arial, Tahoma, Courier等。
例句如下：.s1 {font-family:Arial}<html><head><title>字体名称属性font-family</title><STYLE>.s1 {font-family:Arial}.s2 {font-family:Tahoma}.s3 {font-family:Courier}.s4 {font-family:Verdana}.s5 {font-family:"Book Antiqua"}</STYLE></head><body><p>The font-family value of the text is the browser default font.</p><p class = "s1">The fon-family value of the text is "Arial"。
</p><p class = "s2">The fon-family value of the text is "Tahoma"。
</</p><p class = "s3">The fon-family value of the text is "Courer"。
</</p><p class = "s4">The fon-family value of the text is "Verdana"。
</</p><p class = "s5">The fon-family value of the text is "Book Antiqua"。
</</p></body></html>The font-family value of the text is the browser default font.The fon-family value of the text is "Arial"。
The fon-family value of the text is "Tahoma"。
The fon-family value of the text is "Courer"。
The fon-family value of the text is "Verdana"。
The fon-family value of the text is "Book Antiqua"。
字体大小属性(font-size)这个属性可以设置字体的大小。
字体大小的设置可以有多种方式，最常用的就是pt和px(pixel)。
例句如下：.s2 {font-size:16pt}<html><head><title>字体大小属性font-size</title><STYLE>BODY{font-size:10pt}.s1 {font-size:16px}.s2 {font-size:16pt}.s3 {font-size:80%}.s4 {font-size:larger}.s5 {font-size:xx-large}</STYLE></head><body><p>这段文字大小是10pt。
</p><p class = "s1">这段文字大小是16px。
</p><p class = "s2">这段文字大小是16pt。
</p><p class = "s3">这段文字大小是10pt的80%。
</p><p class = "s4">这段文字的大小比10pt大。
</p> <p class = "s5">这段文字的大小是特大号(xx-large)。
</p></body></html>这段文字大小是10pt。
这段文字大小是16px。
这段文字大小是16pt。
这段文字大小是10pt的80%。
这段文字的大小比10pt大。
这段文字的大小是特大号(xx-large)。
字体浓淡属性(font-weight)这个属性常用值是normal和bold，normal 是缺省值。
例句如下：<p style = "font-weight:bold">这段文字字体的浓淡属性(font-weight)值是bold。
<p><html><head><title>字体浓淡属性font-weight</title></head><body><p>这段文字没有设浓淡属性。
<p><p style = "font-weight:bold">这段文字字体的浓淡属性(font-weight)值是bold。
<p><p style = "font-weight:lighter">这段文字字体的浓淡属性(font-weight)值是lighter。
<p><p style = "font-weight:200">这段文字字体的浓淡属性值(font-weight)是200。
<p><p style = "font-weight:800">这段文字字体的浓淡属性值(font-weight)是800。
<p></body></html>字体变量属性(font-variant)这个属性有两个值，normal和small-caps，normal是缺省值。
small-caps表示小的大写字体。
例句如下：.s1 {font-variant:small-caps}字体属性(font)这个属性是各种字体属性的一种快捷的综合写法。
这个属性可以综合字体风格属性(font-style)，字体变量属性(font-variant)，字体浓淡属性(font-weight)，字体大小属性(font-size)等属性。
例句如下：.s1 {font:italic normal bold 11pt arial}字体颜色(color)字体颜色用CSS中的color属性来表示。
参见CSS常用文本属性。
CSS常用文本属性文本对齐属性(text-align)这个属性用来设定文本的对齐方式。
有以下值：•left (居左，缺省值)•right (居右)•center (居中)•justify (两端对齐)示例代码如下：.p2 {text-align:right}<html><head><title>文本对齐属性text-align</title><style type="text/css">.p1{text-align:left}.p2 {text-align:right}.p3{text-align:center}</style></head><body><p class = "p1">这段的本文对齐属性(text-align)值为居左。
</p><p class = "p2">这段的本文对齐属性(text-align)值为居右。
</p><p class = "p3">这段的本文对齐属性(text-align)值为居中。
</p></body></html>文本修饰属性(text-decoration)这个属性主要设定文本划线的属性。
有以下值：•none (无，缺省值)•underline (下划线)•overline (上划线)•line-through (当中划线)示例代码如下：.p2 {text-decoration: underline}文本修饰属性(text-decoration)的缺省值是none。
这段的文本修饰属性(text-decoration)值是underline。
这段的文本修饰属性(text-decoration)值是line-through。
这段的文本修饰属性(text-decoration)值是overline。
文本缩进属性(text-indent)这个属性设定文本首行缩进。
其值有以下设定方法：•length (长度，可以用绝对单位(cm, mm, in, pt, pc)或者相对单位(em, ex, px))•percentage (百分比，相当于父对象宽度的百分比)示例代码如下：.p1 {text-indent: 8mm}<html><head><title>文本缩进属性text-indent</title><style type="text/css">.p1 {text-indent: 8mm}.d1 {width:300px}.p2 {text-indent:50%}</style></head><body><p>下面两端都设定CSS文本缩进属性(text-indent)，第一段用长度方法设值，第二段用百分比方法设值。
</p><p class = "p1">芙蓉姐姐说道：“我那妖媚性感的外形和冰清玉洁的气质让我无论走到哪里都会被众人的目光无情地揪出来。