5个最常用的经典css属性教程

下面介绍我们在编写网站CSS样式时,最常用的几个CSS属性,掌握它们是必须的!

1.CSS Clip
  Clip属性就像一个面罩。它允许你在掩盖矩形元素的内容。要剪辑一个元素:你必须指定position为absolute。然后,指定相对于元素的top,right,bottom,和left的值。

图像剪辑实例(演示)
  下面的示例将演示如何使用clip属性掩盖图片。首先,指定<div>元素position:relative。然后,指定<img>元素position:absolute和相应的边距。

.clip {
  position: relative;
  height: 130px;
  width: 200px;
  border: solid 1px #ccc;
}
.clip img {
  position: absolute;
  clip: rect(30px 165px 100px 30px);
}

图像调整和剪辑(演示
  在这个例子中,我将告诉你如何调整和剪辑图像。我的原图像为矩形格式。我想按50%的比例缩小它来创建一个正方形的格式的缩略图库。所以,我用的width和height属性来调整图像和用clip属性来掩盖他们。然后,我用left属性来让图像左移15px。

.gallery li {
  float: left;
  margin: 0 10px 0 0;
  position: relative;
  width: 70px;
  height: 70px;
  border: solid 1px #000;
}
.gallery img {
  width: 100px;
  height: 70px;
  position: absolute;
  clip: rect(0 85px 70px 15px);
  left: -15px;</span>
}

2.Min-height(演示
  min-height属性允许你指定元素的最小高度。但你需要平衡布局的时候它就很有用了。我在我的job board上使用它来确保内容区域总是高过侧边栏。

.with_minheight {
  min-height: 550px;
}

IE6的min-height hack
  注:min-height不支持IE6的,但这里有一个min-height hack

.with_minheight {
  min-height:550px;
  height:auto !important;
  height:550px;
}

3.White-space(演示
  White-space属性指定一个元素如何处理空白。例如,指定white-space:nowrap将会防止文本从一行包裹到下一行。

em {
  white-space: nowrap;
}

4. Cursor (演示)
  如果您更改按钮的行为,你也应该改变光标。 例如,当一个按钮被禁用,光标应改为默认(箭头),以表明它是无法点击。 因此, cursor属性对开发web应用程序非常有用。

.disabled {
  cursor: default;
}

.busy {
  cursor: wait;
}

.clickable:hover {
  cursor: pointer;
}

5. Display inline / block (演示
  也许您不知道块元素呈现在一个新行,而内联元素是呈现在同一行。<div> , <h1>和<p>标签是块元素的例子。内联标签的例子有:<em>,<span>,和<strong>。用户也可以通过指定显示的显示样式:inline或block。

.block em {
  display: block;
}

.inline h4, .inline p {
  display: inline;
}

时间: 2024-10-01 13:13:28

5个最常用的经典css属性教程的相关文章

简化常用的CSS属性代码,让你的CSS更精简清晰

简化CSS属性代码,可以让CSS文件体积变得更小,读取速度更快,可维护性更高. 下面分别示例最常用的一些CSS属性代码的简化方法: marginmargin-top:1px;margin-right:1px;margin-bottom:1px;margin-left:1px;代码简化为:margin:1px margin-top:1px;margin-right:2px;margin-bottom:1px;margin-left:2px;代码简化为:margin:1px 2px margin-t

css模版教程全面自定义模板必备之css属性知识

核心提示:css模版教程,自定义模板必备之css属性知识. 该表只列出常用的CSS属性,及简要介绍其主要功能,若要了解各所有属性和具体的用法,请参考相关书籍 属 性 名 称 属性功能及其取值 用 法 说 明 与 范 例 颜色与背景类 color 设置文字颜色#rgb#rrggbbrgb(255,255,255)rgb(100%,100%,100%) H1{color:red}H1{color:#f00}H1{color:#ff0000}H1{color:rgb(255,0,0)}H1{color

CSS教程:汇总CSS属性的缩写

高效的css写法中的一条就是使用简写.通过简写可以让你的CSS文件更小,更易读.而了解CSS属性简写也是前端开发工程师的基本功之一.今天我们系统地总结一下CSS属性的缩写. 色彩缩写 色彩的缩写最简单,在色彩值用16进制的时候,如果每种颜色的值相同,就可以写成一个: 1 color:#113366 可以简写为 1 color:#136 所有用到16进制色彩值的地方都可以使用简写,比如background-color.border-color.text-shadow.box-shadow等. 盒子

CSS属性表简表

CSS 属性表简表,列出了一些我们常用的CSS的属性. 属性名称 属性含义 属性值 字体属性(Font) font-family 使用什么字体 所有的字体 font-style 字体是否斜体 Normal.italic.oblique font-variant 是否用小体大写 Normal.small-caps font-weight 字体的粗细 Normal.bold.bolder.lithter等 font-size 字体的大小 Absolute-size.relative-size.len

CSS的未来:一些试验性CSS属性

尽管现代浏览器已经支持了众多的CSS3属性,但是大部分设计师和开发人员貌似依然在关注于一些很"主流"的属性,如border-radius. box-shadow或者transform等.它们有良好的文档.很好的测试并且最常用到,所以如果你最近在设计网站,你很难能脱离它们. 但是,隐藏在浏览器的大宝库中是一些高级的.被严重低估的属性,但是它们并没有得到太多的关注.或许它们中的一些应该这样(被无视),但是其它的属 性应该得到更多的认可.最伟大的财富隐藏在Webkit的下面,而且在iPhon

jquery中常用的函数和属性详细解析

 本篇文章主要是对jquery中常用的函数和属性进行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助 Dom: Attribute:属性 $("p").addClass(css中定义的样式类型); 给某个元素添加样式 $("img").attr({src:"test.jpg",title:"test Image"}); 给某个元素添加属性/值,参数是map $("input").attr({&qu

jQuery修改操作css属性实现方法

css()方法在使用上具有多样性,我们先来了解css()方法基本知识. css() 方法设置或返回被选元素的一个或多个样式属性. 返回 CSS 属性 如需返回指定的 CSS 属性的值,请使用如下语法: css("propertyname");下面的例子将返回首个匹配元素的 background-color 值: 实例 $("p").css("background-color"); 设置 CSS 属性 如需设置指定的 CSS 属性,请使用如下语法:

网站模板修改中常用到的CSS代码详解

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 在上一篇文章中,提到了一些修改网站模板中常用到的方法,工具.但其中也牵涉到不到关于CSS样式表的一些知识,对于这些知识,缺乏的还占大多数,今天我就将常用的一些CSS样式表语法整理一下,发出来给大家,希望对各位站长朋友修改网站模板的时候有一些帮助.如果你还没阅读过上一篇文章,请先移步至<关于淘客模板修改的一些心得总结>. CSS样式

常用的XmlHttpRequest对象属性

request|xml|xmlhttprequest|对象 Common XMLHttpRequest Object Methods Method Description abort() Stops the current request getAllResponseHeaders() Returns complete set of headers (labels and values) as a string getResponseHeader("headerLabel") Retu