HTML:Getting Intimate with Elements

来源：互联网发布：微信广告软件编辑：程序博客网时间：2024/05/22 17:01

本章使用CSS对网页作出更多的修饰

CSS视角的element

在CSS看来，所有的element都是由四部分组成：

content+padding+border+margin

我们可以通过对element这些部分进行装饰来达到装饰网页的目的，因为整个网页不就是一个个element组成的。
有了这些部件，我们就可以对元素进行相当多的操作，可以改变padding和margin的宽窄、背景颜色，可以改变border的样式、粗细、颜色等。。。。。
本章的知识点很繁多，主要是具体的操作。

border

border-style

solid
dotted
double
dashed
groove
inset
outset
ridge

border-width

可以用关键词（thin,medium,thick）和像素数值（1px,2px,…）两种方法来定义

border-color

关键词：red,black,grey…；
颜色配比：rgb(20%,70%10%)；
hexcode：#28ce43

border-radius

可以改变border的拐角样式，改为有一定弧度的看起来更舒服。

我们还可以单独给元素的border的不同边定义样式。

border-top-color: black;指定上边界颜色为黑色；
border-top-style: dashed;指定上边界为虚线；
border-top-width: thick;指定上边界大小为粗；

padding,margin,content

.guarantee {    border-color: black;    border-width: 1px;    border-style: solid;    background-color: #a7cece;    padding: 25px;    padding-left: 80px;    margin: 30px;    margin-right: 250px;}

注意上面padding和margin的语句，使用格式就是这样；
我们也可以定义content区域的长和宽，使用参数width和height

id

一个id只能属于一个元素，我们可以通过此元素的id来定义独一无二的样式

id和class的用法对比

p.specials { color: red; }class为“specials”的p元素的字体都为红色；.specials { color: red; }class为“specials”的所有元素的字体都为红色；#footer { color: red; }id为“footer”的某个元素的字体都为红色；p#footer { color: red; }id为“footer”的p元素的字体都为红色；

id和class的命名都可以用字母、数字和下划线；但id能用数字和字母开头，而class只能用字母开头。

remixing stylesheet

我们可以选择使用同一个CSS文件，将所有的语句放在里面，同时达到继承和覆盖的作用；也可以选择创建多个CSS文件，将不同层次的语法放入不同的CSS文件里，根据语句顺序实现继承和覆盖。

<head><meta charset="utf-8"><title>Head First Lounge</title><link type="text/css" href="corporate.css" rel="stylesheet"><link type="text/css" href="beverage-division.css" rel="stylesheet"><link type="text/css" href="lounge-seattle.css" rel="stylesheet"></head>

三个CSS文件依次编译，达到一个文件的效果，但是便于管理。

建立不同的CSS文件的好处还有很多，我们的网页通常需要在不同的设备上显示，不同的设备就应该使用不同的CSS样式已达到最好的视觉体验。所以我们通常会建立不同的CSS文件，根据不同的显示设备使用不同的样式，这时我们就需要通过语句来判断何时要使用哪种CSS文件

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

当屏幕尺寸小于480px时，我们就是用lounge-mobile.css

<link href="lounge-print.css" rel="stylesheet" media="print">

当我们需要打印出来时，我们就使用lounge-print.css

当然我们可以直接在同一个CSS文件里指定这些规则

@media screen and (min-device-width: 481px) {    #guarantee {        margin-right: 250px;    }}@media screen and (max-device-width: 480px) {    #guarantee {        margin-right: 30px;    }}@media print {    body {        font-family: Times, "Times New Roman", serif;    }}p.specials {    color: red;}

可以看出此时我们需要同时将所有语句一起同@media放入CSS文件里，可想而知，当不同设备的差异较大时，我们的语句就会增加不少，此时必定会造成CSS文件过于臃肿。

阅读全文

0 0