郴州网站小程序,设计中的网络系统是什么,wordpress安装到主机名,网站快速收录付费入口1文字类
通常情况下#xff0c;一般使用span对文字进行重点突出#xff0c;用div来操作一段代码块。 字体的所有属性#xff1a; 属性描述font在一个声明中设置所有的字体属性font-family指定文本的字体系列font-size指定文本的字体大小font-style指定文本的字体样…1文字类
通常情况下一般使用span对文字进行重点突出用div来操作一段代码块。 字体的所有属性 属性描述font在一个声明中设置所有的字体属性font-family指定文本的字体系列font-size指定文本的字体大小font-style指定文本的字体样式font-variant以小型大写字体或者正常字体显示文本。font-weight指定字体的粗细。 字体风格 格式为标签名.class名{font-style:属性值;} 三个属性 效果属性值 正常 - 正常显示文本 normal 斜体 - 以斜体字显示的文字 italic 倾斜的文字 - 文字向一边倾斜和斜体非常类似但不太支持 oblique 举例 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylep.r1{font-style: normal;}p.r2{font-style: italic;}p.r3{font-style:oblique;}/style
/head
bodyp classr1p1正常字体/pp classr2p2这是斜体/pp classr3p3这是倾斜的文字/p
/body
/html 字体粗细 属性值 属性值描述normal默认系统的粗细bold加粗字体bloder更粗的字体lighter比默认的字体更细inherit继承父级标签的字体粗细100~ 900300为lighter400为normal700为bold900为bolder 格式 1标签名{font-weight: 属性值; } 【所有此标签都有效果】 2标签名.class名{font-weight: 属性值;} 【作为类使用】 举例 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylep{font-weight: bold;}/style
/head
bodypp1正常字体/p
/body
/html 字体大小 格式 标签名{front-size:属性值;} 属性值 预定义关键字绝对单位相对单位。 预定义关键字 以下几个绝对字体大小的设置是有效的。当然他们是浏览器预定义设置的。给元素指定了绝对关键字font-size的时候该元素 就不会继承父元素的字体大小。 【如下】 font-size: xx-small;font-size: x-small;font-size: small;font-size: medium;font-size: large;font-size: x-large;font-size: xx-large; 举例 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylep{font-size:x-large;}/style
/head
bodypp1正常字体/p
/body
/html 绝对单位 fone-size能被设置成下面得绝对大小 属性值举例mm: 毫米10mm.cm: 厘米1cm ( 10mm).in: 英寸inch0.39in ( ~ 10mm).pt: point点, 1pt 相当于 1/72 英寸12pt.pc: pica十二点活字, 1pc 是 12pt1pcpx: pixel像素14px. 注意事项 一般说来上面得这些度量单位都有些问题。比如毫米厘米英寸是对于不同媒体介质是不精确地由于分辨率的设置不 同pt和pc就是相对不可靠地。pix来起来是最合适的但是它能导致一些辅助性问题IE下不能重新调整字体的大小。 举例 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylep{font-size:5cm;}/style
/head
bodypp1/p
/body
/html 相对单位 ont-size属性能被设置成相对于父节点的字体大小的相对大小。 属性值 属性值解释em1em相当于当前字体的1倍大小的字体。2em相当于当前字体的2倍字体大小的字体%100%相当于当前字体大小, 200% 相当于2倍字体的大小xe1ex 相当于当前字体中字母 ‘x’高度值一样大小的字体 举例 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylep{font-size:4em;}/style
/head
bodydivpp1/p/div/body
/html 字体样式 这个就类似于我们world文档中的字体样式了。【如下图】 格式 font-family: 字体样式 (种类)【阿拉伯语属于英语类】 种类的详细可以看这里点此跳转 举例 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylep{font-family: Georgia, Times New Roman, Times, serif;}/style
/head
bodydivpp1/p/div/body
/html 2文本 颜色的应用 颜色的应用方面使用color来进行使用其中属性值有 英文字母、RGB表示法、RGBa表示法和十六进制表示法。 属性值表示含义以及范围举例英文字母预定义的颜色名red、grenn、blue、yellowRGB红绿蓝三原色取值范围在0~255rgb(0,0,0)、rgb(223,233,233)RGBaRGB的三项aa表示透明度a的取值范围为0~1rgba(233,233,0.3),rgba(225,0,0,0.2)十六进制以#作为开头转化为十六进制来表示 #000000,#ff0000 举例 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylep{color: red;}div{color: rgb(11, 12, 78); }span{color: rgba(22, 11, 90, 0.3);}a{color: #0b583c;}/style
/head
bodypp/pdivdiv/divspanspan/spanbra hrefa/a/body
/html 排版 我们在world文档或者PPT中我们都会对我们的内容进行排版编排之类使我们的内容变得更加的美观。 缩进 使用text-indent属性 用法 text-indent数字px text-indent数字em 举例 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv{text-indent: 20px;}p{text-indent: 30em;}/style
/head
body########################################################pp,30em/pdivdiv,20px/div/body
/html 对齐 使用text-align属性 属性值 属性值作用left文本左对齐center文本居中对齐right文本右对齐justlify文本两端对齐 举例 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.p1{text-align: left;}.p2{text-align: center;;}.p3{text-align: right;}.p4{text-align: justify;}/style
/head
bodyp classp1p1,left/pp classp2p2,center/pp classp3p3,right/pp classp4p4,justify/p
/body
/html 行高 使用line-height属性 属性值 属性值效果normal默认行高number设置数字。此数字会与当前字体的大小相乘来设置行高length设置固定的行距%基于当前字体大小的百分比设置行高 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.div1{background-color: aquamarine;line-height:300% ;}.div2{background-color: rgb(195, 127, 255);}/style
/head
bodydiv classdiv1pp1/ppp2/p/divdiv classdiv2pp1/ppp2/p/div
/body
/html 修饰 使用text-decoration属性 属性值 属性值效果underline下划线line-through删除线overline上划线none无装饰线 举例 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.div1{text-decoration: overline;}.div2{background-color: rgb(195, 127, 255);}/style
/head
bodydiv classdiv1pp1/ppp2/p/div/div
/body
/html 3列表略写 属性 属性值解释none去掉列表前的标记例如有序列表前的1、2、3……无序列表前的圆点……disc将列表前的标记变为 实心圆列表前的标记默认为实心圆circle 将列表前的标记变为 空心圆 square将列表前的标记变为 实心方块decimal将列表前的标记变为相应位置的 序号initia 默认标记对列表前的标记不做改变 4背景图片的应用和渐变类 背景 属性值相关background-color或者使用background来代替background-position background-position-x:只左右移动 background-position-y只移动上下移动 backgroud-imgage:图片地址 图片设置默认为平铺满background-repeat background-repeat:no-repeat 不平铺只显示一张图片 background-repeat:repeat-x 水平平铺 background-repeat:repeat-y 垂直平铺 nbackgroud-size:图宽度 图高度 图片大小 可以使用px来描述 这些属性都可以写在同一个background中 渐变 至于如何实现渐变的问题可以直接在网上搜索调试我建议如下网站点击此处跳转
