CSS学习之路-第2篇
本文最后更新于 130 天前,其中的信息可能已经有所发展或是发生改变。

CSS学习之路-第2篇

我这节学的是构造块级元素
1.宽高

width:数值;

height:数值;

也可用百分比!

长高的设置不会被后代元素继承

2.背景

 (1)背景颜色

       background-color:颜色值;
       颜色值上一篇有介绍过,这里就不详细介绍了
       background-color不会被后代继承
 (2)背景图片
       background-image:属性; 属性的默认值为none 表示背景上没有放置任何图片
 
       如果需要设置一个背景图像,必须为这个属性设置一个url值

       background-image:url(bg.png);

       注意图片的位置引入方法!

       背景图片重复问题

       使用background-repeat来解决,可用的值有:

       repeat-x(水平平铺)
       repeat-y(垂直平铺)
       no-repeat(不平铺)

       背景图片的位置

       使用 background-position 来设置

       1>可以使用一些关键字:top bottom left right 和 center
         通常这些关键字会成对出现
         top left
         top center
         top right
         center left
         center center
         center right
         bottom left
         bottom center
         bottom right
       2>也可以用百分比
         background-position:50% 50%;

         使用关键字时

         第一个值是y轴(垂直方向) 第二个值是x轴(水平方向)

         使用具体的数值时,例如百分比时

         第一个表示x轴(水平方向),第二个表示y轴(垂直方向)

       背景关联(使背景图片不随着滚动条的移动而移动)

       background-attachment:fixed;
 (3)总结写法
       background:#00ff00 url(bg.gif) no-repeat fixed center  
       left;

       写法:
       background:颜色值 背景图片地址 图片是否平铺 图片是否随滚动条移动而移动 水平偏移值 垂直偏移值

       格式不需要一定相同

3.边框
  border:1px solid#ccc;

  dashed 表示虚线

  border-left:none;
  border-right:none;
  border-top:none;
  border-bottom:none;

  分开设置

评论

  1. 芄子 博主
    5年前
    2016-10-29 17:42:30

    学完CSS就得去复习HTML了,不然学了CSS也没啥用。

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
Source: https://github.com/zhaoolee/ChineseBQB
Source: https://github.com/zhaoolee/ChineseBQB
Source: https://github.com/zhaoolee/ChineseBQB
颜文字
Emoji
小恐龙
花!
滑稽大佬
演奏
程序员专属
上一篇
下一篇