(web初步)CSS美化
设计字体样式
font-family: xxxx; //定义字体类型
font_size: 12px; //设置字体大小
color: red; //定义字体颜色
font-weight: 600; //定义字体粗细
font-style :normal|italic|oblique; //定义字体倾斜效果,normal为默认值,表示正常的字体,italic表示斜体;oblique表示倾斜的字体
//定义字体修饰线效果
text-decoration:none;
//normal为默认值,表示无装饰线,blink表示闪烁效果,underline表示下划线效果,line-through表示贯穿线效果,overline表示上划线效果
text-transform:none;
//none为默认值,表示无转换发生;capitalize表示将每个单词的第一个字母转换成大写,其余无转换发生;uppercase表示把所有字母都转换成大写;lowercase表示把所有字母都转换成小写。
CSS3增强text-decoration功能
- text-decoration-line:设置装饰线的位置,取值包括none(无)、underline、overline、line-through、blink。
- text-decoration-color:设置装饰线的颜色。
- text-decoration-style:设置装饰线的形状,取值包括solid、double、dotted、dashed、wavy(波浪线)。
- text-decoration-skip:设置文本装饰线条必须略过内容中的哪些部分。
- text-underline-position:设置对象中的下划线的位置。
设计文本样式
text-aligna: left;
//left为默认值,表示左对齐;right为右对齐;center为居中对齐;
//justify为两端对齐。justify:内容两端对齐。start:内容对齐开始边界。end:内容对齐结束边界。match-parent:与inherit(继承)表现一致。justify-all:效果等同于justify,但还会让最后一行也两端对齐。
//定义文本垂直对齐
vertical-align: auto;
//auto将根据layout-flow属性的值对齐对象内容。baseline表示默认值,表示将支持valign特性的对象内容与基线对齐。sub表示垂直对齐文本的下标。super表示垂直对齐文本的上标。top表示将支持valign特性的对象的内容对象顶端对齐。text-top表示将支持valign特性的对象的文本与对象顶端对齐。middle表示将支持valign特性的对象的内容与对象中部对齐。bottom表示将支持valign特性的对象的内容与对象底端对齐。text-bottom表示将支持valign特性的对象的文本与对象顶端对齐。length表示由浮点数字和单位标识符组成的长度值或者百分数,可为负数,定义由基线算起的偏移量,基线对于数值来说为0,对于百分数来说就是0%。
//定义文本间距
//letter-spacing属性定义字距,word-spacing属性定义词距
letter-spacing:1em;
//定义行高
line-height:1.2em;
//定义文本首行缩进
text-indent:2em;
设计图像样式
height:200px; //定义图像大小,可以使用百分比
图像在默认状态是不会显示边框的,但在为图像定义超链接时会自动显示2~3像素宽的蓝色粗边框。使用border属性可以清除这个边框
border:none;
边框样式
- 虚线框包括dotted(点)和dashed(虚线)。
- 实线框包括实线框(solid)、双线框(double)、立体凹槽(groove)、立体凸槽(ridge)、立体凹边(inset)、立体凸边(outset)。其中实线框solid是应用最广的一种边框样式。
- border-color属性可以定义边框的颜色;使用border-width可以定义边框的粗细
- border-radius属性,它可以设计圆角样式。
- box-shadow属性,该属性可以定义阴影效果。
box-shadow
- 第参数值用来设置对象的阴影水平偏移值。可以为负值。
- 第参数值用来设置对象的阴影垂直偏移值。可以为负值。
- 如果提供了第3个长度值,则用来设置对象的阴影模糊值。不允许负值。
- 设置对象的阴影的颜色。
其他
控制文本溢出
text-overflow:ckip
- clip:当内联内容溢出块容器时,将溢出部分裁切掉,为默认值。
- ellipsis:当内联内容溢出块容器时,将溢出部分替换为(…)。