前端三件套系例之CSS—

文章目录

1、宽和高

width属性可以为元素设置宽度。
height属性可以为元素设置高度。
块级标签才能设置宽度，内联标签的宽度由内容来决定(行内标签无法设置宽度，设置了也不会生效)。

案例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style>

        p {

            background-color: red;

            height: 200px;

            width: 400px;

        }

        span {

            background-color: green;

            height: 200px;

            width: 400px;

            /*行内标签无法设置长宽 就算你写了 也不会生效*/

        }

    </style>

</head>

<body>

<p>ppp</p>

<span>span</span>

</body>

</html>

2、字体属性

2-1 文字字体

font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。
简单实例：

body {

  font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif

}

2-2 字体大小

p {

  font-size: 14px;

}

如果设置成inherit表示继承父元素的字体大小值。

2-3 字重（粗细）

font-weight用来设置字体的字重（粗细）。

值	描述
normal	默认值，标准粗细
bold	粗体
bolder	更粗
lighter	更细
100~900	设置具体粗细，400等同于normal，而700等同于bold
inherit	继承父元素字体的粗细值

2-4 文本颜色

颜色属性被用来设置文字的颜色。
颜色是通过CSS最经常的指定：

十六进制值 - 如: **＃**FF0000
一个RGB值 - 如: RGB(255,0,0)
颜色的名称 - 如: red

还有rgba(255,0,0,0.3)，第四个值为alpha, 指定了色彩的透明度/不透明度，它的范围为0.0到1.0之间。

2-5 总结

/*字族：STSong作为首选字体, 微软雅黑作为备用字体*/

font-family: "STSong", "微软雅黑";

/*字体大小*/

font-size: 40px;

/*字重：100、200、300、400、500、600、700、800、900，值越大字越粗*/

font-weight: 900;

/*行高: 字体文本默认在行高中垂直居中显示*/

line-height: 200px;

/*字划线: overline(上划线) | line-through(中划线) | underline(下划线) | none(取消划线)  */

text-decoration: overline;

/*字间距*/

letter-spacing: 2px;

/*词间距*/

word-spacing: 5px;

/*首行缩进：1em相当于一个字的宽度*/

text-indent: 2em;

/*字体颜色*/

color: red;

/* 文本水平排列方式：left(水平居左) | center(水平居中) | right(水平居右) */

text-align: center;

2-6 案例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style>

        p {

            /*font-family: "Arial Black","微软雅黑","...";  !*第一个不生效就用后面的 写多个备用*!*/

            /*font-size: 24px;  !*字体大小*!*/

            /*font-weight: inherit;  !*bolder lighter 100~900 inherit继承父元素的粗细值*!*/

            /*color: red;  !*直接写颜色英文*!*/

            /*color: #ee762e;  !*颜色编号*!*/

            /*color: rgb(128,23,45);  !*三基色 数字  范围0-255*!*/

            /*color: rgba(23, 128, 91, 0.9);  !*第四个参数是颜色的透明度 范围是0-1*!*/

            /*当你想要一些颜色的时候 可以利用现成的工具

                1 pycharm提供的取色器

                2 qq或者微信截图功能

                微信公众号:软件管家...

            */

        }

    </style>

</head>

<body>

    <p>曹老板 抬人！！！fuck off!</p>

</body>

</html>

文字属性

3-1 文字对齐

text-align 属性规定元素中的文本的水平对齐方式。

值	描述
left	左边对齐默认值
right	右对齐
center	居中对齐
justify	两端对齐

3-2 文字装饰

text-decoration 属性用来给文字添加特殊效果。

值	描述
none	默认。定义标准的文本。
underline	定义文本下的一条线。
overline	定义文本上的一条线。
line-through	定义穿过文本下的一条线。
inherit	继承父元素的text-decoration属性的值。

常用的为去掉a标签默认的自划线：

a {

  text-decoration: none;

}

3-3 首行缩进

将段落的第一行缩进 32像素：

p {

  text-indent: 32px;

}

3-4 案例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style>

        p {

            /*text-align: center;  !*居中*!*/

            /*text-align: right;*/

            /*text-align: left;*/

            /*text-align: justify;  !*两端对齐*!*/

            /*text-decoration: underline;*/

            /*text-decoration: overline;*/

            /*text-decoration: line-through;*/

            /*text-decoration: none;*/

            /*在html中 有很多标签渲染出来的样式效果是一样的*/

            font-size: 16px;

            text-indent: 32px;   /*缩进32px*/

        }

        a {

            text-decoration: none;  /*主要用于给a标签去掉自带的下划线  需要掌握*/

        }

    </style>

</head>

<body>

<!--    <p>我要感谢我的导师，要不是他，我论文早写完了（狗头）</p>-->

<!--<a href="https://www.mzitu.com/">点我</a>-->

<p>我要感谢我的导师，要不是他，我论文早写完了（狗头）,我要感谢我的导师，要不是他，我论文早写完了（狗头）,我要感谢我的导师，要不是他，我论文早写完了（狗头）</p>

</body>

</html>

4、背景属性

4-1 基本使用

/*背景颜色*/

background-color: red;

/*背景图片*/

background-image: url('1.jpg');

/*

 背景重复

 repeat(默认):背景图片平铺排满整个网页

 repeat-x：背景图片只在水平方向上平铺

 repeat-y：背景图片只在垂直方向上平铺

 no-repeat：背景图片不平铺

*/

background-repeat: no-repeat;

/*背景位置*/

background-position: left top;

/*background-position: 200px 200px;*/

4-2 支持简写

background:#336699 url('1.png') no-repeat left top;

使用背景图片的一个常见案例就是很多网站会把很多小图标放在一张图片上，然后根据位置去显示图片。减少频繁的图片请求。

4-3 有趣的例子（图片不动）

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>滚动背景图示例</title>

    <style>

        * {

            margin: 0;

        }

        .box {

            width: 100%;

            height: 500px;

            background: url("http://gss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/zhidao/wh%3D450%2C600/sign=e9952f4a6f09c93d07a706f3aa0dd4ea/4a36acaf2edda3cc5c5bdd6409e93901213f9232.jpg")  center center;

            background-attachment: fixed;

        }

        .d1 {

            height: 500px;

            background-color: tomato;

        }

        .d2 {

            height: 500px;

            background-color: steelblue;

        }

        .d3 {

            height: 500px;

            background-color: mediumorchid;

        }

    </style>

</head>

<body>

    <div class="d1"></div>

    <div class="box"></div>

    <div class="d2"></div>

    <div class="d3"></div>

</body>

</html>

4-4 案例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style>

        div {

            height: 800px;

            width: 800px;

            /*background-color: red;*/

            /*背景图片*/

            /*background-image: url("222.png");  !*默认要全部铺满*!*/

            /*background-repeat: no-repeat;  !*不铺*!*/

            /*background-repeat: no-repeat;  !*不铺*!*/

            /*background-repeat:repeat-x;  */

            /*background-repeat:repeat-y;  */

            /*其实浏览器不是一个平面  是一个三维立体结构

            z轴指向用户 越大离用户越近

            */

            /*background-position:center center;  !*第一个左  第二个上*!*/

            /*如果出现了多个属性名前缀是一样的情况 一般情况下都可以简写 只写前缀*/

            background: red url("222.png") no-repeat center center;  /*只需要填上你想要加的参数即可 位置没有关系 参数个数也不做限制 加就显示不加就用默认的设置*/

        }

    </style>

</head>

<body>

    <div></div>

</body>

</html>

5、边框

5-1 边框属性

border-width
border-style
border-color

#i1 {

  border-width: 2px;

  border-style: solid;

  border-color: red;

}

通常使用简写方式：

#i1 {

  border: 2px solid red;

}

5-2边框样式

值	描述
none	无边框。
dotted	点状虚线边框。
dashed	矩形虚线边框。
solid	实线边框。

除了可以统一设置边框外还可以单独为某一个边框设置样式，如下所示：

#i1 {

  border-top-style:dotted;

  border-top-color: red;

  border-right-style:solid;

  border-bottom-style:dotted;

  border-left-style:none;

}

5-3 案例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style>

        p {

            background-color: red;

            border-width: 5px;

            border-style: solid;

            border-color: green;

        }

        div {

            /*border-left-width: 5px;*/

            /*border-left-color: red;*/

            /*border-left-style: dotted;*/

            /*border-right-width: 10px;*/

            /*border-right-color: greenyellow;*/

            /*border-right-style: solid;*/

            /*border-top-width: 15px;*/

            /*border-top-color: deeppink;*/

            /*border-top-style: dashed;*/

            /*border-bottom-width: 10px;*/

            /*border-bottom-color: tomato;*/

            /*border-bottom-style: solid;*/

            border: 3px solid red;  /*三者位置可以随意写*/

        }

        #d1 {

            background-color: greenyellow;

            height: 400px;

            width: 400px;

            border-radius: 50%;  /*直接写50%即可 长宽一样就是圆 不一样就是椭圆*/

        }

    </style>

</head>

<body>

    <p>穷人  被diss到了  哭泣.png</p>

<div>妈拉个巴子,妈拉个巴子,妈拉个巴子,妈拉个巴子</div>

<div id="d1"></div>

</body>

</html>

6、border-radius

用这个属性能实现圆角边框的效果。
将border-radius设置为长或高的一半即可得到一个圆形。

#di{

  border-radius:50%

}

7、display属性（显示样式）

7-1 介绍

用于控制HTML元素的显示效果。

值	意义
display:”none”	HTML文档中元素存在，但是在浏览器中不显示,占用位置也让出。一般用于配合JavaScript代码使用。
display:”block”	默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。
display:”inline”	按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。
display:”inline-block”	使元素同时具有行内元素和块级元素的特点。

display:”none”与visibility:hidden的区别：
visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

7-2 详细

HTML5预定义了很多系统标签，大家学习了html标签部分的时候，肯定注意到了，不同的标签在页面中的显示效果是不一样的，比如两个div之间默认会换行显示，而两个span标签却在一行来显示，到底是什么样式控制着标签这种显示效果呢，那就是显示样式display来控制的。

display: block;

<div style="display: block;"></div>

<span style="display: block;"></span>

<i style="display: block;"></i>

<!--

1. 任意标签的display样式值均可以设置为block，那么该标签就会以block方式来显示

2. block方式显示的标签，默认会换行

3. block方式显示的标签，支持所有的css样式

4. block方式显示的标签，可以嵌套所有显示方式的标签

注：标题标签和段落标签虽然也是block显示类标签，但不建议嵌套block显示类标签

-->

display: inline;

<div style="display: inline;"></div>

<span style="display: inline;"></span>

<i style="display: inline;"></i>

<!--

1. 任意标签的display样式值均可以设置为inline，那么该标签就会以inline方式来显示

2. inline方式显示的标签，默认不会换行

3. inline方式显示的标签，不支持所有css样式(如：不支持手动设置该标签的宽高)

4. inline方式显示的标签，建议只用来嵌套所有inline显示方式的标签

-->

display: inline-block;

<div style="display: inline-block;"></div>

<span style="display: inline-block;"></span>

<i style="display: inline-block;"></i>

<!--

1. 任意标签的display样式值均可以设置为inline-block，那么该标签就会以inline-block方式来显示

2. inline-block方式显示的标签，具有inline特性，默认不换行

3. inline-block方式显示的标签，也具备block特征，支持所有css样式

4. inline-block方式显示的标签，不建议嵌套任意显示方式的标签

-->

7-3 案例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style>

        /*#d1 {*/

        /*    !*display: none;  !*隐藏标签不展示到前端页面并且原来的位置也不再占有了 但是还存在于文档上*!*!*/

        /*    display: inline;  !*将标签设置为行内标签的特点*!*/

        /*}*/

        /*#d2 {*/

        /*    display: inline;*/

        /*}*/

        /*#d1 {*/

        /*    display: block;  !*将标签设置成块儿级标签的特点*!*/

        /*}*/

        /*#d2 {*/

        /*    display: block;*/

        /*}*/

        /*#d1 {*/

        /*    display: inline-block;*/

        /*}*/

        /*#d2 {*/

        /*    display: inline-block;  !*标签即可以在一行显示又可以设置长宽*!*/

        /*}*/

    </style>

</head>

<body>

<div style="display: none">div1</div>

<div>div2</div>

<div style="visibility: hidden">单纯的隐藏 位置还在</div>

<div>div4</div>

<!--<div id="d1" style="height: 100px;width: 100px;background-color: red">01</div>-->

<!--<div id="d2" style="height: 100px;width: 100px;background-color: greenyellow">02</div>-->

<!--<span id="d1" style="height: 100px;width: 100px;background-color: red">span</span>-->

<!--<span id="d2" style="height: 100px;width: 100px;background-color: greenyellow">span</span>-->

<!--<div id="d1" style="height: 100px;width: 100px;background-color: red">01</div>-->

<!--<div id="d2" style="height: 100px;width: 100px;background-color: greenyellow">02</div>-->

</body>

</html>