101个CSS技巧的代码（基础篇）

2022-07-15 80酷酷网 80kuku.com

css|技巧<!DOCTYPEhtml PUBLIC "-//W3C//DTD 1.0 Transitional//EN""//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="//www.w3.org/1999/xhtml"><head><title>Chapter 2</title><meta http-equiv="content-type" content="text/html;charset=iso-8859-1" /><style type="text/css"></style></head><body><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Crasest magna, pretium sit amet, rhoncus nec, tristique molestie, leo.Aenean tortor sem, luctus at, luctus vel, consequat et, lectus. Proinid velit. Vestibulum ante ipsum primis in faucibus orci luctus etultrices posuere cubilia Curae; Cras ullamcorper. Donec nunc.</p><p class="transform">Lorem ipsum dolor sit amet, consectetueradipiscing elit. Cras est magna, pretium sit amet, rhoncus nec,tristique molestie, leo. Aenean tortor sem, luctus at, luctus vel,consequat et, lectus. Proin id velit. Vestibulum ante ipsum primis infaucibus orci luctus et ultrices posuere cubilia Curae; Crasullamcorper. Donec nunc.</p></body></html>
程序代码text-transform: capitalize;此样式只在我们用于英文网站时才要用到，另外国外英文网站喜欢用的字体是Arial 11px,行高为1.8em

2.水平居中技巧（center）
HTML代码<!DOCTYPEhtml PUBLIC "-//W3C//DTD 1.0 Transitional//EN""//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="//www.w3.org/1999/xhtml"><head><title>Chapter 2</title><meta http-equiv="content-type" content="text/html;charset=iso-8859-1" /><style type="text/css"></style></head><body><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Crasest magna, pretium sit amet, rhoncus nec, tristique molestie, leo.Aenean tortor sem, luctus at, luctus vel, consequat et, lectus. Proinid velit. Vestibulum ante ipsum primis in faucibus orci luctus etultrices posuere cubilia Curae; Cras ullamcorper. Donec nunc.</p><p class="centered">Lorem ipsum dolor sit amet, consectetueradipiscing elit. Cras est magna, pretium sit amet, rhoncus nec,tristique molestie, leo. Aenean tortor sem, luctus at, luctus vel,consequat et, lectus. Proin id velit. Vestibulum ante ipsum primis infaucibus orci luctus et ultrices posuere cubilia Curae; Crasullamcorper. Donec nunc.</p></body></html>

程序代码居中也是我们在定义样式中经常用到的：text-align: center;不但可以内联元素居中也同样可以块级元素居中，如我们在页面布局中，所用到的对body定义居中然后对WRAP定义居左就是用的这个知识点，因为IE5对margin:AUTO;不支持，所以你在页面中会看到这种兼容IE5的这种方法。

3.有背景色的标题（headingcolor）
HTML代码<!DOCTYPEhtml PUBLIC "-//W3C//DTD 1.0 Transitional//EN""//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="//www.w3.org/1999/xhtml"><head><title>Chapter 2</title><meta http-equiv="content-type" content="text/html;charset=iso-8859-1" /><style type="text/css"></style></head><body><h1>This is a level one heading</h1><p>These stuffed peppers are lovely as a starter, or as a sidedish for a Chinese meal. They also go down well as part of a buffet andeven children seem to like them.</p></body></html>
程序代码
我们都知道H1~H6都是用做标题的，所以在制作网页中一定要多用有语义的元素，前几天看到好象是Opera它的说明页中页脚的部局是用了< address>这个标签，而我们平时定义样式是这样：<div class="address">text</div>,我们很少去想用<address>这样有语义的标签！还是说一下正题吧，为了美化标题我们为H1加上了背景色和字的颜色，这样看上去就漂亮多了！关于标题在网上有相关的文章教程请在网上查找，这里不在重述。

4.标题间距（headingnospace）
HTML代码<!DOCTYPEhtml PUBLIC "-//W3C//DTD 1.0 Transitional//EN""//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="//www.w3.org/1999/xhtml"><head><title>Chapter 2</title><meta http-equiv="content-type" content="text/html;charset=iso-8859-1" /><style type="text/css"></style></head><body><h1>This is a level one heading</h1><p>These stuffed peppers are lovely as a starter, or as a sidedish for a Chinese meal. They also go down well as part of a buffet andeven children seem to like them.</p></body></html>
程序代码
margin-bottom: -12px;注意此处用了负值，平时做网页时很少想到用负值，没有看到这个方法时以前是设一个H1上边距或补白，下边的P边界补白设为0这样P就离H1很近了，一回想起以前这种方法真的很不好，看来以后要改成负边界的这种方法了！

5标题中的下划线（headingunderline）
HTML代码<!DOCTYPEhtml PUBLIC "-//W3C//DTD 1.0 Transitional//EN""//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="//www.w3.org/1999/xhtml"><head><title>Chapter 2</title><meta http-equiv="content-type" content="text/html;charset=iso-8859-1" /><style type="text/css"></style></head><body><h1>This is a level one heading</h1><p>These stuffed peppers are lovely as a starter, or as a sidedish for a Chinese meal. They also go down well as part of a buffet andeven children seem to like them.</p></body></html>

程序代码当看到效果图我们通常会想到是在<H1>中加入<span>标签然后定义SPAN的下边框，可是作者并没有按着这个思咱走下去，它定义的是文本修饰，同样的效果用了最简单的方法，这是我们写代码人要的最终要求！另外我们定义H1为内联元素在定义下边框也能达到效果，但还是不如作者的代码简单！

6.标题中的下划线2（headingunderline2）
HTML代码<!DOCTYPEhtml PUBLIC "-//W3C//DTD 1.0 Transitional//EN""//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="//www.w3.org/1999/xhtml"><head><title>Chapter 2</title><meta http-equiv="content-type" content="text/html;charset=iso-8859-1" /><style type="text/css"></style></head><body><h1>This is a level one heading</h1><p>These stuffed peppers are lovely as a starter, or as a sidedish for a Chinese meal. They also go down well as part of a buffet andeven children seem to like them.</p></body></html>

程序代码
代码很简单，就不多说了。在写代码时最复杂的代码也是由最简单的代码组成的，所以一定掌握好最基础的东西！

7.醒目的文字（hilite）
HTML代码<!DOCTYPEhtml PUBLIC "-//W3C//DTD 1.0 Transitional//EN""//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="//www.w3.org/1999/xhtml"><head><title>Chapter 2</title><meta http-equiv="content-type" content="text/html;charset=iso-8859-1" /><style type="text/css"></style></head><body><p>These <span class="hilite">stuffed peppers</span>are lovely as a starter, or as a side dish for a Chinese meal. Theyalso go down well as part of a buffet and even children seem to likethem.</p></body></html>

程序代码
“醒目也就是引起浏览者的注意，在国外的这种利用背景色、文字颜色的差异的方法，随处可见，而在国内的多以字体加粗，颜色突出为主流。”

8.整体文字缩进
HTML代码<!DOCTYPEhtml PUBLIC "-//W3C//DTD 1.0 Transitional//EN""//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="//www.w3.org/1999/xhtml"><head><title>Chapter 2</title><meta http-equiv="content-type" content="text/html;charset=iso-8859-1" /><style type="text/css"></style></head><body><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Crasest magna, pretium sit amet, rhoncus nec, tristique molestie, leo.Aenean tortor sem, luctus at, luctus vel, consequat et, lectus. Proinid velit. Vestibulum ante ipsum primis in faucibus orci luctus etultrices posuere cubilia Curae; Cras ullamcorper. Donec nunc.</p><p class="indent">Lorem ipsum dolor sit amet, consectetueradipiscing elit. Cras est magna, pretium sit amet, rhoncus nec,tristique molestie, leo. Aenean tortor sem, luctus at, luctus vel,consequat et, lectus. Proin id velit. Vestibulum ante ipsum primis infaucibus orci luctus et ultrices posuere cubilia Curae; Crasullamcorper. Donec nunc.</p></body></html>

程序代码在中文网页中单行缩进时使用样式text-indent: 2em;也就是2个字体高，接中文书写习惯就是空两个格，而英文很少用到.在使用整体缩进时我们用padding-left: 30px;就是左补白30像素，别看这个样式很简单，但用处很大，举个例子：我们在布局中很多人喜欢用HUCK技术，对于这种技术我研究的很少，所以也用的少，因为在以后升级后它们就可能会失效。所以我用变通的方法，在HTML中做文章，我们都知道IE5与IE6很大的不同就是对宽度的理解不同，有些人喜欢用voice-family: "\"}\""; voice-family:inherit;或者其它方法，这里就不一一举例了，我使用的方法，也就是应该提倡的方法是在父元素写一个宽度不加入补白，而在子元素中加入这些属性，如子元素中有P我们就加在P中左右补白为一个数值。这样就闭免了IE5与IE6之间的宽度问题了！

9.文本两端对齐（justify）
HTML代码<!DOCTYPEhtml PUBLIC "-//W3C//DTD 1.0 Transitional//EN""//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="//www.w3.org/1999/xhtml"><head><title>Chapter 2</title><meta http-equiv="content-type" content="text/html;charset=iso-8859-1" /><style type="text/css"></style></head><body><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Crasest magna, pretium sit amet, rhoncus nec, tristique molestie, leo.Aenean tortor sem, luctus at, luctus vel, consequat et, lectus. Proinid velit. Vestibulum ante ipsum primis in faucibus orci luctus etultrices posuere cubilia Curae; Cras ullamcorper. Donec nunc.</p></body></html>
程序代码
两端对齐的样式只对英文起作用，在为客户做英文页时客户说右边有很多空白，（因为一个英文单词如在本行放不下一行。可能你会想到强制换行的问题上了，但强制换行，一个单词可能就会拆分成两个单词，这样会使用户的的可读性下降，另外一点是IE有换行的样式，FF只能用 JAVASCRIPT去实现。），很不美观，于是加入这个样式后在视觉上就好看多了！

10.链接中的样式（linktypes）
HTML代码<!DOCTYPE html PUBLIC "-//W3C//DTD 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="//www.w3.org/1999/xhtml"><head><title>Chapter 2</title><meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /><style type="text/css"></style></head><body><div class="boxout"><p>Visit out <a href="store.html">online store</a>, for all yourwidget needs.</p></div><ul><li><a href="#">This is a link</a></li><li><a href="#">Link Two</a></li><li><a href="#">Link Three</a></li><li><a href="#">Link Four</a></li></ul></body></html>

程序代码
看了这个标题，你一定会说一个链接有什么好讨论的呢？其实不然，学会一方面学习知识，另一方面的整理自己以前错误的思路。还是接着说主题吧！链接的样式一共有四种a:link, a:visited, a:hover, a:active它们在写应用中是应该有顺序的，于是为了便于记忆有人写了LVHA这个“单词”，但我记得在哪本书中好象看到过只有a:hover在a: active之前就是要以的。所以我记忆的只有“HA“这个”单词“我们定了总的链接样式后如是页面中有不同的链接，我们就应用样式表的特点：”重叠“文中加入了一个CLASS。样式就可定义.boxout a，用我的话说就是CLASS下的A，之后就可以跟据我们的要求去定义样式了。此处text-decoration: underline overline;这是我第一次看到，应该注意这种用法。

11.列表图片（listimage）
HTML代码<!DOCTYPE html PUBLIC "-//W3C//DTD 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="//www.w3.org/1999/xhtml"><head><title>Chapter 2</title><meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /><link rel="stylesheet" type="text/css" href="listimage.css" /><style type="text/css"></style></head><body><ul><li>list item one</li><li>list item two</li><li>list item three</li></ul></body></html>

程序代码list-style-image这种方法用的人很少，主要是因为它的灵活性不太强不容易控制图片的位置，所以在实际当中多后背景图片所代替。

12.列表排成一行（listinline）
HTML代码<!DOCTYPE html PUBLIC "-//W3C//DTD 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="//www.w3.org/1999/xhtml"><head><title>Chapter 2</title><meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /><style type="text/css"></style></head><body><ul class="horiz"><li>list item one</li><li>list item two</li><li>list item three</li></ul></body></html>

程序代码display: inline;它的用处还是很大的，可以使一个元素成为内联元素，在去除IE边距加倍问题上中我们也使用这个样式。我们在做菜单中常用列表元素，对LI定义一种是使用FLOAT,另一种就是现在用的DISPLAY:INLINE;关于列表还有很多内容，以后在补充！

13.无列表符号的列表（listnomargin）
HTML代码<!DOCTYPE html PUBLIC "-//W3C//DTD 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="//www.w3.org/1999/xhtml"><head><title>Chapter 2</title><meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /><style type="text/css"></style></head><body><ul><li>list item one</li><li>list item two</li><li>list item three</li></ul></body></html>

程序代码
你知道为什么这里用了padding-left: 0;margin-left: 0;吗？就是因为IE，FF里的默认的样式不同，一个默认有边界，一个默认有补白，所以为了显示一样，我们统一定义一个样式，在很多页面样式中你也可以看到*{padding:0;margin:0;}这主要是为了避免不必要的麻烦而首先定义的一个样式！list-style-type: 还有其它的属性如：square;但实际应用中，例表符号的大小并不容易控制，它与字体、大小都有关系，所以很多情况下使用一个点的符号，网易上首页就使用这种方法，还有就是利用背景图片了。背景图片可控制性强。

14.字母大写问题（listnomargin）
HTML代码<!DOCTYPEhtml PUBLIC "-//W3C//DTD 1.0 Transitional//EN""//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="//www.w3.org/1999/xhtml"><head><title>Chapter 2</title><meta http-equiv="content-type" content="text/html;charset=iso-8859-1" /><style type="text/css"></style></head><body><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Crasest magna, pretium sit amet, rhoncus nec, tristique molestie, leo.Aenean tortor sem, luctus at, luctus vel, consequat et, lectus. Proinid velit. Vestibulum ante ipsum primis in faucibus orci luctus etultrices posuere cubilia Curae; Cras ullamcorper. Donec nunc.</p><p class="transform">Lorem ipsum dolor sit amet, consectetueradipiscing elit. Cras est magna, pretium sit amet, rhoncus nec,tristique molestie, leo. Aenean tortor sem, luctus at, luctus vel,consequat et, lectus. Proin id velit. Vestibulum ante ipsum primis infaucibus orci luctus et ultrices posuere cubilia Curae; Crasullamcorper. Donec nunc.</p></body></html>

程序代码
text-transform: uppercase;这种方法可以使我们不用在HTML中写入大写而用样式就可以使小写字母全部转变为大写字母了。