css随笔_html/css_WEB-ITnose-tutoriel HTML-php.cn

css随笔_html/css_WEB-ITnose

WBOY

Libérer： 2016-06-24 11:23:08

original

1028 Les gens l'ont consulté

最近一直在看妙味的视频，感觉讲的还是蛮有意思的。我的习惯一般是听完课之后会自己联系一遍，然后再把知识点整理下来。今天要写的主要是关于css的一些整理笔记，都是些比较基础的内容。

我们先来上一段超级简单的代码

<html>    <head></head>    <body>        <div id="dv"></div>    </body></html>

Copier après la connexion

当我们在html中这样写的时候,页面上什么东西也不会呈现出来，其实div是存在的，但是因为它没有宽和高，也就是没有大小，所以我们是看不到的。那么怎么能让他看到呢，我们先给这个div加上基本的样式宽和高，在css中，设置长度的方式共有四种，分别是：

px 像素单位
mm 真实的长度单位，毫米
em 相对长度单位，相对于当前对象内文本的字体尺寸
百分比，占父容器的百分比
```
#dv { width: 100px; height: 100px; }
```
Copier après la connexion
我们看下效果图：

什么都看不到的图片

貌似并没有什么卵用，网页没有任何变化，难道赋了宽和高还不行吗，他不是有大小了吗？但是其实它就在那，只是你看不到而已。因为背景是白色的，div也是白色的，没有任何区别。想象一下，一条变色龙藏在一堆树叶中间。对，就是那么回事。

那么，我们现在给他一个边框吧，应该怎么给它边框呢？总不能说，“出现吧，边框”，它就出现了，我们还是试着给这个div来一个样式

#dv { border:1px solid #0094ff; }

Copier après la connexion

我们能看到这个div了

有边框的div

实际上上面的边框样式，是由三个样式组合成的复合样式，分别是：

border-widht : 1px;border-style: solid;border-color:#0094ff;

Copier après la connexion

如果，我们想只设置上边框，应该怎么做呢？

border-top:1px solid #0094ff;

Copier après la connexion

只有上边框的div

其他的边框已经看不到了，因为我们只设置了上边框，如果想要其他三条边框，有应该怎么做呢？

#dv {         border:1px solid #0094ff;         border-top:none;}

Copier après la connexion

这样的话，我们就把上边框给隐藏掉了，效果如下：

没有上边框的div

话说，只有边框的div是寂寞的，我们还需要配上淡淡的忧伤的背景色，好了，就给他一个大红色吧，什么鬼！！，设置颜色的方式有如下三种

颜色关键词，如red、blue、green等，就对应字面上的颜色
十六进制表示法，如 #ff22ff
使用RGB方法设置， rgb(14,140,239)

现在我们设置div的背景色，给div一个background-color:red的样式

 background-color: red;

Copier après la connexion

淡淡的忧伤的图片

说好的忧伤呢，好吧，我不要背景色了，直接来个一个背景图片吧，添加背景图片的方式为url(图片路径)，嗯，那我们添加一张美女图片作为背景图：

background-img:url(img/icon-email.gif);

Copier après la connexion

美女图片？

说好的美女图片呢，好了，我们言归正传。我其实呢，只是想让它只显示一张图片，可这张背景图重复出现了那么多次，这是为什么呢？因为背景图有个默认样式，就是background:repeat,也就是说，背景图默认沿着x轴平铺，那么我们试着改变下它的样式，只让它沿着x轴平铺，或者是只沿着y轴平铺，或者只让他显示一张图片呢？

background-repeat:no-repeat; //不平铺background-repeat:repeat-x;  //沿着x轴平铺background-repeat:repeat-y;  //沿着y轴平铺

Copier après la connexion

我们把这张背景图片设成不平铺，也就是

background-img: url(img/icon-email.gif);background-repeat:no-repeat;

Copier après la connexion

显示效果如下：

只有一个信封的图片

接下来，我们调整一下背景图片的位置，背景图片位置是通过background-position属性来设置的

 background-position: 20px 20px;

Copier après la connexion

效果如下：

调了下背景图片的位置

第一个20px意思是背景图片向右平移20个像素，第二个px是向下平移20个像素，当然我们也可以设置百分比，或者直接用left、center、right等设置，下面我列个表来展示background-position

background-position	第一个数值	第二个数值
数值 20px 20px	向右平移20px	向下平移20px
百分比 20% 20%	背景图片x轴中心向右平移父容器的20%	背景图片y轴中心向下平移父容器的20%
关键字 left center	背景图片水平靠左	背景图片垂直居中

好了，今天就写到这里吧，因为本人比较懒，所以好多想写的东西还未整理出来，等整理完成后，和大家一起分享吧。