120 CSS样式

最新推荐文章于 2022-07-24 15:29:42 发布

Pinkman2k

最新推荐文章于 2022-07-24 15:29:42 发布

阅读量231

点赞数

本文链接：https://blog.csdn.net/qq_40808228/article/details/108647611

版权

一字体属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            /*字体粗细：normal,b*/
            font-weight: 900;
            /*font-style：文字风格*/
            font-style: italic;
            /*font-size：文字大小*/
            font-size: 12px;
            /*font-family：文字字体*/
            font-family: "Arial";
            
            color: rgb(255,0,0);
            /*简写为：*/
            /*font: bolder italic 50px 'serif','微软雅黑'; */

        }


    </style>



</head>
<body>
<p>Need you，I m fish🐟</p>
</body>
</html>

二文本属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        div{

            width: 200px;
            height: 200px;
            background-color: beige;

            /*文本水平对齐的方式*/
            text-align: center;
            /*行高line-height、中线middle-line*/
            line-height: 200px;
            /*文本装饰*/
            text-decoration: underline;
            /*首行缩进*/
            text-indent: 32px;
        }


    </style>

</head>
<body>
<div>
    需要你，我是一只🐟


</div>
<p>水里的空气，是你小心眼和坏脾气</p>

</body>
</html>

三背景属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box1{
            width: 1200px;
            height: 1200px;
            /*背景颜色*/
            background-color: gold;
            /*背景图片*/
            background-image: url("source/美女1.jpeg");
            /*背景图大小*/
            background-size: 100px;
            /*不重复：no-repeat*/
            background-repeat: no-repeat;
            /*x轴重复：repeat-x*/
            /*background-repeat: repeat-x;*/
            background-position: center top;

            /*默认*/
            /*background-attachment: scroll;*/
            /*跟随*/
            background-attachment: fixed;


        }
        .box2{
            width: 200px;
            height: 200px;

        }
        .box3 img{
            position: center;

        }
    </style>
</head>
<body>
<div class="box1">

    box1
</div>
<div>
    <img src="beauty.jpg" alt="">
</div>

</body>
</html>

练习(背景嵌套,开始游戏按钮):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        .box1{
            width: 1200px;
            height: 700px;
            background-image: url("source/winter-wonderland-wide.jpg");
            background-size: 1200px 700px;
            background-repeat: no-repeat;

        }
        .box2{
            width: 1200px;
            height: 700px;

            background-position: center bottom;
            background-image: url("source/start.png");
            background-size:300px;
            background-repeat: no-repeat;

        }
        .index{
            background-image: url("source/dht.png");


        }



    </style>
</head>
<body>
<div class="box1">
    <div class="box2">

    </div>

</div>

</body>
</html>

效果展示:
在这里插入图片描述

值得注意的是:

1、导航栏用的是重复花纹背景时,可以传输一部分,然后进行x/y-repeat, 达到减少数据传输量的效果.
2、同时,一些小的图片,在一个网页中反复使用到的,例如vip标志, 微博认证标志等, 一般使用精灵图(一张图整合很多小的图片),根据像素点切割需要的部分,来达到减少i/o操作的目的.

四盒子模型

什么是盒子模型:
HTML文档中的每个元素都被比喻成矩形盒子，盒子模型通过四个边界来描述：margin（外边距），border（边框），padding（内填充），content（内容区域），如果把一个盒子比喻成一个壁挂相片，那么
#外边距margin ===== 一个相框与另外一个相框之间的距离
#边框border ====== 边框指的就是相框
#内边距padding ===== 内容/相片与边框的距离
#宽度width/高度height ===== 指定可以存放内容/相片的区域
　　提示：可以通过谷歌开发者工具查看盒子的各部分属性

边框border和内边距 padding( 用于调父盒和子盒的位置)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*边框*/
        .box1{
            width: 200px;
            height: 200px;
            background: yellowgreen;

            border: dotted ;
            /*单个边设置宽度,颜色：顺序是上右下左*/
            border-width: 1px 2px 3px 4px;
            border-color: red white black goldenrod;
            /*边角的弧度*/
            border-radius: 80px 80px 80px 80px;
            /*圆形*/
            /*border-radius: 50%;*/
        }
        div{
            height: 150px;
            width: 150px;

        }
        .box2{
            /*不改变原始大小*/
            box-sizing: border-box;

            border: 1px solid red;
            padding-top: 20px;
        }
        .box3{
            border: 1px solid black;
            padding-right: 20px;
        }
        .box4{
            border: 1px solid green;
            padding-bottom: 20px;
        }
        .box5{
            border: 1px solid green;
            padding-bottom: 20px;
        }
    </style>
</head>
<body>

<div class="box1">
    我是一只鱼
</div>
<hr>
<div class="box2">
box2
</div>
<hr>
<div class="box3">
box3
</div>
<hr>
<div class="box4">
box4
</div>

</body>
</html>

外边距margin (用于调整子盒与子盒的位置)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 150px;
            height: 150px;

        }

        /*外边距多用来调整盒子与盒子之间的距离*/
        .box1 {
            border: 1px solid red;
            margin-bottom: 50px;
        }

        .box2 {
            border: 1px solid green;
            /*竖直方向不会相加，取最大的*/
            margin-top: 30px;
        }

        .box3 {
            border: 1px solid black;
            margin-right: 50px;
            /*在一行显示*/
            display: inline-block;
        }

        .box4 {
            border: 1px solid indigo;
            /*水平方向会叠加，与竖直方向不同*/
            margin-left: 30px;
            display: inline-block;
        }


    </style>

</head>
<body>
<div class="box1">

</div>
<div class="box2">

</div>
<div class="box3">

</div>
<div class="box4">

</div>
</body>
</html>

盒子居中与内容居中:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子居中和内容居中</title>
    <style>
         .son {
            width: 300px;
            height: 300px;
            background-color: red;

            /*多行内容水平居中与单行一样*/
            text-align: center;

            /*多行内容垂直居中*/
            line-height: 30px;
            padding-top: 120px;
            box-sizing: border-box;

            /*盒子本身水平居中*/
            margin: 0 auto;

        }

        .father {
            width: 500px;
            height: 500px;
            background-color: yellow;
        }



    </style>
</head>
<body>

<div class="father">
    <div class="son">
    我是文字我是文字我是文字我是文字我是文字我是文字我是文字
    </div>
</div>
</body>
</html>

清除默认边距:

#1、为什么要清空默认边距（外边距和内边距）
浏览器会自动附加边距，在企业开发中为了更好的控制盒子的宽高和计算盒子的宽高等等
编写代码之前的第一件事情就是清空默认的边距
#2、如何清空默认的边距
* {
margin: 0px;
padding: 0px;
}
#3、注意点：
通配符选择器会找到（遍历）当前界面中所有的标签，所以性能不好，参考：https://yuilibrary.com/yui/docs/cssreset/
拷贝代码：
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}
可以查看京东，bat主页也是这么做的，在企业开发中也应该像上面这么写

Pinkman2k

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
120 CSS样式

一字体属性<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> p{ /*字体粗细：normal,b*/ font-weight: 900; /*font-style：文字风格*/
复制链接

扫一扫