美文网首页
体验css02

体验css02

作者: 黑色的夜 | 来源:发表于2016-05-21 23:36 被阅读0次

    【css中的背景属性】

    简介:css中背景属性用的是background它是一个复合属性和border类似,也就是说它的内部有很多个值。对css来讲背景图是非常常用的就像我们做网站离不开图片一样,所以对于bg这个属性必须要掌握的非常熟练。

    《background基础》

    基本机构:

    Background:颜色 图片路径 平铺方式 水平位置 垂直位置 图片模式;

    举例:background:#000 url(pic.jpg) no-repeat center top fixed;

    其中最复杂的当属图片定位的两个值;图片定位可以用两种方式来属性第一是特殊值形式例如left,right,top,center,bottom第二是坐标形式可以通过先设置水平坐标后设置垂直坐标来控制图片定位,注意它可以接受负值。整个网页的左上角是坐标为0,0的原点。

    图片的平铺方式 no-repeat表示不平铺, repeat表示平铺。

    在所有值的最后添加一个fixed的话可以让图片跟随屏幕滚动。

    《知识点》

    对于一个标签如果没有任何内容的前提下,这个标签的默认状态就和一条线一样根本看不见。

    【css复合选择器】

    简介:css中一共有3种类型的复合选择器分别是子代,并集,交集(指定式)

    《子代选择器》

    选择器中通过空格表示包含关系例如 ul li 表示选中ul中的所有li 也可以写成 .class div表示某个类中的所有div标签被选中。

    《并集选择器》

    并集选择器通过逗号来表示并列选择关系。它可以将很多选择器选中的内容合并到一起来书写样式。并集选择器不区分前后。

    《交集选择器》

    简介:用的不多,但是见到以后需要知道是什么意思。

    交集选择器的作用是通过标签名称和标签身上所具有的类名来直接选择特定标签。

    例如 div.class 作用是 选中div并且身上带有class类的那一个标签。

    交集选择器中是没有任何新的符号的就是连续书写各种基础选择器。

    【文字控制属性】

    Css中的所有属性分为两大类,文字控制属性和区块控制属性。解释一下区块控制属性指的就是对盒子进行的所有控制,例如实体化,边距设置,定位,对齐等等。

    《css中的bui设置》

    Font-weight:bold 文本加粗;

    Text-decoration:underline; 表示下划线;

    Overline ;上划线;

    Line-through;贯穿线; 实际上就是删除线。none表示清除;

    Font-style:italic  表示文本倾斜。

    【网页布局】

    对于任何复杂的网页都是由盒子堆砌而成,那么布局指的是什么,布局是一个在网页制作中非常麻烦的事情,但简单的说布局指的就是网页中形形色色的盒子的排列方式。 这些排列方式虽然看起来很多但实际上只有两种排列类型就可以实现一切布局。首要的垂直排列,水平排列。 水平排列实际上是依附于垂直排列产生的。

    《浮动属性》

    Float表示浮动对齐;它只有两个值left,right没有center。它最终实现的效果就是让盒子能够水平排列,并且浮动对齐了的盒子都能够接受人为尺寸。

    网页的布局当中最稳定的盒子排列方式是垂直排列就是块级元素垂直排列。而盒子水平排列一般都是在某个盒子内部进行拆分使用的。

    *****浮动使用的原则:对于一个容器的内部同级的所有盒子只能接受一种排列方式要么是垂直要么是水平不能混用。

    简单理解为:同级标签之间水平排列或垂直排列只能使用一种。

    【网站制作】

    《三步准备工作》

    1. 清空默认边距;

    2. 设置正文默认样式; 就是给body设置文字控制三属性。

    3. 修改超链接默认样式;一般只需要改两个,颜色,下划线。

    《水平排列结构的制作步骤》

    分为三步:

    1. 实体化盒子设置盒子的尺寸。

    2. 实体化盒子好了以后设置浮动,左对齐右对齐或者一左一右的。

    3. 一定要在最后一步再去确立内外间距的距离然后定位。

    《清除列表样式》

    Css从来不用html当中默认的列表样式所以在默认清空边距的时候可以顺带清空。方法是;

    List-style:none;

    我再次强调一次,制作网页布局的顺序,一定是先实体化盒子,然后再添加浮动对齐,最后再处理间距用于定位。

    相关文章

      网友评论

          本文标题:体验css02

          本文链接:https://www.haomeiwen.com/subject/bvsorttx.html