PHPCMS菜鸟成长记(卷三)之CSS属性篇

导语 这次的成长主要是靠css来灌溉的,近期主要看了关于css的很多东西,可以在工作方面初步的看懂css的知识了,这个看着乐趣较大,因为即做即可看到效果,效果明显,兴趣比较高。总结了一点它的小知识,回顾下自己最近

这次的成长主要是靠css来灌溉的,近期主要看了关于css的很多东西,可以在工作方面初步的看懂css的知识了,这个看着乐趣较大,因为即做即可看到效果,效果明显,兴趣比较高。
总结了一点它的小知识,回顾下自己最近的所学:
1. CSS的引用方式:
html引用css方法如下
1>直接在div中使用css样式制作div+css网页
2>html中使用style自带式
3>使用@import引用外部CSS文件
4>使用link引用外部CSS文件    推荐此方法
就我自己的学习当中,我常用到的就是第二种,因为都是写的小的几句话的,主要为了看效果,主推荐第4种,因为在做大一点的时候,第4种相当好用,主要界面简洁清晰,一目了然,方便后期查看和修改。

\
 
2. CSS引用进来就是要用的,所以在看完引用方式,接着就是该看它CSS怎么用了?说到怎么用就是关注它的属性了,这个一搜就是一大片,无非就是几个大块,字体(font)、背景(background)、边框(border)、列表(list-style)等等之类的属性,只要你英语过关,这些一看就会,就懂了,基本大多都是英语翻译。
主要就是留心一点平常见的少的一些,在CSS中还是很常用的一些属性,拿出来多凭着自己的想法去写点CSS效果,一好玩,在玩的同时也加深印象,这些就是我写的点东西。
background-image:url(sun1.jpg); 添加背景图片
background-repeat:repeat-x;/no-repeat; 重复,俗话就是平铺,x横向平铺,纵向肯定是y了,no-repeat就是不平铺
background-position:bottom; 这个是固定的意思,这个可是跟的属性就多了,上下左右中,px,%,都可以写,还是他不是背景时候的用法,这些都很经常用到,手册一查一大把,就看你注意到没。它的属性会经常用到,建议仔细查看一番。
说到position,就不得不提一下(元素是否可见)visibility: inherit(继承); visible(可见); hidden(不可见);
(是否显示滚动条)overflow: visible; hidden; scroll; auto;
clip: rect(12px,auto,12px,auto) (裁切) [PS:这个属性很多网站都用到,用的好就是神来之笔,网站会将的相当详细,一定要去查]
background-attachment:fixed; 这个就是防止乱跑的,让他定在那里不动,与它相对应的就是scroll,就是滚动、这个很多网站现在频繁用到,一般都是旁边的小广告,小视频什么的。
以上的几个属性都必须注意一点,就是必须要先有一张背景图片做前提。
3. 就是当你联系的多了,在翻看别人写的CSS的时候会发现他们写的很精干,明了,这就是一些CSS的简写格式,注意是有格式要求的,不是任由自己想到什么写什么的,下面就说一些常用的简写格式。
1>先说最常用的背景,背景呢,我们一般就是把基本的写好,用到什么补充什么,但是如果简写呢,只要记住一句话,“色图重滚位”,说的就是这个背景的顺序,故名思议就是,颜色、图片、重复(即平铺)、滚动(是否)、位置。
举个例子:色彩background-color: #FFFFFF;图片background-image: url();重复background-repeat: no-repeat;滚动background-attachment: fixed;(固定),位置background-position: left(水平) top(垂直);

简写方法 background:#000 url(..) no-repeat fixed left top;
2>就是margin和padding,以边框(border)为界限,一个是外边框(margin),一个是内边框(padding),它两的简写方式一样,就是记住,不是上下左右,不是左右上下,而是“上右下左”,就是按表的指针怎么走,它就怎么转。
3>说到边框(border),我们就说下border的简写形式,border就是按照我的平时想的给你一个框框,首先想到的是它有多大呢,就是(px),然后就是实线(solid)、还是虚线(dashed)[PS:这个有好多,去搜搜看看,并且自己写的看看效果],最后就当然大小有了,样式有了,给点颜色(color)看看呗,它的格式就是border:1px solid #000000
4>我认为是最不好记得一个,放在最后,就是文字的属性(font)。这个多,还没有什么规律可寻,所以比较难记一点,当然对于学霸来说还是小菜,我还是喜欢顾名思义的熟练一点:就是“样变粗,大行字”,就是下面我举得这个例子了。
来个例子:样式font-style:italic(斜体);变体font-variant:small-caps(小型大写字母);粗细font-weight:bold(粗体);大小font-size:1px;行高line-height:150%;字体font-family:’楷体’;
简写为:font:italic small-caps bold 1em/150% 楷体;
http://www.aseoe.com/ true PHPCMS菜鸟成长记(卷三)之CSS属性篇 http://www.aseoe.com/show-21-310-1.html report <?php echo strlen($content) / 2; ?> 这次的成长主要是靠css来灌溉的,近期主要看了关于css的很多东西,可以在工作方面初步的看懂css的知识了,这个看着乐趣较大,因为即做即可看到效果,效果明显,兴趣比较高。总结了一点它的小知识,回顾下自己最近
TAG:PHPCMS
本站欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果
转载请注明: 文章转载自:爱思资源网 http://www.aseoe.com/show-21-310-1.html

[前端插件推荐] Plugin

1 2 3 4
  • jQuery实现逐字逐句显示插件l-by-l.min.js
  • jQuery带方向感知的鼠标滑过图片边框特效插件
  • jQuery HotKeys监听键盘按下事件keydown插件
  • 响应式无限轮播jQuery旋转木马插件
响应式无限轮播jQuery旋转木马插件
web前端开发
爱思资源网 Copyright 2012-2014 Www.Aseoe.Com All rights reserved.(晋ICP备13001436号-1)