CSS学习2(字体文本设置、背景设置、外边距和内边距设置) |
您所在的位置:网站首页 › 用css为表单添加边框和底纹 › CSS学习2(字体文本设置、背景设置、外边距和内边距设置) |
一、字体设置和文本设置 1、文字的字体 (1)字体的复合属性 复合属性是指该属性是由多种属性组合而成。CSS中字体用font表示。 font:font-style||font-variant||font-weight||font-size||font-height||font-family属性分别为设置:字体的样式、字母大小写、文本的粗细、文本字体的大小、文本字体名称序列。ong (2)字体的颜色 Color:颜色值颜色表示方法有三种:#RRGGBB、rbg和颜色名 (3)字体的大小 font-size:xx-small;字体大小:可以用xx-small、x-small等字体尺寸值。也可以用具体数值+px单位表示。 (4)字体的粗细 font-weight:bold;字体的粗细又称为字体的重量。 可以用bold等关键字也可以用100-900中的数字表示文本的粗细。 (5)字体类型 font-family:fontname;fontname指字体类型,有宋体、黑体、Courier等。 2、行距设置 行距指行与行之间的距离。 line-height:30px;3、文本间距与间隔 (1)文本间距 文本间距指单词(包括汉字与字母)之间插入的空格数。 word-spacing: normal|长度单位(2)文本间隔 文本间隔指文本中字符、单词的间隔,即文字间隔和字母间隔,包括设定字与字之间,字母与字母之间的距离。 letter-spacing: normal|长度单位4、字母大小写转换 text-transform:capitalize|uppercase|lowercase|none5、文本的修饰 修饰包括对文本添加下划线、上划线、删除线、闪烁等。 text-decoration:underline|overline|line-through|bink|none6、空格处理方式 空格处理应用在该对象处理文本间的空格时。 语法: while-space:normal |pre |nowrap7、设置文本垂直与水平对齐 (1)文本垂直对齐 vertical-align:baseline|sub|super|top|text-top|middle|bottom|text-bottom(2)文本水平对齐 text-align:left | right |center |justify8、文本缩进 文本缩进可以用于块级元素(P、H1等)。 text-indent:|长度的单位是px 如:text-indent:20px; 百分比:表示该文本缩进在对象中占有的百分比。 二、设置背景和尺寸 1、背景的基本语法 背景是指对象在网页中显示的背景颜色或图像。背景的对象可以是HTML标记、CSS中的ID或CLASS对象。 背景语法: Background:background-color | background-image | background-repeat | background-attachment | background-position背景的对象可以是HTML标记、也可以是CSS中的ID或CLASS对象。 2、设置背景颜色 background-color:transparent|color前者表示背景色透明,后者表示颜色值。 应用: #id1 { background:red; }背景颜色测试 3、设置背景图像 background-image:none | urlnone是默认值,表示设置成没有图像的背景,url为图像的路径。 #id2{ padding: 400px; background-image:url("image/小兔子.jpg"); }背景颜色测试 (1)设置背景图像滚动 如下的滚动用background-attachment 语法: background-attachment:scroll|fixedscroll表示图像因内容的滚动而滚动,而参数fixed表示背景图像固定在网页中。 (2)设置背景图像的位置 控制图像在对象背景中的位置。有两种形式: 方式一: background-position:length | lengthlength可以为百分数或者由浮点数字和单位标识符组成的长度值。 如: background-position: 30px 20%;方式二: background-position:position | positionposition后面可接top、center、bottom、left、right等方向值。 (3)设置背景的铺排 background-repeat: repeat | no-repeat | repeat-x |repeat-y 4、设置尺寸 (1)设置宽度 width:auto | lengthauto根据浏览器窗口调节对象的宽度,length具体值来设置。 (2)设置高度 height:auto | length三、设置外边距和内边距 外边距(margin)指对象与外面距离或外延距离。内边距(padding)表示对象内部填充距离。 1、外边距的基本语法 语法: margin:auto | lengthmargin是复合属性,内联对象要用margin时,必须先设定对象的height或width属性。 2、外边距的四边设置 (1)顶端外边距的用法 顶端外边距,又称上端外延距离,是对象与父对象的上端距离, margin-top:auto | length属性值接auto表示相对边的值。 (2)右端外边距 margin-right:auto | length(3)底端外边距 margin-bottom:auto | length(4)左端外边距 margin-left:auto | length应用案例: css文件: #mybody { width: 778px;/*设置宽为778px*/ margin: auto;/*容器层上下左右的外边距为自动*/ font-size: 14px;/*字体大小*/ border: 0;/*容器层边框为0*/ } div { border: 1px solid red;/*设置所有层为1像素的红色实线*/ } #header { margin: auto; width: 100%;/*设置宽度为100%*/ height: 80px; } #contentleft { width: 180px; height: 450px; float: left;/*设置层向左漂移*/ } #contentcenter { width: 410px; height: 450px; float: left; margin-left: 6px; } #contentright { width: 170px; height: 450px; float: right; margin-left: 6px; } #bottom { width: 100%; margin-top: 450px;/*设置外边距上下为5px,左右为自动*/ height: 60px; }html文件 这是网页头部,放置logo 网页内容左栏 网页中间栏 网页内容右栏 网页底部 3、内边距的基本语法 内边距用在对象的内部,表示对象中的内部填充距离。 基本语法: padding:lengthlength表示相对于父对象的百分比或具体数值。 应用测试: css编码: #m1{ width: 200px; height: 150px; background: #ccc; padding: 20px;/*设置内边距*/ } #m2{ height: 100%; background: green; }html编码:
4、内边距的四边属性 基本语法如下: padding-top:length; padding-right:length; padding-bottom:length; padding-left:length;
|
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |