9.9下午学习内容

Posted 2020-08-08 Strive-count

---恢复内容开始---

样式表

一、大小

1.width   宽度

2.height  高度

<div style="width:200px; height:200px"></div>  样式和属性不同，数字后面要加上单位px或者%。

二、背景

1.背景色：background-color

<div style="width:200px; height:200px; background-color:#33C"></div>

2.背景图：background-image

<div style="width:1000px; height:800px; background-image:url(%E7%BD%91%E9%A1%B5%E8%83%8C%E6%99%AF%E5%9B%BE1.jpg)"></div>

3. 背景图平铺方式：background-repeat

<div style="width:1000px; height:800px; background-image:url(%E7%BD%91%E9%A1%B5%E8%83%8C%E6%99%AF%E5%9B%BE1.jpg); background-repeat:no-repeat"></div>   表示不平铺。

4.背景图片平铺位置：background-position

<div style="width:1000px; height:800px; background-image:url(%E7%BD%91%E9%A1%B5%E8%83%8C%E6%99%AF%E5%9B%BE1.jpg); background-repeat:no-repeat; background-position:left bottom"></div>   表示背景图在左下角（也可以直接是left、right、bottom、center、top）平铺，

<div style="width:1000px; height:800px; background-image:url(%E7%BD%91%E9%A1%B5%E8%83%8C%E6%99%AF%E5%9B%BE1.jpg); background-repeat:no-repeat; background-position:left 20px bottom 20px"></div>  表示背景图片距离左和下各20像素的距离平铺。

5.背景图是否随着页面的滚动而滚动：background-attachment

<div style="width:1000px; height:800px; background-image:url(%E7%BD%91%E9%A1%B5%E8%83%8C%E6%99%AF%E5%9B%BE1.jpg); background-repeat:no-repeat; background-position:left 20px bottom 20px; background-attachment:fixed"></div>   表示背景图片固定住，不随页面滚动而滚动。将fixed换成scroll，背景图片会随着页面滚动而滚动。

6.背景图片大小： background-size

<div style="width:1000px; height:800px; background-color:#33C; background-image:url(%E7%BD%91%E9%A1%B5%E8%83%8C%E6%99%AF%E5%9B%BE1.jpg); background-repeat:no-repeat; background-position:left 20px bottom 20px; background-attachment:fixed; background-size:200px 200px"></div>  表示背景图片的大小为200px × 200px ，auto表示自动的。

三、字体

1.字体样式 font-family，一般选用电脑常见字体，如微软雅黑和仿宋。<div style="font-family:微软雅黑">文字</div>

2.字体大小 font-size   一般在网页里面常用的比较小的字体是12px，正常阅读的文字的大小是14px，16px也可以用，但是一般阅读的类型的不要超过16px。

     <div style="font-family:微软雅黑; font-size:18px">测试文字</div>

3.字体样式 font-style   italic表示倾斜

    <div style="font-family:微软雅黑; font-size:18px; font-style: italic">测试文字</div>

4.字体粗细 font-weight    bold表示加粗

    <div style="font-family:微软雅黑; font-size:18px; font-style: italic; font-weight:bold">测试文字</div>

5.装饰线 text-decoration     underline表示下划线   overline表示上划线    line-through表示删除线    none表示没有，经常用来去掉超链接的下划线。

    <div style="font-family:微软雅黑; font-size:18px; font-style: italic; font-weight:bold; text-decoration:underline">测试文字</div>

6.字体颜色  color

    <div style="font-family:微软雅黑; font-size:18px; font-style: italic; font-weight:bold; text-decoration:underline; color:#F00">测试文字</div>

四、对齐方式

1.水平对齐方式  text-align 

    <div style="width:200px; height:200px; color:#FFF; text-align:center">测试文字</div>

2.垂直对齐方式  vertical-align     配合行高（line-height）使用。

3.行高  line-height

    <div style="width:200px; height:200px; background-color:#F00; color:#FFF; text-align:center; vertical-align:middle; line-height:200px">测试文字</div>

4.缩进  text-indent   单位：像素

    <div style="width:200px; height:200px; background-color:#F00; color:#FFF; text-align:center; vertical-align:middle; line-height:200px; text-indent:30px">测试文字</div>

五、边界与边框

1.外边距 margin  方向：上右下左   顺时针

 <div style="width:300px; height:300px;
        <div style="width:200px; height:200px; background-color:#CF9; margin:10px 0px 0px 10px; float:left"></div>
    </div>

  float为流向，在以后的布局中会学，在这不加上边距不起作用。

2.内边距 padding 方向：上右下左   顺时针

   如果加了内边距，改元素会相应的变大。

3.边框 border   border代表四个方向全有。

div style="width:200px; height:200px; border:1px solid #60F"></div>

1px solid #60F  简写方式  第一个边框粗细  第二个边框样式  第三个边框颜色