侧边栏壁纸
博主头像
落叶人生博主等级

走进秋风,寻找秋天的落叶

  • 累计撰写 130562 篇文章
  • 累计创建 28 个标签
  • 累计收到 9 条评论
标签搜索

目 录CONTENT

文章目录

《Head first HTML与CSS 第二版》读书笔记 第九章 盒模型

2024-05-07 星期二 / 0 评论 / 0 点赞 / 56 阅读 / 4283 字

line-height属性指定行间距,可以使用px,em和百分数。em和百分数相对于本元素字体的大小。 CSS将每个元素看做一个盒子,这里的元素包括块元素和内联元素在内的所有元素。每个盒子由一个内容

line-height属性指定行间距,可以使用px,em和百分数。em和百分数相对于本元素字体的大小。

 

CSS将每个元素看做一个盒子,这里的元素包括块元素和内联元素在内的所有元素。每个盒子由一个内容区以及可选的内边距、边框和外边距组成。

 

background-image属性把一个图像放在元素的背景中:

background-image: url(images/background.gif)

还有另外两个属性影响背景图像:

  • background-position属性会设置图像的位置,可以按像素指定,也可以指定一个百分数,或者还可以使用关键字,top/left/right/bottom/center。
  • background-postion: top left;
  • background-repeat属相可以控制平铺行为,默认的图像会平铺(repeat)。no-repeat图像只显示一次,repeat-x只在水平方向上重复,repeat-y只在垂直方向上重复,inherit按父元素的设置来处理。

 

使用padding-left属性在左边增加内边距,设置边距的顺序很重要,后出现的会覆盖先出现的设置。

 

border-style属性可以控制边框的视觉样式。共有八种样式:

  1. solid    实线;
  2. double    双线;
  3. groove    槽线;
  4. outest    外凸;
  5. dotted    点线;
  6. dashed    虚线;
  7. inset    内凹;
  8. ridge    脊线;

 

border-width属性控制边框的宽度,可以使用像素或关键字(thin/medium/thick)。

border-color属性设置边框的颜色与设置字体颜色类似,可使用颜色名、rgb值或十六进制码。

像外边距和内边距一样,可以指定任意一边的边框的样式、颜色和宽度:

border-top-colorborder-bottom-styleborder-right-width

border-radius属性给边框创建圆角,可以使用像素和em。如果使用em,边框半径的度量相对元素字体大小。

也可以只指定一个角创建圆角。

 

将边框设置为锯齿效果的技巧:

  1. 元素本身的背景色与页面的背景色不同(假设页面的背景色为白色);
  2. 将边框类型设置为虚线(dashed);
  3. 将边框的颜色设置为白色(与页面的背景色相同)。

 

按id选择一个元素,需要在id 前面使用#字符,id可以以一个数字或字母开头,包括字母、数字以及下划线,但不能包括空格。

 

在HTML中可以使用多个样式表。如果几个样式表包含冲突的属性定义,HTML文件中最后链接的样式表最优先。

有时会有一个样式表作为页面的基础样式,要修改样式,并不是修改这个基础样式表,而是链接这个样式表,然后在下面提供自己的样式表,指定向修改的样式。

 

<link>元素中的media属性指定应用这个样式表的设备类型:

media="screen and (max-device-width:480px)"screen指定有屏幕的设备,max-device-width指定屏幕宽度小于等于480pxmedia="screen and (orientation:landscape)"orientation指定屏幕方向,landscape横向,portrait纵向media="print"通过打印机查看页面

也可以在CSS中使用@media规则把所有适用的规则放到大括号里:

@media screen and (min-device-width:480px) {    #id{       ......    }}

min-device-width/max-device-width关注设备的实际屏幕,也可以使用min-width/max-width值得是浏览器的大小。

 

一些属性:

  • border-color    边框颜色;
  • border-width    边框宽度;
  • border-style    边框样式;
  • padding    对内边距设置大小,可以是px或百分数;
  • margin    对外边距设置大小,用法与padding相似。

广告 广告

评论区