web前端学习（三）css学习笔记部分（7）-- 文字和字体相关样式、盒子相关样式、背景与边框相关样式

时间：2023-11-23 13:44:38

12.  文字和字体相关样式

12.1  CSS3 给文字添加阴影

　　使用 text-shadow 属性给页面上的文字添加阴影效果，text-shadow 属性是在CSS2中定义的，在 CSS2.1 中删除了，在 CSS3 的 text 模块中又恢复了。

　　

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        div{

            /*text-shadow可以写多个阴影*/

            text-shadow: -5px -5px 10px #ff00ff,

                          5px  5px  5px #ff00ff,

                         20px 20px  2px #ff00ff;

            color:black;

            font-size:40px;

            font-weight:bold;

            /*font-family:宋体，老师没有带引号，我觉得还是带引号的好一些*/

            font-family:"宋体";

            /*background-image: url("");*/

            height:200px;

            width:100px;

            padding:30px 0;

            text-align:center;

        }

    </style>

</head>

<body>

    <div>你好</div>

</body>

</html>

12.2  CSS3 使用服务器端字体

　　在 CSS3 之前，页面文字所使用的字体必须已经在客户端中被安装才能正常显示，在样式表中允许指定当前字体不能正常显示时使用的替代字体，但是如果这个代替字体在客户端中也没有安装时，使用这个字体的文字就不能正常显示了。

直接加载服务器端的字体

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        /*需要服务器端加载的字体样式*/

        /*字体有两种：

            ttf :o      otf:t

            truetype    opentype

        */

        @font-face {

            font-family:"myFont";

            src: url("xindexingcao57.ttf")format("truetype");

            font-weight:normal;

        }

        div{

            font-family: "myFont";

        }

    </style>

</head>

<body>

    <div>

        This is my div!

    </div>

</body>

</html>

先加载客户端的字体，加载失败之后执行加载服务器端的字体

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        /*先加载客户端已有的字体，如果客户端没有则在服务器端加载

       */

        /*将Arial修改一下之后就会加载服务器端的字体了。*/

        @font-face {

            font-family: myFont;

            src: local("Arial"),

                 url("xindexingcao57.ttf")format("truetype");

        }

        div{

            font-family: myFont;

        }

    </style>

</head>

<body>

    <div>

        这是我的字体测试

       This is my font test.

    </div>

</body>

</html>

12.3  CSS3 修改字体种类而保持字体尺寸不变

　　在 CSS3 中，增加了 font-size-adjust 属性，使用这个属性，可以在保持文字大小不变的情况下改变字体种类。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <!--font-size-adjust-->

    <!--x-height:58   font-size:100px   aspect:0.58-->

    <!--c = (a/b)*s

    a实际使用的aspect值

    b修改前的aspect值

    s当前字体的尺寸

    c浏览器实际显示的尺寸

    -->

    <style>

        /*目前只有firefox支持font-family-adjust属性*/

        #div1{

            font-family: Menlo;

            font-size:30px;

            font-size-adjust: 0.40;

        }

        #div2{

            font-family: cursive;

            font-size:30px;

            font-size-adjust: 0.57;

        }

        #div3{

            font-family: "Tahoma";

            font-size:30px;

            font-size-adjust: 0.57;

        }

    </style>

</head>

<body>

<div id="div1">Wo shi div1</div>

<div id="div2">Wo shi div2</div>

<div id="div3">Wo shi div3</div>

</body>

</html>

13.  盒子相关样式

13.1  盒子的类型

　　使用display属性来定义盒的类型，总体来说，CSS中的盒子分为block类型与inline类型。

inline、block、inline-block

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        /*display:inline以行内元素显示

        display:block以块级元素

        inline-block属性允许将行内元素当成块级元素调整

        仅仅是inline属性显示的话不能够设置宽度。

        */

        div{

            background-color: aqua;

            display:inline;

            width:200px;

        }

        span{

            background-color: brown;

            display:block;

            width:200px;

            height:50px;

        }

    </style>

</head>

<body>

<div>div1</div>

<div>div2</div>

<span>span1</span>

<span>span2</span>

</body>

</html>

让table标签可以和其他元素同行

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>inline-table</title>

    <style>

        table{

            /*本来table标签是块级元素，独占一行，

            但是使用了这个属性之后可以和其他元素同行*/

            display:inline-table;

            border: solid 3px #00aaff;

        }

        td{

            border:solid 1px #ff00ff;

        }

    </style>

</head>

<body>

我在上面

    <table>

        <tr>

            <td>A</td>

            <td>B</td>

            <td>C</td>

        </tr>

        <tr>

            <td>D</td>

            <td>E</td>

            <td>F</td>

        </tr>

        <tr>

            <td>G</td>

            <td>H</td>

            <td>I</td>

        </tr>

    </table>

我在下面

</body>

</html>

div以列表li形式展现：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        div{

            display:list-item;

            list-style-type: circle;

            /*边距还是要带着的，不然点就看不见了。*/

            margin-left:30px;

        }

    </style>

</head>

<body>

    <div>div实例1</div>

    <div>div实例2</div>

    <div>div实例3</div>

    <div>div实例4</div>

</body>

</html>

13.2  对盒子中容纳不下的内容的显示

　　对盒子中容纳不下的内容的显示，可以使用overflow属性来指定对盒子中容纳不下的内容的显示方法。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        div{

            /*overflow: hidden;*/

            /*auto自动

            scroll滚动

            hidden隐藏

            visible看得见，相当于不写

            inherit继承父元素属性设置

            */

            overflow-x:scroll;

            overflow-y:scroll;

            /*white-space属性设置文档空白的处理，使用nowrap值可以控制文档不换行*/

            white-space: nowrap;

            width:300px;

            height:150px;

            border:solid 1px orange;

        }

    </style>

</head>

<body>

    <h1>标题</h1>

    <div>

    <p>文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例字实例文字实例文字实例文字实例文字实例文字实例</p>

    <p>文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例</p>

    <p>文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例</p>

    <p>文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例</p>

    <p>文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例</p>

    <p>文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例</p>

    <p>文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例</p>

    <p>文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例</p>

    <p>文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例</p>

    <p>文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例</p>

    <p>文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例</p>

    <p>文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例</p>

    <p>文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例</p>

    <p>文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例</p>

    <p>文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例</p>

    </div>

</body>

</html>

13.3  盒子的阴影和大小计算方式

　　盒子的阴影和大小计算方式，在CSS3中，使用box-sizing属性来指定针对元素的宽度与高度的计算方法。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        div{

            margin-left: 100px;

            margin-top:100px;

            background-color: #ffaa00;

            box-shadow: -10px -10px 10px gray;

            /*box-shadow: -10px -10px 1px gray;*/

            /*阴影：左边长度   上边长度  阴影程度大小（数越小阴影越明显）   颜色*/

            width: 200px ;

            height: 100px;

        }

    </style>

</head>

<body>

    <div></div>

</body>

</html>

盒子的大小的计算方式

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        #div1{

            box-sizing: border-box;

            /*提供的宽度和高度是包括了padding的*/

            width:100px;

            height:100px;

            padding:10px;

            background-color: #00aaff;

        }

        #div2{

            box-sizing: content-box;

            /*提供的宽度和高度是不包括padding的*/

            width:100px;

            height:100px;

            padding:10px;

            background-color: #ffaa00;

        }

    </style>

</head>

<body>

<div id="div1"></div>

<div id="div2"></div>

</body>

</html>

14.  背景与边框设计

14.1  与背景相关的新增属性

　　background-clip.background-origin.background-size

　　

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        div{

            background-color: black;

            border: dashed 15px aqua;

            padding:30px;

            color:white;

            font-size: 30px;

            font-weight:bold;

            background-image:url("img/1.jpg");

            background-repeat: no-repeat;

        }

        .div1{

            /*background-origin用来设置图片的起始位置

            图片起始位置也有三种*/

            background-origin: border-box;

            /*背景的颜色填充计算位置*/

            background-clip: border-box;

        }

        .div2{

            background-origin: padding-box;

            background-clip: padding-box;

        }

        .div3{

            background-origin: content-box;

            background-clip: content-box;

        }

    </style>

</head>

<body>

    <div class="div1">示例1</div><br/>

    <div class="div2">示例2</div><br/>

    <div class="div3">示例3</div><br/>

</body>

</html>

14.2  圆角边框

　　圆角边框的绘制也是Web网站或Web应用程序中经常用来美化页面效果的手法之一。

多个背景图片的设置：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        div{

            background-image: url("img/2.jpg"),url("img/1.jpg");

            background-repeat: no-repeat,no-repeat;

            background-position:100% 10%, center center;/*老师这里写的是都有逗号，我认为老师写的有错误，我在其他网站查到的资料也是每两个一组的。正确的在下面写了*/

            /*上面这条语句是第一张图从左往右的位置，从上往下的位置

                           第二张图从左往右的位置，从上往下的位置*/

            /*background-position调整的是背景图片的位置*/

            /*background-size: 200px 600px;*/

            /*图片源大小不能保证的话在这里最好是

            添加能够调整背景图片大小的语句，如下*/

            background-size: 50% 50%;

            background-color: #00aaff;

            width:1000px;

            height:800px;

           /*   也可以这么写：

            background:url("haoroomsCSS1_s.jpg") 0 0 no-repeat,

            url("haoroomsCSS2_s.jpg") 200px 0 no-repeat,

            url("haorooms.jpg") 400px 201px no-repeat;*/

        }

    </style>

</head>

<body>

    <div></div>

</body>

</html>

圆角边框

四个值是顺时针转一圈的。

　

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        div{

            background-color: gray;

            border: 3px solid #000;

            width:300px;

            height:200px;

            padding:20px;

            /*border-radius:100px;*//*只写一个值是四个半径都是这个值*/

            /*boeder-radius:20px 40px;*//*只写两个值浏览器不识别*/

            border-radius:100px 15px 50px 10px;/*顺时针方向从第一个开始算的*/

        }

    </style>

</head>

<body>

    <div>

        文字文字文字文字文字文字文字文字文字文字文字

        文字文字文字文字文字文字文字文字文字文字文字

        文字文字文字文字文字文字文字文字文字文字文字

        文字文字文字文字文字文字文字文字文字文字文字

        文字文字文字文字文字文字文字文字文字文字文字

        文字文字文字文字文字文字文字文字文字文字文字

        文字文字文字文字文字文字文字文字文字文字文字

        文字文字文字文字文字文字文字文字文字文字文字

        文字文字文字文字文字文字文字文字文字文字文字

        文字文字文字文字文字

    </div>

</body>

</html>

14.3  使用图像边框

　　在CSS3中，增加了border-image属性，可以让元素的长度或宽度处于随时变化状态的边框统一使用一个图像文件来进行绘制。

图像边框自己代码测试

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        div{

            width:200px;

            padding: 5px 10px;

            border-width: 10px;

            border-style: solid;

            border-color: transparent;

            /*-webkit-border-image: url(img/png.png) 20 20 20 20 stretch;!*保持图片四角部分不变，只拉伸其余5个区域*!*/

            border-image: url(img/png.png) 15 15 15 15 stretch;/*保持图片四角部分不变，只拉伸其余5个区域*/

            -webkit-border-image: url(img/png.png) 20 20 20 20 stretch;/*保持图片四角部分不变，只拉伸其余5个区域*/

            /*border-image: url(img/png.png) 15 15 15 15 stretch;!*保持图片四角部分不变，只拉伸其余5个区域*!*/

            /*卧槽，我终于明白了，想要在google浏览器中实现选定边角在border中拉伸，中间也拉伸的效果，必须至少有

             -webkit-border-image: url(img/png.png) 10 10 10 10 stretch;这一句语句，但是只有border-image: url(img/png.png) 10 10 10 10 stretch;

             这一句的话或者border-image: url(img/png.png) 10 10 10 10 stretch;这一句在-webkit-border-image: url(img/png.png) 10 10 10 10 stretch;

             这一语句之后的话，效果还是只有border上有图片，如果border-image: url(img/png.png) 10 10 10 10 stretch;在-webkit-border-image: url(img/png.png) 10 10 10 10 stretch;

             之后的话也是只有border有效果，这是很奇怪的一件事，具体原因不详（我猜测是由于谷歌浏览器在解释这一语句的时候发现自己是谷歌浏览器，就用了带上自己标识的

             样式之后，另外的这一句css语句是通用的，然后又按照普通的方法又更改了一次样式，所以会导致样式的更改，

             所以这要求我们在写不同浏览器语句的时候最好是先写不带浏览器标识的方法。）。

             怎么说呢，我在网上查资料又查到了，我在上面写的理解有问题，网上解释说是这两句都有作用，但是谁在后面就会

             覆盖前面那一句的效果。

             具体可以查看我上面留下的参考链接。

             备注：三个属性

                图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。

                写代码的时候已经和w3school不一样了，都不带ed了。

            */

            /*那想要实现正常的只有border里有图像夹怎么做呢？

　　　　　　　　那就老老实实不写浏览器标识就可以了。

　　　　　　　　*/

            /*background-image: url("img/png.png") 20 20 20 20;!*保持图片四角部分不变，只拉伸其余5个区域*!*/

            /*background-image: url("img/png.png");*//*默认是全部拉伸*/

            /* height:40px;*/

        }

        #round2 {

            -webkit-border-image:url(https://sfault-image.b0.upaiyun.com/333/390/3333902996-5a02cf581ceb1_articlex) 40 40;

            border-image:url(https://sfault-image.b0.upaiyun.com/333/390/3333902996-5a02cf581ceb1_articlex) 40 40 repeat;

        }

    </style>

</head>

<body>

<div>border</div>

</body>

</html>

这段代码搞了好长时间，参考了一些资料，基本已经搞懂，就不单独开篇记录了，转载信息如下 ：

参考资料链接：

最让我恍然大悟的链接：

CSS3 border-image 不同浏览器的表现记录：　　

https://blog.csdn.net/jjbob77/article/details/8263073?utm_source=blogxgwz4

最详细的链接：　　

CSS3 border-image详解、应用及jQuery插件

https://blog.csdn.net/jjbob77/article/details/8262812

启蒙链接：

css引用图片，有图片属性是两端不拉伸中间拉伸的css属性吗

https://segmentfault.com/q/1010000011915723/a-1020000011915914

http://jsbin.com/sutohaxahe/1/edit?html,css,output

其他相关链接：

2017-09-01 发布

CSS3 border-image 彻底明白

https://segmentfault.com/a/1190000010969367

关于-webkit-border-image的理解

http://www.bubuko.com/infodetail-1997447.html

最重要的启蒙代码（这特么居然是有一句是过时导致错误的代码（这里我已经改正了，通过这个还有我查阅的资料我理解了很多。），repeated已经变成了repeat了）：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .title {

            display:block;

        }

        div

        {

            border:15px solid transparent;

            width:300px;

            padding:10px 20px;

        }

        #round

        {

            -moz-border-image:url(http://www.w3school.com.cn/i/border.png) 30 30 round;    /* Old Firefox */

            -webkit-border-image:url(http://www.w3school.com.cn/i/border.png) 30 30 round;    /* Safari and Chrome */

            -o-border-image:url(http://www.w3school.com.cn/i/border.png) 30 30 round;        /* Opera */

            border-image:url(http://www.w3school.com.cn/i/border.png) 30 30 round;

        }

        #round2 {

            -webkit-border-image:url(https://sfault-image.b0.upaiyun.com/333/390/3333902996-5a02cf581ceb1_articlex) 40 40 ;

            /*border-image:url(https://sfault-image.b0.upaiyun.com/333/390/3333902996-5a02cf581ceb1_articlex) 40 40 repeated;*/

            /*上面这句语句因为写错了，reported应该改成report，所以和注释掉一样。只剩上面一个默认为stretch属性的谷歌浏览器的样式有效*/

        }

    </style>

</head>

<body>

<span class="title">这是我使用的图片</span>

<img src="http://www.w3school.com.cn/i/border.png">

<div id="round">看我被图片包围了</div>

<div class="title">楼主的图片</div>

<img src="https://sfault-image.b0.upaiyun.com/333/390/3333902996-5a02cf581ceb1_articlex">

<div id="round2">楼主要的效果</div>

</body>

</html>

border-style测试

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        div{

            border:10px;

            padding:10px;

            border-width: 10px;

            /*border-style:solid;*/

            /*border不设置style样式他妈的不显示（直接不存在）

            ，所有的浏览器都是这样，我真是醉了*/

        }

    </style>

</head>

<body>

<div>test</div>

</body>

</html>

相关文章