【web初步】CSS美化

(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:当内联内容溢出块容器时,将溢出部分替换为(…)。
发布了136 篇原创文章 · 获赞 18 · 访问量 4179

猜你喜欢

转载自blog.csdn.net/xcdq_aaa/article/details/105116137