CSS样式

控制高度和宽度

width宽度
height高度
    块级标签能设置高度和宽度,而内联标签不能设置高度和宽度,内联标签的高度宽度由标签内部的内容来决定.
示例:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>诗</title>
    <style>
        #d1 {
            width: 100px;
            height: 100px;
            background-color: antiquewhite;
        }

        #d2 {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>

<div id="d1">div标签</div>
<span id="d2">span标签</span>
</body>
</html>

字体属性

字体
font-family: '楷体','黑体';  /* 字体,从左往右找浏览器能够支持的字体 */
字体大小
font-size: 10px;           /* 设置字体大小,默认字体大小是16px */
字重
font-weight:bold;       /*加粗*/

字体颜色
/*color:red;*/
/*color: #668B8B;  */
/*color: rgb(255, 170, 205);*/

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

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

以上示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>诗</title>
    <style>
        #d1 {
            font-family: 楷体;    /*字体*/
            font-size: 30px;    /*字体大小*/
            font-weight: bold;  /*字重*/
            color: red;     /*颜色*/
            /*color: #ff0000;     !*十六进制表示*!*/
            /*color: rgb(255,0,0);    !*范围0~255*!*/
        }

        #d2 {
            font-family: 仿宋;    /*字体*/
            font-size: 20px;    /*字体大小*/
            font-weight: lighter;   /*字重*/
            color: grey;    /*颜色*/
        }
    </style>
</head>
<body>

<div id="d1">少壮不努力</div>
<span id="d2">老大徒伤悲</span>
</body>
</html>

文字属性

文字对齐(水平方向对齐:text-align)

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

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

text-align: center;
text-align: right;
text-align: left;

文字垂直对齐

line-height:和css的height相同则会居中

以上示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>诗</title>
    <style>
        div p {
            text-align: center;
            line-height: 200px;
            background-color: antiquewhite;
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
<div>
    <p>
        努力
    </p>
</div>

</body>
</html>

文字装饰

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

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

<a href="">百度</a>
示例
a{
    text-decoration: none;
}

首行缩进

text-indent文字缩进

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>诗</title>
    <style>
        p {
            text-indent: 32px;
        }
    </style>
</head>
<body>

<p>
    黄色的树林里分出两条路，
    可惜我不能同时去涉足，
    我在那路口久久伫立，
    我向着一条路极目望去，
    直到它消失在丛林深处。
    但我选了另外一条路，
    它荒草萋萋，十分幽寂，
    显得更诱人，更美丽；
    虽然在这条小路上，
    很少留下旅人的足迹。
    那天清晨落叶满地，
    两条路都未经脚印污染。
    啊，留下一条路等改日再见！
    但我知道路径延绵无尽头，
    恐怕我难以再回返。
    也许多少年后在某个地方，
    我将轻声叹息将往事回顾：
    一片树林里分出两条路——
    而我选择了人迹更少的一条，
    从此决定了我一生的道路。
</p>
</body>
</html>

背景属性

/*background-color: antiquewhite;*/     /* 设置背景颜色 */
/*background-image: url(https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2735289349,1811425433&fm=26&gp=0.jpg);*/       /* 背景图片,url属性值为图片路径 */
/*background-repeat: no-repeat;*/       /* 图片是否平铺,默认是平铺的,占满整个标签 */
/*background-position: 500px 310px;*/       /*图片位置*/


background: antiquewhite url(https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2735289349,1811425433&fm=26&gp=0.jpg) no-repeat 500px 310px;         这一句是上面四行的缩写

缩写格式

background: yellow url("meinv.jpg") no-repeat 100px 50px;
背景颜色 背景图片路径 是否平铺 图片位置

边框属性

/*border-style: dotted;*/  样式
/*border-color: red;*/   颜色
/*border-width: 10px;*/  宽度
简写形式:
    /*border: 10px solid yellow;*/

四个边框可以单独设置:
    border-left:10px solid yellow ;
    border-right:10px dashed red ;
设置圆角
    border-radius: 5%;  /* 设置圆角 *

边框样式的值

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

示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>诗</title>
    <style>
        div{
            /*border-style: solid;*/
            /*border-color: red;*/
            /*border-width: 10px;*/
            /*border: 10px solid yellow;*/  /*是上面三行的缩写*/
            border-left: 10px solid blue;
            border-right: 20px dotted grey;
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
<div>

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

display

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

示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>诗</title>
    <style>
        div{
            border: 1px solid red;
            width: 200px;
            height: 200px;
            /*display: inline;*/
            /*display: inline-block;*/
            display: none;  /*隐藏标签*/
        }
        span{
            border: 1px solid green;
            width: 200px;
            height: 200px;
            display: block;
            /*display: inline-block;*/
        }
    </style>
</head>
<body>
<div>少壮不努力</div>
<span>老大徒伤悲</span>
</body>
</html>

隐藏标签:

/*display: none;*/   /* 隐藏标签,不占原来的位置 */
visibility: hidden;  /* 原来的位置还占着 */

盒子模型

content:内容  width和height 是内容的高度宽度
padding:内边距(内填充) 内容和边框之间的距离
border:边框
margin:外边距 标签之间的距离,如果两个标签都设置了margin,选最大的值,作为双方之间的距离
占用空间大小:content+padding+border

示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>诗</title>
    <style>
        .c1{
            width: 100px;
            height: 100px;
            border: 10px solid red;
            /*padding: 20px 20px;*/
            padding: 8px 6px 9px 2px;   /* 上右下左,内填充,内容和边框之间的距离 */
            margin: 20px 10px;
        }
        .c2{
            width: 100px;
            height: 100px;
            border: 10px solid green;
            margin: 20px 10px;  /* 外边距,与其他标签的距离,如果旁边没有标签,按照父级标签的位置进行移动 */
        }
        .c3{
            width: 100px;
            height: 100px;
            border: 10px solid blue;
        }
    </style>
</head>
<body>
<div class="c1">少壮不努力</div>
<div class="c2">老大徒伤悲</div>
<div class="c3">努力</div>
</body>
</html>

四个方向单独设置padding

padding-left: 10px;
padding-top: 8px;
padding-right: 5px;
padding-bottom: 5px;

四个方向单独设置margin

margin-top: 10px;
margin-left: 100px;
margin-bottom: 50px;
margin-right: 200px;

float浮动

一般用来进行页面布局

浮动会脱离正常文档流
会造成父级标签塌陷问题

解决浮动问题

clear属性规定元素的哪一侧不允许其他浮动元素。

值	描述
left	在左侧不允许浮动元素。
right	在右侧不允许浮动元素。
both	在左右两侧均不允许浮动元素。
none	默认值。允许浮动元素出现在两侧。
inherit	规定应该从父元素继承 clear 属性的值。

clear: both;    /* clear清除浮动*/  left/right
方式:
    1. 父级标签设置高度
    2. 通过伪元素选择器来进行清除浮动
        .clearfix:after{
            content:'';
            display: block;
            clear: both;
        }

解决示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>诗</title>
    <style>
        .c1 {
            width: 100px;
            height: 100px;
            background-color: red;
            float: left;
        }

        .c2 {
            width: 100px;
            height: 100px;
            background-color: green;
            float: right;
        }

        .c3 {
            /*width: 100px;*/
            height: 100px;
            background-color: blue;
            /*clear: both;    !* clear清除浮动 *!*/
        }
        .clearfix::after{
            content: '';
            display: block;
            clear: both;;
        }
        
           /* 浮动,会造成父级标签塌陷问题 */
            /* 解决父级标签塌陷问题方式1 */
        /*.c{*/
        /*    height: 100px;*/
        /*}*/
    </style>
</head>
<body>
<div class="c clearfix">
    <div class="c1">少壮不努力</div>
    <div class="c2">老大徒伤悲</div>
</div>
<div class="c3">努力</div>
</body>
</html>

overflow溢出

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>诗</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            border: 1px solid red;
            /*overflow: hidden;*/
            /*overflow: scroll;*/
            overflow: auto;
        }
    </style>
</head>
<body>
<div>
    <P>黄色的树林里分出两条路，
        可惜我不能同时去涉足，
        我在那路口久久伫立，
        我向着一条路极目望去，
        直到它消失在丛林深处。
        但我选了另外一条路，
        它荒草萋萋，十分幽寂，
        显得更诱人，更美丽；
        虽然在这条小路上，
        很少留下旅人的足迹。
        那天清晨落叶满地，
        两条路都未经脚印污染。
        啊，留下一条路等改日再见！
        但我知道路径延绵无尽头，
        恐怕我难以再回返。
        也许多少年后在某个地方，
        我将轻声叹息将往事回顾：
        一片树林里分出两条路——
        而我选择了人迹更少的一条，
        从此决定了我一生的道路。
    </P>
</div>
</body>
</html>

overflow与border-radius的应用:圆形头像

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>小诗</title>
    <style>
        .c1{
            width: 110px;
            height: 110px;
            border-radius: 50%;
            border: 1px solid antiquewhite;
            overflow: hidden;
        }
        div img{
            width: 100%;
        }
    </style>
    <link rel="stylesheet" href="css1.css">
</head>
<body>

<div class="c1">
    <img src="1.png" alt="">
</div>

</body>
</html>

定位

static定位(默认,无定位)

相对定位
    position: relative;     /* 相对于自己原来的位置进行移动,原来的空间还占着*/

绝对定位
    position:absolute;      /* 不占用自己原来的位置,移动的时候如果父级标签或祖先标签设置了相对定位,会以父级标签或祖先标签为参照物移动,如果父级标签或祖先标签没有设置相对定位,则按照整个文档进行移动*/

固定定位
    position:fixed;
    按照浏览器窗口的位置进行移动

回到顶部示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>小诗</title>
    <style>
        .c1,.c3{
            background-color: red;
            height: 500px;
            width: 600px;
        }
        .c2{
            background-color: grey;
            height: 500px;
            width: 600px;
        }
        #back_top{
            height: 40px;
            width: 80px;
            position: fixed;
            right: 40px;
            bottom: 40px;
            background-color: antiquewhite;
        }
        #back_top{
            text-align: center;
            line-height: 40px;
        }
        #back_top a{
            color: grey;
            text-decoration: none;
        }
    </style>
    <link rel="stylesheet" href="css1.css">
</head>
<body>
<a id="top">这是顶部位置</a>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
<div id="back_top">
    <a href="#top">回到顶部</a>
</div>
</body>
</html>

z-index设置层级

以模态对话框来介绍

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>小诗</title>
    <style>
        .shadow{
            background-color: rgba(0,0,0,0.3);
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 90;
        }
        .mode{
            width: 400px;
            height: 400px;
            background-color: #fff;
            z-index: 100;
            position: fixed;
            top: 50%;
            left: 50%;
            margin-left: -200px;
            margin-top: -200px;
        }
        .c1{
            width: 200px;
            height: 200px;
            margin: 150px auto;
        }
    </style>
</head>
<body>
<h1>努力</h1>
<div>少壮不努力,老大徒伤悲</div>
<div class="mode">
    <div class="c1">
        <div>
            <label>
                用户名: <input type="text">
            </label>
        </div>
        <div>
            <label>
                密码: <input type="password">
            </label>
        </div>
        <input type="submit" style="margin-top: 10px">
    </div>
</div>
<div class="shadow"></div>
</body>
</html>

z-index注意点

1.z-index 值表示谁压着谁，数值大的压盖住数值小的，
2.只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素float不能使用z-index
3.z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。
4.从父现象：父亲怂了，儿子再牛逼也没用

opacity透明度和rgba透明度的区别

opactiy是整个标签的透明度
rgba是单独给某个属性设置透明度

示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>小诗</title>
    <style>
        .c1{
            background-color: rgba(255,0,0,0.5);    /* 只有颜色变了 */
        }
        .c2{
            opacity: 0.3;       /* 字体和背景都变了 */
            background-color: red;
        }
    </style>
</head>
<body>
<div class="c1">div1</div>
<div class="c2">div2</div>
</body>
</html>

百万年薪python之路 -- 前端CSS样式

CSS样式

控制高度和宽度

字体属性

以上示例

文字属性

文字对齐(水平方向对齐:text-align)

文字垂直对齐

以上示例:

文字装饰

首行缩进

背景属性

缩写格式

边框属性

边框样式的值

示例:

display

隐藏标签:

盒子模型

示例:

四个方向单独设置padding

四个方向单独设置margin

float浮动

一般用来进行页面布局

解决浮动问题

解决示例:

overflow溢出

overflow与border-radius的应用:圆形头像

定位

回到顶部示例:

z-index设置层级

opacity透明度和rgba透明度的区别

猜你喜欢