headfirst 笔记 第五章

第五章

（1）盒模型（box model）：

内容区（content area）、内边距（padding）、边框（border）、外边界（margin）

不能对内、外边界指定颜色和样式，元素的背景颜色和背景图片的界限是边框，不能延伸到外边距。

一些属性：

1.background-reapeat背景图片平铺与否（完全平铺；x/y轴上平铺；inherit继承父元素设置）

2.background-position 图像位置，可以用px、百分数、关键字（center、left、right、top、bottom可以组合使用）

3.padding通过这种方法可以单独设置一边的内边距值，注意顺序，因为后面的代码会覆盖前面的。

   padding : 25px;
   padding-left : 80px;

4.border-style边框样式solid、double、groove槽线（整个border是下去的）、ridge脊线、outset外凸（整个元素块是凸出来的）、inset内凹、dotted虚线、dashed折线
如果只想指定某一边的样式、颜色、宽度，可以组合关键字使用：

border-top-color : red;
border-left-style : inset;
border-bottom-width : thick;

5.border-radius边框圆角 可以整体指定，也可以单独组合

border-top-left-radius:1.5em;
border-bottom-right-radius:15px;

6.对一个元素设定样式可以使用id或者class（不建议，缺失唯一性大材小用），对一组元素就使用class。一个页面上可以出现不同元素属于相同的class，而id是唯一的，既方便设置独特的样式，也方便用于元素定位。

类名要以字母开头，id名可以以字母或数字开头，都不可以包含空格。

类选择器与id选择器都可以与特定元素组合限定范围：

p.spacial{}  --  special类中的段落  

p#special{}  --  id为special的<p>元素（这种写法在可能更复杂的项目中有多个页面，而不同页面中id名字可能会相同，所以可以通过进一步指定其元素缩小范围）

7.当link多个外部样式表时，样式表顺序十分重要，最下面的样式表最优先（因为会覆盖）。所以如果想要修改样式，也可以不去CSS文件里修改，可以通过在head里加一个style去覆盖。

8.关于<link>，空元素，仅包含属性，只存在于head，可以出现任意多次。

属性：

charset（html5不支持，规定字符集）     href 链接到url

hreflang 规定链接文档的文本语言

media 规定该链接文档应用的设备，通过创建一个媒体查询（media query），媒体查询应用在html的link上和xml的stylesheet上，也可以用在CSS里的@media和@import规则上。

<link media="screen and (width:800px)" rel="stylesheet" href="example.css" />
<?xml-stylesheet media="screen and (width:800px)" rel="stylesheet" href="example.css" ?>
@media screen and (width:800px){ … }
@import url(example.css) screen and (width:800px);

语法：
①可以指定媒体查询列表，以逗号隔开各个查询

②查询语句用and把媒体类型和表达式相连，媒体类型前可以加限定词only/not

③表达式包括属性media feature媒体特性（全都是CSS3新增，IE8及之前不兼容）

可以添加max/min在前面限定例：min-device-width：480px；