首页 网站建设 正文
常用的CSS样式属性

 2018-01-11    758  

关于网页设计的CSS样式属性有很多，不过在实际开发过程中，有不少并不经常使用。这里博主罗列了其中一些最为常用的属性，方便使用时查证。

1、字体：

文本字体font-family: "Helvetica Neue", Arial, sans-serif;定义文字类型，多个字体之间使用逗号分隔，从左到右查找，如果都找不到，会使用默认字体，字体名称中有空格，则需要引号包裹。
字体大小font-size: 14px;可以用绝对大小px或者相对大小em来设置字体尺寸，不同的浏览器默认的字号不同，最好给定一个数值。
字体粗细font-weight: bold;文字粗细程度，可以取值数字100~900，也可以取预设值，不加粗normal，相当于400，加粗bold，相当于700。
字体样式font-style: italic;通常用它设置斜体。
字体颜色color: #ff0000;元素内部的文字颜色。
color的写法可以分为3种，如：red、rgb( *,* ,* )、#336699。

2、文本：

文本对齐text-align: center;设置文本对齐方式，取值left左对齐，right右对齐，center居中对齐。
文本修饰text-decoration: none; 直白地讲就是给文本划线，underline添加下划线，overline添加上划线，line-through添加删除线，none是没有线，通常用于去除a标签的下划线。
文本缩进text-indent: 2em;用于设置首行文本缩进。2em代表缩进两个字符，取值正数为右缩进，取值负数为向左缩进。
文本行高line-height:40px;行高=上边距+下边距+文字大小，这里的上下边距是相等的。
当设置行高为容器的高度，则可以实现单行文本垂直居中。
字符间距letter-space: 1px;用于增加或减小字符间的空白，可以设置为负值。
文本阴影
text-shadow: 0px 0px 5px red;文本阴影特效，4个值：水平偏移，垂直偏移，模糊半径，阴影颜色。

3、背景：

背景颜色backgound-color:#ff00ff;用于设置背景颜色，写法同字体颜色。
背景图片backgound-image:  url("./logo.png");url中的路径可以是绝对路径，也可以是相对路径。
背景平铺backgound-repeat: no-repeat;默认为平铺方式repeat，no-repeat为不平铺，repeat-x水平平铺，repeat-y垂直平铺。
背景位置backgound-position: center;位置可以用方位名词，如：top left,center right,bottom center 表示，如果仅规定一个关键词，另一个值将是center；位置也可以用x% y%表示，左上角是0% 0%，右下角是100% 100%。
背景尺寸backgound-size: contain;背景尺寸可以是具体数值，如 40px 60px；也可以是相对于父元素的百分比；cover将图片完全覆盖背景区域，某些图片区域可能不能完全显示；contain是将图片扩展至最大，使其宽高完全适应内容区域。

4、圆角：

圆角矩形width: 400px;
height: 200px;
border: 2px solid palegreen;
border-radius: 200px;		width和height大小相等，则变为正方形，设置border-radius为正方形宽度的一半就是一个圆形。border-radius也可以分别对4个角进行设置，如：border-top-left-radius左上角，border-top-right-radius右上角，border-bottom-right-radius右下角，border-bottom-left-radius左下角。

5、链接

链接状态
a:link { color:red;text-decoration: none; }①a:link默认链接状态，②a:visited访问过的链接状态，③a:hover 鼠标悬停状态，④a:active按下鼠标时的状态。若设置多个状态，请注意①②③④顺序。

6、盒子

内 边 距padding: 5px;
设置边框和内容之间的距离。padding:5px 表示四个方向内边距都是5px； padding:5px 10px 表示上下内边距是5px，左右内边距是10px； padding:5px 10px 20px 表示上内边距是5px，左右内边距是10px，下内边距是20px； padding:5px 10px 20px 30px 表示上右下左顺时针方向四个内边距值。
外 边 距margin: 5px;
控制盒子与盒子之间的距离。margin:5px 表示四个方向外边距都是5px； margin:5px 10px 表示上下外边距是5px，左右外边距是10px； margin:5px 10px 20px 表示上外边距是5px，左右外边距是10px，下外边距是20px； margin:5px 10px 20px 30px 表示上右下左顺时针方向四个外边距值。
边框样式
border: 1px solid #6699cc;设置边框粗细1px，实线框，颜色#6699cc。虚线框dotted、双线框double、立体内凸框groove、立体浮雕框ridge、凹框inset、凸框outset。
盒子尺寸

box-sizing: content-box;
box-sizing: border-box;

盒子宽高由盒子类型决定，盒子类型由box-sizing属性设置，现以盒子宽100，高60，内边距10，边框1举例，当取值content-box时，盒子实际宽高=100+10x2+1x2=122；当取值border-box时，盒子宽高不受内边距和边框粗细影响，只是内容区域相对变小。内容区域=100-10x2-1x2=78。






内容不断完善中……

发表评论：

上一篇>>开题报告封面设计

=========================================

下一篇>>Office图片批量导出工具—Office.Files.Images

推荐文章
热门文章

Copyright © 2012-2024  菜鸟之家站内搜索