务必把握10个十分非常好的CSS技能

日期：2021-01-20 类型：科技新闻 

关键词：快速建站，网站建设系统，免费网页建站，网站免费建设，建站系统

在这里，恰当的应用CSS的技能，可让你无需改动HTML就可以获得很好的blog或模版外型。我搜集了1些十分有效的CSS技能让大家设计方案blog时更炫更酷。

设计方案模板和blog主题时，我常常“持续反复推敲和尝试CSS（Hit and Trial CSS ），我只看哪样配色计划方案和哪样CSS特性的融合能使网页页面的元素更完善。对了。之因此说是“持续反复推敲和尝试CSS”是由于在获得了令人满意的实际效果以前我会去尝试想尽1切方式。应用这些不一样的CSS特性中，我用的数最多的是列出来的这些。

从我刚开始写blog，我就触碰了CSS，我爱设计方案也爱CSS。blog让我学了PHP，CSS乃至HTML。这里我搜集了10个很非常好的CSS技能，你能够用在你的blog或本人网站上。它能够帮你很好地梳理你的blog元素并让她们看起来蛮酷的。下面刚开始大家的內容，期待你会喜爱它。

1、简易的方式调剂blog照片尺寸

CSS Code拷贝內容到剪贴板
  1. .content img {   
  2. height:auto;   
  3. width:500px;   
  4. }  

这是最简易高效率的再次调剂你blog照片规格的方式。它把內容里边的全部照片的宽度设为500像素，高宽比依据宽度自融入。我如今便是用这个方式再次界定了这个blog內容里边的照片尺寸。

2、IE HTML Hack

CSS Code拷贝內容到剪贴板
  1. div#content {width: 580px}   
  2. * html body div#content {width: 600px}   
  3.   

在div前面再加*号，这样你能为IE订制独特款式。

3、CSS黑影

CSS Code拷贝內容到剪贴板
  1. .shadow {   
  2. -moz-box-shadow: 3px 3px 5px 6px #ccc;   
  3. -webkit-box-shadow: 3px 3px 5px 6px #ccc;   
  4. box-shadow: 3px 3px 5px 6px #ccc;   
  5. }   
  6.   

你能为块级元素或任何被div包裹的类或标识运用上面的款式。你必须设定水平静垂直偏位量、模糊不清半径和黑影填充色。你能够在这篇文章内容贴出的那张照片上看看这个事例。

4、CSS首字变大

CSS Code拷贝內容到剪贴板
  1. p:first-letter {   
  2. display: block;   
  3. float: left;   
  4. margin: 5px 5px 0 0;   
  5. color: red;   
  6. font-size: 1.4em;   
  7. background: #ddd;   
  8. font-family: Helvetica;   
  9. }   
  10.   

界定你的首字变大很非常容易，用CSS的first-letter特性便可以全自动选定的blog的首字母，这样你能够订制CSS来设计方案首字母的款式了，像更大字号、斜体这些。

5、用CSS旋转图象

CSS Code拷贝內容到剪贴板
  1. #content img {   
  2. -moz-transform: scaleX(⑴);   
  3. -o-transform: scaleX(⑴);   
  4. -webkit-transform: scaleX(⑴);   
  5. transform: scaleX(⑴);   
  6. filter: FlipH;   
  7. -ms-filter: "FlipH";   
  8. }   
  9.   

用上面的CSS特性你能够旋转任何照片

6、移除被点连接的点框

a {outline: none}

或

a {outline: 0}

你1定留意到了，当你在1些blog里点一下连接时，你会看到在这个连接上有点状的边框。你能够根据上面1小段的CSS移掉这些边框。

7、在CSS中应用独特字体样式

你可使用CSS来载入独特字体样式，你要做的便是把这个TTF文件格式的字体样式提交到服务器上，随后应用字体样式标准在CSS上导入它。（PS：在以前那篇《10个必备的CSS技能总结》中有提到如何应用的。）

8、元素全透明

CSS Code拷贝內容到剪贴板
  1. .element {   
  2. filter:alpha(opacity=50);   
  3. -moz-opacity:0.5;   
  4. -khtml-opacity: 0.5;   
  5. opacity: 0.5;   
  6. }   
  7.   

应用全透明特性，你可让任何访问器上的元素全透明,这些特性能够在全部流行器上工作中，乃至IE（PS：IE6略过？...）

9、应用CSS显示信息连接以后的URL

a:after{content:" (" attr(href) ") ";}

这会在连接锚点后显示信息URL。你还可以用字体样式或别的款式界定它。

10、为手持机器设备订制独特款式

<link type="text/css" rel="stylesheet" href="handheldstyle.css" media="handheld">

假如你的blog不可以回应或你想在用手机上访问时有独特的款式，你能够为你blog的手机上版订制CSS。

以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。

上一篇：CSS3处理挪动网页页面上点一下连接开启色块的难 返回下一篇：没有了