HTML-CSS（四）-CSDN博客

本文链接：https://blog.csdn.net/weixin_53854631/article/details/115404177

本文介绍了构建响应式网站的关键技术，包括使用CSS3的max-width属性实现图像可伸缩，利用媒体查询适应不同设备尺寸，以及运用内联样式、背景图像缩放、流式布局和内边距外边距。此外，文章还探讨了媒体查询的语法和特性，以及如何使用Web字体、CSS3阴影、渐变和透明度。最后，提到了伪元素、列表和标记的自定义，以及精灵图的使用。

摘要由CSDN通过智能技术生成

构建响应式网站

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

.post-photo{
     max-width:100%;
}

让图像变成可伸缩图像的一小段魔法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、媒体查询语法
指向外部样式表的链接：

<link rel="stylesheet" media="logic type and (feature: value)" href="your-stylesheet.css" />

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

@media logic type and (feature: value){
     /* 目标CSS样式规则写在这里 */
}

示例：

@media only screen and (min-width : 480px){
     p{
          color:red;
          font-weight:bold;
     }
}

ogic部分是可选的，其值可以是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）。

<!-- 条件注释 -->
    <!--[if lt IE 9]>
    <link rel="stylesheet" href="css/old-ie.css" />
    <![endif]-->

使用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属性名前面

div{
     -webkit-border-radius:10px;
     border-radius:10px;
}

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

为元素创建圆角

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        div{
            background: #999;
            float: left;
            height: 150px;
            margin: 10px;
            width: 150px;
        }

        .all-corners{
            -webkit-border-radius:20px;
            border-radius: 20px;
        }

        .one-corners{
            -webkit-border-top-left-radius:75px;
            border-top-left-radius: 75px;
        }

        .elliptical-corners{
            -webkit-border-radius:50px / 20px;
            border-radius: 50px / 20px;
        }

        .circle{
            -webkit-border-radius:50%;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div class="all-corners"></div>
    <div class="one-corners"></div>
    <div class="elliptical-corners"></div>
    <div class="circle"></div>
</body>
</html>

效果：
在这里插入图片描述
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值

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        div{
            background: #fff;
        }

        .shadow{
            -webkit-box-shadow:4px 4px 5px #999;
            box-shadow: 4px 4px 5px #999;
        }

        .shadow-negative{
            -webkit-box-shadow:-4px -4px 5px #999;
            box-shadow: -4px -4px 5px #999;
        }

        .shadow-spread{
            -webkit-box-shadow:4px 4px 5px 3px #999;
            box-shadow: 4px 4px 5px 3px #999;
        }

        .shadow-offsets-0{
            -webkit-box-shadow:0px 0px 9px 3px #999;
            box-shadow: 0px 0px 9px 3px #999;
        }

        .inset-shadow{
            -webkit-box-shadow:2px 2px 10px #666 inset;
            box-shadow: 2px 2px 10px #666 inset;
        }

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

效果：
在这里插入图片描述
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，取消常规标记