第九章：与元素亲密接触-----盒模型

这一章主要是改进休闲室页面，有很多零零散散的东西。

行高-----line-height

可以百分数，em,px

p{
   line-height : 2em ;
}

盒模型、内边距、外边距

内边距：padding       外边距：margin      边框：border

先设置padding/margin为多少，在此基础上，如果还想改变左右距离的话，那就

内边距左：padding-left

内边距右：padding-right

外边距左：margin-left

外边距右：margin-right

背景-----background

背景图片   background-image

p{
    background-image : url(images/background.gif) ;
}

这里给的是相对路径，也可以放绝对路径

这里如果不写另一个属性background-repeat就会横竖都重复该图片，所以

background-repeat : no repeat  不重复

background-repeat : repeat-x    横向重复

background-repeat: repeat-y     纵向重复

background-repeat: inherit        按父元素的设置处理

把图片放在哪呢？background-position

background-position:top left  左上角

background-position：top right    右上角

background-position：bottom left    左下角

background-position：bottom right   右下角

边框样式：border-style

border-style
solid	dotted	dashed	double	grove	inset	outset	ridge
实线	虚线- 点线	虚线- 破折线	双线	槽线	内凹	外凸	脊线

 

 

 

 

边框宽度: border-width

可以指定某一边的边框，如border-left-width,border-right-width,border-top-width,border-bottom-width

border-width
thin	medium	thick	...px
细	中	粗	用多少像素指定

边框颜色：border-color

可以指定某一边的边框颜色，如border-left-color,border-right-color,border-top-color,border-bottom-color

指定边框颜色可以用百分数，颜色名，十六进制数，  与字体颜色类似

边框圆角：border-radius

可以指定某一边的边框圆角，如border-top-left-radius,border-top-right-radius,border-bottom-left-radius,border-bottom-right-radius

可以使用em或者px

border-radius:15px          指定了四个角

要是要分开指定就用上边具体位置的圆角

id属性

之前想要单独改变某一个元素里的样式使用了class，他和我们今天的id属性作用其实是一样的，但是其实有一些是不对的，想要页面中独一无二的元素里使用一种样式，比如页头或者页尾的法律声明等，应该采用id属性，它的使用类似于class

html中这样写

<p id="footer">页面法律声明，巴拉巴拉</p>

css中这样写         记得加#号

#footer{
         font-size:120%;
         font-color:#d2c311;
}

那能不能我只指定有id为footer的段落使用呢？  

id只是一个元素的唯一标识，这并不妨碍这个元素属于一个或者多个类

p#footer{
         font-size:120%;
         font-color:#d2c311;
}

class与id 的差别：id选择器只与页面中的一个元素匹配

类名要以字母开头，不过id可以以数字或者字母开头，都可以包含数字，字母，“-”字符

使用多个样式表------<link>  与  media

如果一个公司分为销售部，市场部......各个部门还想有不同的样式，这个时候可以有好几个css哦！

<link type="text/css" rel="stylesheet" href="lounge_market.css">
<link type="text/css" rel="stylesheet" href="lounge_seattle.css">

 那如果样式表中某些样式重复怎么办呢？

css样式表的放置顺序很重要，下面的样式会覆盖上面

样式表，让页面不只是面向浏览，而是面向设备。

要是想在不同设备上显示不同的样式怎么办呢？比如某个设备宽400px,那你原来样式宽450px,这个时候就可以适当放弃一些样式了，比如装饰的一些小图片什么的，还是文字最重要，你觉得呢？

两种方式进行媒体查询：

第一种：直接在<link>元素中增加media属性

<link rel="stylesheet" href="lounge1.css" media="screen and (max-device-width:480px)">

第二种：直接在css中增加媒体查询

@media screen and (max-device-width:480px) {
                  background-image:url(images/red.gif);
}
@media screen and (max-device-width:500px) {
 #footer{
          margin-right : 30px;
        }
}

就是直接把哪种样式上边加上哪种设备，即@media规则

查询中有很多属性可以用，比如 max-device-width     min-device-width (这两个刚刚用过)  

还有orientation是横向（landscape）还是纵向(portrait)

<link rel="stylesheet" href="lounge.css" media="screen and (max-device-width:1024px) and (orientation:portrait)">

还有很多属性，可以在之后的学习中再加以补充。