html教程

HTML5与CSS3基础教程第八版学习笔记11~15章 - 平凡世界平凡人

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 21, 2016 am 08:42 AM

第十一章，用CSS进行布局

开始布局注意事项

1、内容与显示分离

2、布局方法：固定宽度和响应式布局

固定宽度，整个页面和每一栏都有基于像素的宽度

响应式布局也称为流式页面，使用百分数定义宽度

3、浏览器问题

注：HTML5 shiv 是少有的必须在head中加载JavaScript的情况之一，否则就不起作用。

关于HTML5 shiv：

与其他主流浏览器不同，IE8及之前版本会忽略它们不原生支持的元素的CSS。HTML5 shiv是专门用于解决这一问题的一段JavaScript。

对默认样式进行重置或标准化

抹平各个浏览器的默认样式差异方法：

1、使用CSS重置（reset）开始主样式表，如Eric Meyer创建的Meyer重置（http://meyerweb.com/eric/tools/css/reset/）。以及其他的重置样式表

2、使用Nicolas Gallagher和Jonathan Neal创建的normalize.css开始主样式表，位于http://necolas.github.com/normalize.css/

CSS重置可以有效地将所有默认样式都设为“零”。

盒模型

CSS处理网页时，它认为每个元素都包含在一个不可见的盒子里。这就是众所周知的盒模型。

由内容区域、内容区域周围的空间（内边距，padding）、内边距的外边缘（边框，border）和边框外面将元素与相邻元素隔开的不可见区域（外边距，margin）构成。

浏览器中元素的宽度与其width属性值并不一致（除非没有内边距和边框）。CSS中的宽度指示的是内边距里内容区域的宽度，而在浏览器中显示宽度则是内容宽度、左右内边距和左右边框的总和，显示高度与之类似。

当使用了box-sizing:border-box;则元素的显示宽度就等于width属性的值。内容宽度、内边距和边框都包含在里面。

控制元素的显示类型和可见性

块级元素，行内元素。

本质是display属性的值不同。

块级元素：display:block（li元素为display:list-item），行内元素：display:inline;，混合显示方式：inline-block，让元素与其他内容出现在同一行，同时具有块级元素属性。

注：设置为inline的元素会忽略任何width、height、margin-top、margin-bottom设置，不过，设置为inline-block元素可以使用这些属性

display:none，隐藏元素，并将其从文档流中完全移除，不占用任何视觉空间。

visibility：主要控制元素是否可见，与display不同，使用visibility隐藏元素时，会在视觉上留下一个空白空间。

visibility:hidden，让元素不可见，visibility:visible，让元素显示

提示：设置为display:inline;的元素接受padding的设置，但padding-top和padding-bottom会越界进入相邻元素的区域，而不是局限于该元素空间。可以设置背景色进行测试。

注：设置为display:none;或visibility:hidden;的元素里的所有内容（包括所有后代）都会受到影响，消失或隐藏。

设置元素的高度和宽度

对定宽页面使用像素，对响应式Web设计使用百分数。

设置min-height可以使元素至少具有某一特定高度，内容变多的话，元素高度会自动按需增长，这是height与min-height的区别

border-box规则：

<span style="color: #008000;">/*</span><span style="color: #008000;">
*   border-box规则
</span><span style="color: #008000;">*/</span><span style="color: #800000;">
* </span>{<span style="color: #ff0000;">
    -webkit-box-sizing</span>:<span style="color: #0000ff;">border-box</span>;<span style="color: #ff0000;">
    -moz-box-sizing</span>:<span style="color: #0000ff;">border-box</span>;<span style="color: #ff0000;">
    box-sizing</span>:<span style="color: #0000ff;">border-box</span>;
}

在元素周围添加内边距

padding属性，padding简记法：padding:5px，应用于全部四个边，padding:5px 9px，第一个值应用于上下，第二个值应用于左右，padding:5px 9px 11px，第一个值用于上边，第二个值用于左右，第三个值用于下边，padding:5px 8px 9px 11px，分别用于上、右、下、左

内边距值可以使用像素、百分数、em或rem组合

设置边框

1、定义边框风格：border-style:type，type可以是none、dotted（点线）、dashed（虚线）、solid（实线）、double（双线）、groove（槽线）、ridge（脊线）、inset（凹边）、outset（凸边）

2、设置边框宽度：border-width:n

3、设置边框用颜色：border-color:color

简记法：border，可选：-top，-right，-bottom，-left，限制效果为某一边；可选：-property，property可以是style，width，color

border简写属性及各个边框属性（border-width，border-style，border-color）均可接受1~4个值，用法与padding类似

设置元素周围外边距

margin属性的auto值依赖于width属性值

margin属性值也可以接受1~4个值，与padding用法类似

注：当em用于内边距和外边距时，它的值是相对于元素的字体大小的，而不是相对于父元素的字体大小。

使元素浮动

float属性使元素浮动在文本或其他元素之上，可以使用这种技术让文本环绕在图像或其他元素周围，也可以使用这种技术创建多栏布局。

float:left -- 让元素浮动到左边，其他内容围绕在它右边，float:right -- 浮动到右边，float:none -- 完全不浮动

注：选择的方向是应用于需要浮动的元素，而不是应用于环绕的元素

浮动元素并不会影响父元素或其他祖先元素的高度。

当一个父元素的所有子元素都是浮动元素时，它本身将不具有任何高度，即高度为0

使用clear属性清除浮动效果，对某个元素使用该属性，该元素和它后面的元素会显示在浮动元素下方。

clear:left -- 阻止元素浮动在该元素左边，clear:right -- 阻止元素浮动在该元素右边，clear:none -- 阻止元素浮动在该元素两边

如果要让浮动元素的祖先元素在高度上包含浮动元素，并清除浮动，可以使用.clearfix或overflow方法。

<span style="color: #008000;">/*</span><span style="color: #008000;">
*  .clearfix    清楚浮动
</span><span style="color: #008000;">*/</span><span style="color: #800000;">
.clearfix:before,
.clearfix:after</span>{<span style="color: #ff0000;">
    content</span>:<span style="color: #0000ff;"> " "</span>;<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> table</span>;
}<span style="color: #800000;">

.clearfix:after</span>{<span style="color: #ff0000;">
    clear</span>:<span style="color: #0000ff;"> both</span>;
}<span style="color: #800000;">

.clearfix</span>{<span style="color: #ff0000;">
    *zoom</span>:<span style="color: #0000ff;">1</span>;
}

注：浮动元素的display属性会变成display:block;，无论是否设置了display属性。

对元素进行相对定位

每个元素在页面文档流中都有一个自然位置，相对这个原始位置进行移动就称为相对定位。周围元素不受此影响。

<span style="color: #008000;">/*</span><span style="color: #008000;">
*  相对定位
</span><span style="color: #008000;">*/</span><span style="color: #800000;">
.example</span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> relative</span>;<span style="color: #ff0000;">
    top</span>:<span style="color: #0000ff;"> 2px</span>;<span style="color: #ff0000;">
    right</span>:<span style="color: #0000ff;"> 3px</span>;<span style="color: #ff0000;">
....
</span>}

使用相对定位、绝对定位或固定定位时，对于相互重叠的元素，可以用z-index属性指定它们的叠放顺序。

对元素设置position:static，可以覆盖position: relative;，定位不继承

对元素进行绝对定位

通过对元素进行绝对定位，即指定它们相对于body或最近的已定位祖先元素的精确位置，可以让元素脱离正常的文档流

与相对定位不同，绝对定位的元素不会在原先位置留下空白，这与让元素浮动也不同。对于绝对定位的元素，其他元素不知道他的存在，他也不知道其他内容的存在。

position:absolute;

对希望成为绝对定位参照体的祖先元素添加position: relative;，如果跳过这一步，将对元素相对于body元素计算偏移量

固定定位

在访问者滚动浏览器窗口时，设置position:fixed;的元素会固定在浏览器窗口中，并不会随着访问者滚动窗口而滚动。

建议：固定定位在移动浏览器中效果不佳，若网页要适应移动设备，最好不要使用固定定位。

在栈中定位元素

对于定位的元素，z-index最高的显示在最上面，不管该元素在HTML中出现的顺序。

z-index属性仅对于定位过的（即设为绝对定位、相对定位、固定定位）元素有效。

<span style="color: #0000ff;"><span style="color: #ff00ff;">DOCTYPE html</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">style </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text/css"</span><span style="color: #0000ff;">></span><span style="background-color: #f5f5f5; color: #800000;">
        body</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
            background</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> #5af</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
        <span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">
        div</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
            border</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 1px solid #666</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
            height</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 125px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
            position</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> absolute</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
            width</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 200px</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
        <span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">

        .box1</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
            background</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> pink</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
            left</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 110px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
            top</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 50px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
            z-index</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 120</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
        <span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">

        .box2</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
            background</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> yellow</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
            left</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 0</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
            top</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 130px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
            z-index</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 530</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
        <span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">

        .box3</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
            background</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> #ccc</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
            position</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> static</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
            <span style="background-color: #f5f5f5; color: #008000;">/*</span><span style="background-color: #f5f5f5; color: #008000;"> 静态的，没有任何效果 </span><span style="background-color: #f5f5f5; color: #008000;">*/</span><span style="background-color: #f5f5f5; color: #ff0000;">
            z-index</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 1000</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
        <span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">

        .box4</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
            background</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> orange</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
            left</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 285px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
            top</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 65px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
            z-index</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 3</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
        <span style="background-color: #f5f5f5; color: #000000;">}</span>
    <span style="color: #0000ff;"></span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="box1"</span><span style="color: #0000ff;">><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>Box 1<span style="color: #0000ff;"></span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="box2"</span><span style="color: #0000ff;">><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>Box 2<span style="color: #0000ff;"></span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="box3"</span><span style="color: #0000ff;">><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>Box 3<span style="color: #0000ff;"></span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="box4"</span><span style="color: #0000ff;">><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>Box 4<span style="color: #0000ff;"></span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

效果：

处理溢出

overflow控制元素在盒子外面的部分

overflow:hidden -- 隐藏盒子容纳不了的内容，overflow:scroll -- 无论元素是否需要，都在元素上添加滚动条，overflow:auto -- 让滚动条仅在访问者访问溢出内容时出现。

overflow不是继承的

垂直对齐元素

vertical-align:baseline -- 使元素的基准线对齐父元素基准线

vertical-align:middle -- 使元素位于父元素中央

vertical-align:sub -- 成为父元素下标

vertical-align:super -- 成为父元素上标

vertical-align:text-top -- 使元素顶部对齐父元素顶部

vertical-align:text-bottom -- 使元素底部对齐父元素底部

vertical-align:top -- 使元素顶部对齐当前行里最高元素的顶部

vertical-align:bottom -- 使元素底部对齐当前行里最低元素的底部

或者可以输入行高百分比，可以是正数，也可以是负数

或者输入某个值正负均可，单位为px或em，分别按照特定的值向上或者向下移动元素。

可以使用vertical-align设置表格单元格对齐方式，除了表格外，vertical-align仅适用于行内元素

修改鼠标指针

cursor:pointer -- 表示停留在链接上时通常显示的指针形状（手指），default（箭头形状），crosshair（+），move（+加方向），wait（加载中的符号），help（帮助符号？或者指针带着问号），text（I），progress（箭头加加载中的符号）

cursor:auto -- 特定情形下通常使用的指针形状

cursor:x-resize -- 显示双向箭头，这里的x是其中一个箭头需要指向的方向，可以是n（北），nw（西北），e（东）等等

第十二章，构建响应式网站

只有HTML中不包含width和height属性，图像才有可能变成可伸缩的图像。

<span style="color: #800000;">.post-photo</span>{<span style="color: #ff0000;">
     max-width</span>:<span style="color: #0000ff;">100%</span>;
}

让图像变成可伸缩图像的一小段魔法CSS

图像缩放的可用空间是由其父元素建立的内容区域。

一定要使用max-width:100%，而不是width:100%。他们都能让图像在容器内缩放，但width:100%会在容器宽度比图像宽时放大图像，超过其本来大小，有可能会显得较为难看

图标字体和SVG可以创建无损缩放图形。

可以使用background-size属性对背景图像进行缩放。

流式布局又称弹性布局

内边距和外边距的em值是相对于元素的font-size，而基于百分数的值则是相对于包含元素的容器的。

对于设置了body{font-size:100%;}的页面，对font-size，margin，padding和max-width使用em值，还有一个好处，就是当用户改变了浏览器默认字体大小，页面也会跟着变大变小。

理解和实现媒体查询

可以包含在媒体查询里的媒体特性：

width：宽度

height：高度

device-width：设备宽度

device-height：设备高度

orientation：方向

aspect-ratio：高宽比

device-aspect-ratio：设备高宽比

color：颜色

color-index：颜色数

monochrome：单色

resolution：分辨率

scan：扫描

grid：栅格

非标准媒体特性：

-webkit-device-pixel-ratio：WebKit设备像素比

-moz-device-pixel-ratio：Mozilla设备像素比

除了orientation、scan、grid以外，以上属性均可添加min- 和max- 前缀

1、媒体查询语法

指向外部样式表的链接：

<span style="color: #0000ff;"><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="stylesheet"</span><span style="color: #ff0000;"> media</span><span style="color: #0000ff;">="logic type and (feature: value)"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="your-stylesheet.css"</span> <span style="color: #0000ff;">/></span></span>

位于样式表中的媒体查询：

<span style="color: #800000;">@media logic type and (feature: value)</span>{
     <span style="color: #008000;">/*</span><span style="color: #008000;"> 目标CSS样式规则写在这里 </span><span style="color: #008000;">*/</span>
}

示例：

<span style="color: #800000;">@media only screen and (min-width : 480px)</span>{<span style="color: #ff0000;">
     p{
          color</span>:<span style="color: #0000ff;">red</span>;<span style="color: #ff0000;">
          font-weight</span>:<span style="color: #0000ff;">bold</span>;
     }<span style="color: #800000;">
}</span>

logic部分是可选的，其值可以是only或not。

type部分是媒体类型，如screen，print

feature：value是可选的，但一旦包含，必须用括号包围且前面要有and这个字。feature是预定义的媒体特性，如min-width、max-width、resolution。对color、color-index、monochrome特性来说value是可选的

提示：Eivind Uggedal的http://mediaqueri.es网站汇集了大量现实的响应式网站，值得借鉴。Screen Sizes网站（http://screensiz.es）提供了流行设备和显示屏的分辨率和设备宽度信息。Maximiliano Firtman维护了一个现代移动设备对HTML5和CSS3支持情况的表格（http://mobilehtml5.org）。

    <span style="color: #008000;"><!--</span><span style="color: #008000;"> 条件注释 </span><span style="color: #008000;">--></span>
    <span style="color: #008000;"><!--</span><span style="color: #008000;">[if lt IE 9]>
    <link rel="stylesheet" href="css/old-ie.css" />
    <![endif]</span><span style="color: #008000;">--></span>

第十三章，使用Web字体

CSS规则@font-face为Web字体创造了可能。

以下前三种字体类型是如今经常用到的：

1、内嵌OpenType（Embedded OpenType，.eot）

2、TrueType（.ttf）和OpenType（.otf），台式机使用的标准字体文件类型

3、Web开放字体格式（Web Open Font Format，.woff）

4、可缩放矢量图形（Scalable Vector Graphics，.svg），避免使用。

Chris Coyier收集了大量获取图标字体的资源（http://css-tricks.com/flat-icons-icon-fonts/），还演示了如何使用IcoMoon（http://icomoon.io）创建开发人员自己的图标字体（http://css-tricks.com/video-screencasts/113-creating-and-using-a-custom-icon-font/）

第十四章，使用CSS3进行增强

为不支持某些属性的浏览器使用polyfill（通常又称垫片，shim），通常使用js实现，可以为较弱的浏览器提供一定程度的对HTML5和CSS3的API和属性的支持。

提示：HTML5 Please（http://html5please.com）可以找出哪些HTML5和CSS3可以放心使用，以及哪些好的填补差距的polyfill。

学习更多CSS3效果：www.htmlcssvqs.com/resources/

厂商前缀

-webkit-：WebKit/Safari/旧版本的Chrome

-moz-：Firefox

-ms-：Internet Explorer

-o-：Opera

应该将前缀放在CSS属性名前面

<span style="color: #800000;">div</span>{<span style="color: #ff0000;">
     -webkit-border-radius</span>:<span style="color: #0000ff;">10px</span>;<span style="color: #ff0000;">
     border-radius</span>:<span style="color: #0000ff;">10px</span>;
}

如今，多数情况下一般只需要-webkit-前缀。

为元素创建圆角

<span style="color: #0000ff;"><span style="color: #ff00ff;">DOCTYPE html</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">style </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text/css"</span><span style="color: #0000ff;">></span><span style="background-color: #f5f5f5; color: #800000;">
        div</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
            background</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> #999</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
            float</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> left</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
            height</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 150px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
            margin</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 10px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
            width</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 150px</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
        <span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">

        .all-corners</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
            -webkit-border-radius</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">20px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
            border-radius</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 20px</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
        <span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">

        .one-corners</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
            -webkit-border-top-left-radius</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">75px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
            border-top-left-radius</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 75px</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
        <span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">

        .elliptical-corners</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
            -webkit-border-radius</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">50px / 20px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
            border-radius</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 50px / 20px</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
        <span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">

        .circle</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
            -webkit-border-radius</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">50%</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
            border-radius</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 50%</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
        <span style="background-color: #f5f5f5; color: #000000;">}</span>
    <span style="color: #0000ff;"></span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="all-corners"</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="one-corners"</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="elliptical-corners"</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="circle"</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span></span></span></span></span></span></span></span></span></span>

效果：

border-radius仅影响施加该样式的元素的角，并不会影响其子元素的角。因此如果子元素有背景，将可能影响圆角样式

有时元素背景（不是子元素背景）会透过其圆角，避免：在border-radius后加一条样式规则 --> background-clip:padding-box;

为文本添加阴影

text-shadow：x-offset（水平偏移），y-offset（垂直偏移），blur-radius（模糊半径，可选），color值（前三个带长度代为，四个值用空格分开）

添加多重阴影，使用逗号分隔每组阴影。

text-shadow:2px 2px 2px #333,3px 3px 3px #666;

改回默认值：text-shadow:none

x-offset，y-offset可以为正负，blur-radius只能为正。三个均可为0

text-shadow属性是继承的，不需要厂商前缀

为其它元素添加阴影

使用text-shadow属性为元素文本添加阴影，box-shadow属性则为元素本身添加阴影。基础属性集相同，不过box-shadow还允许使用两个可选属性：inset关键字，spread属性，用于扩张或收缩阴影，box-shadow需要厂商前缀来兼容

box-shadow：带长度单位：x-offset、y-offset；可选带长度单位：blur-radius；可选inset关键字，可选带长度单位的spread值，color值

<span style="color: #0000ff;"><span style="color: #ff00ff;">DOCTYPE html</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">style </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text/css"</span><span style="color: #0000ff;">></span><span style="background-color: #f5f5f5; color: #800000;">
        div</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
            background</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> #fff</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
        <span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">

        .shadow</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
            -webkit-box-shadow</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">4px 4px 5px #999</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
            box-shadow</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 4px 4px 5px #999</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
        <span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">

        .shadow-negative</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
            -webkit-box-shadow</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">-4px -4px 5px #999</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
            box-shadow</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> -4px -4px 5px #999</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
        <span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">

        .shadow-spread</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
            -webkit-box-shadow</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">4px 4px 5px 3px #999</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
            box-shadow</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 4px 4px 5px 3px #999</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
        <span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">

        .shadow-offsets-0</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
            -webkit-box-shadow</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">0px 0px 9px 3px #999</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
            box-shadow</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 0px 0px 9px 3px #999</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
        <span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">

        .inset-shadow</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
            -webkit-box-shadow</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">2px 2px 10px #666 inset</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
            box-shadow</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 2px 2px 10px #666 inset</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
        <span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">

        .multiple</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
            -webkit-box-shadow</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">
                2px 2px 10px rgba(255,0,0,.75),
                5px 5px 20px blue</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
            box-shadow</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">
                2px 2px 10px rgba(255,0,0,.75),
                5px 5px 20px blue</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
        <span style="background-color: #f5f5f5; color: #000000;">}</span>
    <span style="color: #0000ff;"></span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="shadow"</span><span style="color: #0000ff;">><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>Shadow with Blur<span style="color: #0000ff;"></span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="shadow-negative"</span><span style="color: #0000ff;">><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>Shadow with Negative Offsets and Blur<span style="color: #0000ff;"></span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="shadow-spread"</span><span style="color: #0000ff;">><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>Shadow with Blur and Spread<span style="color: #0000ff;"></span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="shadow-offsets-0"</span><span style="color: #0000ff;">><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>Shadow with Offsets Zero,Blur,and Spread<span style="color: #0000ff;"></span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="inset-shadow"</span><span style="color: #0000ff;">><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>Inset Shadow<span style="color: #0000ff;"></span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="multiple"</span><span style="color: #0000ff;">><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>Multiple Shadows<span style="color: #0000ff;"></span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

效果：

x-offset，y-offset，spread正负均可，blur-radius必须为正，都可为0

inset关键字可以让阴影位于内部，box-shadow不继承

应用多重背景

1、为单个元素应用多重背景

（1）background-color：b，背景色

（2）background-image：u，引用的背景图

（3）background-position：p，p是成对的x-offset和y-offset的集合，用逗号分开。

（4）background-repeat：r，r是repeat-x，repeat-y或no-repeat

使用渐变背景

渐变背景是CSS3的新特性

1、创建备用背景颜色

background：color或者background-color：color

2、定义线性渐变

background：linear-gradient（方向,指定颜色）

方向属性：to top、to right、to left、to bottom right、to bottom left、to top right、to top left或者45deg、107deg（0代表最顶端的点，90代表最左边的点，180代表最底端的点，270代表最右边的点）

3、定义径向渐变

background：radial-gradient();参数有点多，以后再加

4、指定颜色

输入至少两种颜色，之间用逗号隔开

5、指定颜色和颜色的停止位置

手写渐变很坑爹，用CSS渐变背景生成器吧，百度，Google去。

为元素设置不透明度

使用opacity属性可以修改元素的透明度。

opacity:o，o表示元素的不透明程度（两位小数，不带单位），0完全透明，1完全不透明

opacity不继承，opacity值小于1的元素的子元素也会受影响

生成内容的效果

使用:before和:after伪元素可以很方便地为页面添加设计效果。

使用sprite拼合图像

将多个图像拼合成单个背景图像（sprite），再通过CSS控制具体显示图像哪一部分，关键在于background-position属性。

Project Fondue提供的CSS Sprite Generator（http://spritegen.website-performance.org）是一个帮助创建sprite和背景定位的工具。

第十五章，列表

有序列表：ol为父元素，li为列表项

无序列表：ul为父元素，li为列表项

描述列表：dl为父元素，dt和dd分别代表dl中的术语和描述。

大多数情况下均可以使用无序列表，如主导航链接、指向一组视频或相关报道的链接、页脚中的一组链接等。

选择标记

无论是有序列表还是无序列表，都可以选择出现在列表项目左侧的标记类型

1、选择标记

list-style-type:marker

marker是以下属性值中一种：

（1）disc（实心圆点）

（2）circle（空心圆圈）

（3）square（实心方块）

（4）decimal（数字1、2、。。。）

（5）upper-alhpa（大写字母A、B、。。。）

（6）lower-alpha（小写字母a、b、。。。）

（7）upper-roman（大写罗马数字I、II、III。。。）

（8）lower-roman（小写罗马数字i、ii、iii。。。）

2、显示无标记列表

list-style-type：none

使用定制标记

在目标列表或列表项的样式规则中，输入list-type：none，取消常规标记

选择列表的起始编号

1、设置整个列表编号方案的初始值

在ol开始标签中输入start="n"，n表示初始值

2、修改有序列表中某列表项目的编号

在目标li项目内输入value="n"，n表示列表值

控制标记的位置

list-style-position:inside -- 标记缩在文本块内，outside -- 标记显示在列表项目的左边

list-style-position可应用与ul，ol，li结果都一样。

同时设置所有列表样式属性

list-type简写。可以指定三个属性，也可以指定其中一个，多个属性顺序任意。

创建描述列表

HTML提供了专门用于描述成组出现的名称及其值之间关联的列表类型。在HTML5中称为描述列表。每个列表包含在dl中，每个名值对都有一个或多个dt元素（名称或术语）以及一个或多个dd元素（名称或术语的值）

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

为什么HTML属性对Web开发很重要？May 12, 2025 am 12:01 AM

htmlattributesarecrucialinwebdevelopment forcontrollingBehavior，外观和功能

Alt属性的目的是什么？为什么重要？May 11, 2025 am 12:01 AM

alt属性是HTML中标签的重要部分，用于提供图片的替代文本。1.当图片无法加载时，alt属性中的文本会显示，提升用户体验。2.屏幕阅读器使用alt属性帮助视障用户理解图片内容。3.搜索引擎索引alt属性中的文本，提高网页的SEO排名。

HTML，CSS和JavaScript：示例和实际应用May 09, 2025 am 12:01 AM

HTML、CSS和JavaScript在网页开发中的作用分别是：1.HTML用于构建网页结构；2.CSS用于美化网页外观；3.JavaScript用于实现动态交互。通过标签、样式和脚本，这三者共同构筑了现代网页的核心功能。

如何在标签上设置lang属性？为什么这很重要？May 08, 2025 am 12:03 AM

设置标签的lang属性是优化网页可访问性和SEO的关键步骤。1)在标签中设置lang属性，如。2)在多语言内容中，为不同语言部分设置lang属性，如。3)使用符合ISO639-1标准的语言代码，如"en"、"fr"、"zh"等。正确设置lang属性可以提高网页的可访问性和搜索引擎排名。

HTML属性的目的是什么？May 07, 2025 am 12:01 AM

htmlattributeseresene forenhancingwebelements'functionalityandAppearance.TheyAdDinformationTodeFineBehavior，外观和互动，使网站互动，响应式，visalalyAppealing.AttributesLikutesLikeSlikEslikesrc，href，href，href，类，类型，类型，和dissabledtransfransformformformformformformformformformformformformformformforment

您如何在HTML中创建列表？May 06, 2025 am 12:01 AM

toCreateAlistinHtml，useforforunordedlistsandfororderedlists：1）forunorderedlists，wrapitemsinanduseforeachItem，RenderingeringAsabulleTedList.2）fororderedlists，useandfornumberedlists，useandfornumberedlists，casundfornumberedlists，customeizableWithTheTtheTthetTheTeTeptTributeFordTributeForderForderForderFerentNumberingSnumberingStyls。

HTML行动：网站结构的示例May 05, 2025 am 12:03 AM

HTML用于构建结构清晰的网站。1)使用标签如、、定义网站结构。2)示例展示了博客和电商网站的结构。3)避免常见错误如标签嵌套不正确。4)优化性能通过减少HTTP请求和使用语义化标签。

您如何将图像插入HTML页面？May 04, 2025 am 12:02 AM

toinsertanimageIntoanhtmlpage，usethetagwithsrcandaltattributes.1）usealttextforAcccessibilityandseo.2）instementRcsetForresponSiveImages.3）applylazyloadingWithLoadingWithLoading =“ lazy” tooptimizeperformance.4）tooptimizeperformance.4）

See all articles