属性padding,使标题的上下内边距像素为 20 。
属性color,控制了标题的颜色。颜色采用十六进制颜色代码#00539f表示。
属性text-shadow,它为文本提供阴影。其4个值的含义分别是:
第一个3px:水平偏移值 ,它是阴影右移的像素数。
第二个3px:垂直偏移值 ,它是即阴影下移的像素数。
1px: 阴影的模糊半径 , 它的值越大产生的阴影就越模糊。
black: 阴影的颜色。
使用以下代码能使图片居中,使网页变得更加美观:
注意: <body>是块级元素,意味着它能占据页面空间并能采用外边距和其他改变间距的值。而<img>是内联元素,不具备块级元素的功能。为了使图像也能拥有外边距,我们必须使用display:block赋予其块级元素的行为。
网页精致化:
- 注意: <body>是块级元素,意味着它能占据页面空间并能采用外边距和其他改变间距的值。而<img>是内联元素,不具备块级元素的功能。为了使图像也能拥有外边距,我们必须使用display:block赋予其块级元素的行为。margin:0; 它可覆盖浏览器为<h1>设置的默认样式。
- text-shadow: 3px 3px 1px grey; 它能为<h1>字体添加阴影效果。
- 如果html引用了css文件后,网页仍没有发现变化,请注意检查<link>元素属性href内的地址。比如:我们将更改文档体格式设置的文件命名为css3,请确定其在href中被指向正确。
以上每个属性的含义是:
- width: 600px; —— body元素的宽度保持 600 像素。
- margin: 0 auto; —— 为 margin 或 padding 等属性设置两个值,第一个值代表元素的上、下方向(本例设置为 0);第二个值代表左、右两边(本例中的auto是特殊值,含义是水平方向左右对称)。
- background-color: #FF9500; —— 它指定元素的背景颜色。
- padding: 0 20px 20px 20px; —— 内边距设置的四个值。用于给网页内容的四周制造一些空白空间。这些空间为右边、下方,左边的内边距,像素为20。它们的值按照上、右、下、左的顺序排列。
- border: 5px solid black; —— 直接为 body 设置 5 像素的黑色实线边框。
- body:选择器。
- width: 600px; 说明body元素的宽度保持在600 像素。
- margin: 0 auto; 为 margin 或 padding 等属性设置两个值,第一个值代表元素的上、下方向(本例设置为 0);第二个值代表左、右两边(本例中的auto是特殊值,含义是水平方向左右对称)。
- background-color: #FFCCEB; 它指定了body元素的背景颜色。#FFCCEB是颜色的十六进制编码。你不需要记忆这些编码。需要时,请前往the color picker或使用在线取色器,即可获得你想要的颜色的十六进制编码。
- padding: 0 20px 20px 20px; 内边距设置的四个值。用于给网页内容的四周制造一些空白空间。这些空间为右边、下方,左边的内边距,像素为20。它们的值按照上、右、下、左的顺序排列。
- border: 3px solid grey; 为 body设置3像素的灰色实线边框。