CSS样式操作

CSS样式操作

标签长和宽

width, height
只有块级标签设置长和宽才有效
给行内标签设置长和宽没有任何作用, 行内标签的长宽只和其中的文本有关

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>给标签设置长和宽</title>
    <style>
        .c1 {
            height: 200px;
            width: 200px;
        }

        .c2 {
            height: 400px;
            width: 400px;
        }
    </style>
</head>
<body>
<div class="c1">这是一个div块级标签</div>
<span class="c2">这是一个span行内标签</span>
</body>
</html>

字体样式

font-family 字体
font-size 大小
font-weight 粗细

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>设置字体</title>
    <style>
        .c1 {
            font-family:"Microsoft Yahei", "微软雅黑", "Arial", sans-serif;
            font-size: 24px;
            font-weight: lighter;

        }
    </style>
</head>
<body>
<p class="c1">这是一个p标签</p>
</body>
</html>

字体颜色

color
- 英文单词 red
- 十六进制颜色码, 直接用Pycharm自带的颜色提起器获取 #FF0000
- rgb(255, 0 ,0)
- rgba(255, 0, 0, 0.5) a代表颜色透明度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体颜色</title>
    <style>
        .c1 {
            color: red;
        }

        .c2 {
            color: #FF0000;
        }

        .c3 {
            color: rgb(255, 0, 0);
        }

        .c4 {
            color: rgba(255, 0, 0, 0.5);
        }

    </style>
</head>
<body>
<p class="c1">这是一个p标签1</p>
<p class="c2">这是一个p标签2</p>
<p class="c3">这是一个p标签3</p>
<p class="c4">这是一个p标签3</p>
</body>
</html>

文字布局

text-align 对齐
- left 左对齐
- right 右对齐
- center 居中对齐
- justify
text-decoration
- underline 下划线
- overline 上划线
- line-through 中线
- none 取消a标签默认的下划线 (通用)
text-indent 缩进

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文字布局</title>
    <style>
        p {
            text-align: left;
            text-decoration: line-through;
            text-indent: 48px;
            font-size: 24px;
        }

        a {
            text-decoration: none;
        }
    </style>

</head>
<body>
<div>
    <p>sometime I rock sometime I roll, sometime it's not me in control.</p>
    <p>sometime I rock sometime I roll, sometime it's not me in control.</p>
    <p>sometime I rock sometime I roll, sometime it's not me in control.</p>
    <a href="https://www.baidu.com">click me to search</a>
</div>
</body>
</html>

背景background

background-color背景颜色
background-img: url() 背景图片, 默认铺满整区域
background-repeat: no-repeat; 不平铺
background-repeat: repeat-x;
background-repeat: repeat-y;
background-position: 10px 50px; 图片位置
background-attachment: fixed;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景属性</title>
    <style>
        div {
            width: 100%;
            height: 400px;
            background-color: black;
            background-image: url("test.jpg");
            background-repeat: no-repeat;
            background-position: 10px 20px;
            /*background: url("test.jpg") red no-repeat 10px 20px;*/
        }
        
    </style>
</head>
<body>
<div>

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

边框border

border
- width 宽度
- color 颜色
- style 样式
- border-radius: 50%; 可以用来画圆

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边框</title>
    <style>
        div {
            height: 200px;
            border: red 2px solid;
        }
    </style>
</head>
<body>
<div>

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

display属性

display: inline; 使块级标签具备行内标签属性
display: block; 使行内标签具备块级标签属性
display: inline-block; 既具备行内标签属性, 又具备块级标签属性s
display: none; 隐藏标签, 且不占位置
- visibility: hidden; 隐藏标签但还占位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>display</title>
    <style>
        div {
            width: 50px;
            height: 50px;
            background-color: red;
            border: red 1px solid;
            /*display: inline;*/
        }

        span {
            width: 50px;
            height: 50px;
            border: green 1px solid;
            background-color: green;
            /*display: block;*/
        }
    </style>
</head>
<body>
<div>这是一个div标签</div>
<span>这是一个span标签</span>
</body>
</html>

盒子模型

margin 外边距, 标签与标签之间的距离
- margin: 0 auto
padding 内边距, 内容与边框之间的距离
- padding: 0 auto;
border 边框
content 内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型</title>
    <style>
        .c1 {
            width: 50px;
            height: 50px;
            background-color: red;
            /*margin-top: 20px;*/
            /*margin-right: 20px;*/
            /*margin-bottom: 20px;*/
            /*margin-left: 20px;*/
            /*margin: 10px;*/
            /*margin: 10px 20px;*/ /*上下10, 左右20*/
            margin: 10px 20px 30px; /*上10, 左右20, 下30*/

        }

        .c2 {
            width: 50px;
            height: 50px;
            background-color: green;
        }
    </style>

</head>
<body>
<div class="c1"></div>
<div class="c2"></div>
</body>
</html>

浮动float

在CSS中, 任何元素都可以浮动
浮动的元素会脱离正常的文档流, 让出原来的位置
浮动会造成父标签塌陷
clear可以清除浮动带来的影响

/*添加一行空白的行将塌陷的标签撑起来*/
.clearfix: after {
    content:"";
    clear: both;  /*表示左右两边都不能有浮动元素*/ 
    display: block;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动</title>
    <style>
        body {
            margin: 0;
        }

        .c1 {
            width: 100px;
            height: 100px;
            background-color: red;
            float: left;
        }

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

        /*浮动会造成父标签塌陷*/
        .c3 {
            border: 10px black solid;
        }

        .clearfix:after {
            content: "";
            clear: both;  /*左右两边都不能有浮动元素*/
            display: block;

        }

    </style>
</head>
<body>
<div class="c3 clearfix">
    <div class="c1"></div>
    <div class="c2"></div>
</div>
</body>
</html>

溢出overflow

标签内的内容大于标签的大小
overflow: hidden; 将溢出的直接隐藏
overflow: scroll; 左右上下滑动
overflow: auto; 上下滑动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>overflow</title>
    <style>
        p {
            height: 50px;
            width: 50px;
            border: 1px black solid;
            /*overflow: hidden;*/
            /*overflow: scroll;*/
            overflow: auto;
        }
    </style>
</head>
<body>
<p>same bed but feel just  a little bit bigger now </p>
</body>
</html>

定位position

所有标签的位置默认都是静态的, 无法移动 position: static
relative 相对定位, 相较于标签原来的位置移动
absolute 绝对定位, 相较于已经定位过的标签 (position不是static) 的父标签移动
fixed 固定定位, 相对于浏览器窗口移动

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

        .c2 {
            width: 100px;
            height: 100px;
            background-color: green;
            position: absolute;
            bottom: 100px;
            right: 100px;
        }

        .c3 {
            width: 80px;
            height: 20px;
            border: 1px black solid;
            position: fixed;
            right: 100px;
            bottom: 100px;
            text-align: center;
        }
    </style>
</head>
<body>
<div class="c1">
    <div class="c2"></div>
</div>
<div class="c3">回到顶部</div>
</body>
</html>

是否脱离文档流

脱离 (会让出位置)
- 浮动
- 绝对定位
- 固定定位
不脱离
- 相对定位

Z-index

Z-index表示标签的层叠关系, 值越大, 标签就在最上层

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>z-index</title>
    <style>
        .cover {
            background-color: rgba(128, 128, 128, 0.5);
            position: fixed;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            z-index: 999;
        }

        .model {
            background-color: white;
            position: fixed;
            width: 400px;
            height: 200px;
            top: 50%;
            left: 50%;
            margin-top: -100px;
            margin-left: -200px;
            z-index: 1000;

        }
    </style>
</head>
<body>
<div>bottom page</div>
<div class="cover"></div>
<div class="model">
    <form action="">
        <p>username:
            <input type="text">
        </p>
        <p>password:
            <input type="password">
        </p>
        <p>
            login<input type="submit">
        </p>
    </form>

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

不透明opacity

既可以调颜色也可以调字体

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>opacity</title>
    <style>
        .c1 {
            background-color: rgba(255, 0, 0 , 0.5);
            opacity: 0.2;

        }

        .c2 {
            background-color: green;
            opacity: 0.2;
        }
    </style>
</head>
<body>
<p class="c1">rgba和opacity结合使用</p>
<p class="c2">opacity调整的是全局不透明度</p>
</body>
</html>

原文地址：https://www.cnblogs.com/bigb/p/11862747.html

CSS 02

CSS样式操作

标签长和宽

字体样式

字体颜色

文字布局

背景background

边框border

display属性

盒子模型

浮动float

溢出overflow

定位position

是否脱离文档流

Z-index

不透明opacity