美文网首页
二，CSS讲解

二，CSS讲解

作者: 好多可乐 | 来源:发表于2020-05-25 00:00 被阅读0次

一，CSS介绍

1. 定义：

层叠样式表（Cascading Style Sheets），决定了HTML元素以什么样的外观展示。目前主流的是css3，常用组合是div+css。css一般定义在head里

2. 三种引入方式：
  • 外观样式表：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>css</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <!--rel: relationship，属性用于定义连接的文件和zdHTML文档之间的关系
    type: 是说明外链文档的的类回型
    href: 导入css文件的路径-->
    <link type="text/css" rel="stylesheet" href="custom.css">
</head>
<body>
<div> </div>
</body>
</html>

--------------------------
custom.css文件内容：

div {
    height: 1000px;
    background-color: pink;
}
  • 内部样式表：
<style type="type/css">
           table {background-color: blueviolet;}
</style>
  • 内联样式：（不推荐）
<table style="background-color: red">
</table>

二，CSS语法

  1. 选择器 {样式属性: 值; 样式属性: 值; }
  2. table { background: red; font-size: large;}

三，CSS选择器

1. 类选择器：重点
  • 定义：<table class="class_name">
  • 设置样式：. class_name{}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>css</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <style type="text/css">
            div {
                height: 100px;
            }
          /*
            .：代表类名
            */
            .div1_class{
                background-color: #ff8888;
            }
            .div2_class{
                background-color:#44aa44;
            }
        </style>
</head>
<body>
<!--如果设置多个标签，那么多个标签都是一个样式-->
<div class="div1_class"> </div>
<div class="div2_class"> </div>
</body>
2. id选择器：重点
  • 定义：<table id="selector_name">
  • 设置样式： # selector_name
注意：
  • id不允许重复
  • 如果子类和父类有一样的属性，子类会覆盖父类的
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>css</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
        <style type="text/css">
            div {
                height: 100px;
            }
            #div1{
                height: 200px;
                background-color: #44aa44;
            }
            #div2{
                background-color:red;
            }
        </style>
</head>
<body>
<!--如果设置多个标签，那么多个标签都是一个样式-->
<div id="div1"> </div>
<div id="div2"> </div>

</body>
</html>
3. 元素/标签选择器：（重点）
  • 含义：通过以标签命名的样式选择器就是标签选择器
  • 定义：<table><table>
  • 设置样式：table{ attribute: value; attribute: value; }
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>css</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
        <style type="text/css">
            div {
                height: 100px;
                background-color: pink;
            }
        </style>
</head>
<body>
<!--如果设置多个标签，那么多个标签都是一个样式-->
<div> </div>
<div> </div>

</body>
</html>
4. 所有元素选择器：（重点）
注意：
  1. 如果一个页面上没有设置任何的样式，那么所有元素选择器里设置的样式会覆盖整个界面。
  2. 如果页面已经被设置了部分的样式，那么所有元素选择器里设置的样式只能覆盖其他未被设置的界面。
  • 定义：<div></div><table></table><span></span>
  • 设置样式：*

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>css</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <style type="text/css">
            /*<!-- 标记名代表一类标记-->*/
            div {
                height: 100px;
            }
            .div1_class{
                background-color: #ff8888;
            }
            .div2_class{
                background-color:#44aa44;
            }
            /*
            *：所有元素选择器：
            */
            *{
                background-color: #ffff77;
            }
        </style>
</head>
<body>
<!--如果设置多个标签，那么多个标签都是一个样式-->
<div id="div1" class="div1_class"> </div>
<div id="div2" class="div2_class"> </div>

</body>
</html>
5. 与选择器：（重点）
  • 定义：<table></table><span><span>
  • 设置样式： table,span
    与选择器可以随意搭配，比如标记与标记，标记与类，标记与id等。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>与选择器</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <style type="text/css">
        div, p {
            height: 100px;
        }

        #div1, p {
            background-color: deeppink;
        }
        #div2, p {
            background-color: deeppink;
        }

        /*.div1_class {*/
        /*    background-color: pink;*/
        /*}*/

        /*.div2_class {*/
        /*    background-color: red;*/
        /*}*/

        p {
            background-color: yellow;
        }
    </style>
</head>
<body>
<div id="div1" class="div1_class"></div>
<div id="div2" class="div2_class"></div>
<p id="p_id"></p>
</body>
</html>
6. 元素内选择器：（重点）
  • 定义：<table><td></td></table>
  • 设置样式： div span
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>元素内选择器</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <style type="text/css">
        div {
            height: 500px
        }

        p {
            height: 100px;
        }

        .div1_class p {
            background-color: deeppink;
        }

        .div2_class p {
            background-color: red;
        }

    </style>

</head>
<body>
<!--如果我想在div1和div2嵌套一个p标签，但是我又不想写p标签加属性来作区分，可以这么写-->
<div id="div1" class="div1_class">
    <p></p>
</div>
<div id="div2" class="div2_class">
    <p></p>
</div>
<p id="p_id"></p>
</body>
</html>
7. 父元素选择器：
  • 通过父元素进行逐级查找
  • 定义：<table><thead></thead></table>
  • 设置样式： table > thead
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>父选择器</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <style type="text/css">
        div {
            height: 200px;
        }

        p {
            background-color: red;
        }

        .div_1_class > p > button {
            background-color: #88ee88;
        }

        .div_2_class > p > button {
            background-color: #44aa44;
        }
    </style>
</head>
<body>
<!--通过div标签找到里面的p标签，再找到里面的button标签，逐层查找-->
<div id="div_1" class="div_1_class">
    <p>
        <button>提交1</button>
    </p>
</div>
<div id="div_2" class="div_2_class">
    <p>
        <button>提交2</button>
    </p>
</div>
</body>
</html>
8. 同级选择器：
  • 同级：两个挨着的
  • 定义：<table></table><span></span>
  • 设置样式： table + span
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>同级选择器</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <style type="text/css">
        *{
            background-color: #88ee88;
        }
        div {
            height: 200px;
        }

        p {
            height: 200px;
        }

        div + p {
            background-color: yellow;
        }
    </style>
</head>
<body>
<div id="div_1" class="div1_class">
    <p>
        <button>提交1</button>
    </p>
</div>

<div id="div_2" class="div2_class">
    <p>
        <button>提交2</button>
    </p>
</div>

<p></p>

</body>
</html>
9. 属性选择器：（一般重要）
  • 元素里面所有包含xx属性的，都要给它设一个值
  • 定义：<span id="span1"></span>
    <input id=input1></input>
  • 设置样式： [id]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>属性选择器</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <style type="text/css">
        #div1 {
            height: 200px;
        }

        #div2 {
            height: 100px;
        }

        [id] {
            background-color: yellow;
        }
    </style>
</head>
<body>
<div id="div1" class="div1_class"></div>
<div id="div2" class="div2_class"></div>
</body>
</html>
10. 属性值选择器：（一般重要）
  • 针对某个属性值
  • 定义：<span id="span1"></span><input id=input1></input>
  • 设置样式：[id=span1]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>属性值选择器</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <style type="text/css">
        #div1 {
            height: 300px;
        }

        #div2 {
            height: 200px;
        }

        [class="div2_class"] {
            background-color: red;
        }

    </style>
</head>
<body>
<div id="div1" class="div1_class"></div>
<div id="div2" class="div2_class"></div>
<div></div>
</body>
</html>
11. 属性值模糊选择器V1：
  • 基本被淘汰的用法。缺点：它在定义的时候一定要有空格才能匹配到。比如下面这个，我如果定义id=span1，是无法匹配到的。
  • 定义：<span id="spa n1"></span><input id=input1></input>
  • 设置样式： [id~=span1]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title> 属性值模糊选择器</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <style type="text/css">
        #div1 {
            height: 300px;
        }

        #div2 {
            height: 200px;
        }

        [class~="div2"] {
            background-color: red;
        }

    </style>
</head>
<body>
<div id="div1" class="div1_class"></div>
<div id="div2" class="div2 _class"></div>

</body>
</html>
12. 属性值头索引选择器V1：
  • 基本被淘汰的用法。缺点：它在定义的时候一定要有-才能匹配到。比如下面这个，我如果定义id=“span1”，是无法匹配到的，需要写成“sp-an1”。
  • 定义：<span id="sp-an1"></span><input id=input1></input>
  • 设置样式：[id|=sp]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<!--设置div2的颜色为黄色-->
<head>
    <title>属性值头索引选择器</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <style type="text/css">
        #div1 {
            height: 300px;
        }

        #div2 {
            height: 1000px;
        }

        [class|="div2"] {
            background-color: yellowgreen;
        }

    </style>
</head>
<body>
<div id="div1" class="div1_class"></div>
<div id="div2" class="div2- _class"></div>
</body>
</html>
13. 属性值头索引选择器V3-重点
  • 定义：<span id="span1"></span><input id=input1></input>
  • 设置样式：[id^=sp]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>属性值头索引选择器V3</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <style type="text/css">
        #div1 {
            height: 300px;
        }

        #div2 {
            height: 1000px;
        }

        [class^="div2"] {
            background-color: yellowgreen;
        }

    </style>
</head>
<body>
<div id="div1" class="div1_class"></div>
<div id="div2" class="div2_class"></div>

</body>
</html>
14. 属性值尾索引选择器V3-重点：
  • 定义：<span id="span1"></span><input id=input1></input>
  • 设置样式：[id$=an1]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>属性值尾索引选择器V3</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <style type="text/css">
        #div1 {
            height: 300px;
        }

        #div2 {
            height: 1000px;
        }

        [class$="_1"] {
            background-color: yellowgreen;
        }

    </style>
</head>
<body>
<div id="div1" class="div_class_1"></div>
<div id="div2" class="div_class_2"></div>
</body>
</html>
15. 属性值模糊选择器V3-重点：
  • 定义：<span id="span1"></span>
  • 设置样式：[id*=an]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>属性值模糊选择器V3</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <style type="text/css">
        #div1 {
            height: 300px;
        }

        #div2 {
            height: 200px;
        }

        [class*="2_"] {
            background-color: red;
        }

    </style>
</head>
<body>
<div id="div1" class="div1_class"></div>
<div id="div2" class="div2_class"></div>
</body>
</html>
16. 未访问选择器：
  • 定义：<a link="www.baidu.com">
  • 设置样式：link
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>访问选择器</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <style type="text/css">
        #div1 {
            height: 200px;
        }

        a:link {
            background-color: #ffff77;
        }

    </style>

<body>
<div id="div1">
    <a href="https://www.baidu.com" target="_blank">点击</a>
</div>

</body>
</html>
17. 访问选择器：
  • 定义：<a link="www.baidu.com">
  • 设置样式：:visited
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>访问选择器</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <style type="text/css">
        #div1 {
            height: 200px;
        }

        a:visited {
            background-color: #ffff77;
        }

    </style>

<body>
<div id="div1">
    <a href="https://www.baidu.com" target="_blank">点击</a>
</div>

</body>
</html>
18. 激活选择器：
  • 定义：<a link="www.baidu.com">
  • 设置样式：:active
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>激活选择器</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <style type="text/css">
        #div1 {
            height: 200px;
        }

        a:active {
            background-color: #ffff77;
        }

    </style>
</head>

<body>
<div id="div1">
    <a href="https://www.baidu.com" target="_blank">点击</a>
</div>

</body>
</html>
19. 悬停选择器：
  • 定义：<a link="www.baidu.com">
  • 设置样式：:hover
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>悬停选择器</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <style type="text/css">
        #div1 {
            height: 200px;
        }

        a:hover {
            background-color: #ffff77;
        }

    </style>
</head>

<body>
<div id="div1">
    <a href="https://www.baidu.com" target="_blank">点击</a>
</div>

</body>
</html>

四，CSS尺寸样式

1. width:

  • auto: 浏览器自动推断
  • px：通过像素来设置元素的宽度
  • 百分百：根据百分比来设置元素的宽度

2. height：

  • auto: 浏览器自动推断
  • px：通过像素来设置元素的宽度
  • 百分百：根据百分比来设置元素的宽度
    ps：如果不设置宽度，自动会把父级的宽度直接继承过来，就是浏览器的宽度。但是不设置高度就不行。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>CSS尺寸样式</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <style type="text/css">
        html,body{
            height: 200px;
        }
        /*如果只写div1的宽度，在界面是无法显示的，CSS所有的百分数具有一定的相对性，相对于父元素而言，所以我们
        写的时候要带上它的父类html，body
       */
        #div1 {
            height: 50%;
            background-color: yellowgreen;
        }

    </style>
</head>
<body>
<div id="div1" class="div1_class"></div>
</body>
</html>

五，CSS背景样式

1. background-color：设置背景颜色
  • 颜色3种格式：
  1. #000000
  2. RGB:RGB(0,0,0)
  3. 英文名称：black
  • 定义： table{background:black}
2. background-image：设置背景图片
  • 如果是只设置图片，默认是水平和平行都会平铺
  • 定义：background-image: url("image/xxx");
3. background-repeat：设置背景平铺方向
  • no repeat（不平铺）
  • repeat -x （横向平铺）
  • repeat -y （纵向平铺）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>CSS背景样式</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <style type="text/css">
        html, body {
            height: 1000px;
        }
        /*写法1：完整写法*/
        #div1 {
            height: 50%;
            background-color: yellowgreen;
            background-image: url("image/timg.jfif");
            background-repeat: repeat-x;
        }
        /*写法2：简写*/
        #div2 {
            height: 50%;
            background-color: yellowgreen;
            background: url("image/timg.jfif") repeat-x;
        }

    </style>
</head>
<body>
<div id="div1" class="div1_class"></div>
<div id="div2" class="div2_class"></div>
</body>
</html>
4. background-attachment ：背景图像是否随着页面的其余部分滚动（用的少）
  • fixed（窗口内容滚动图片不滚动，所以图片与其他内容相对滚动）
  • scroll（窗口内容滚动图片也跟着滚动，所以图片与其他内容相对静止）
5. background-position：背景图像的位置
  • 使用该属性时一定要将background-attachment的属性设置为fixed
  • top left
  • x% y%
  • xpx ypx
6. background-size ：背景图片的尺寸
  • auto：图片原始的宽度和高度
  • px：通过像素来定义图片的宽高（第一位是宽，第二位是高）
  • percent：根据所在元素的宽高来定义图片大小
  • conver：将图片填充整个元素，整个背景（如果大小不够会被拉伸，直到充满）
  • content：元素包含整个图片（如果div大小小于图片大小，图片是自动缩小，以达到整张图片完整显示）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>CSS背景样式</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <style type="text/css">
        body {
            height: 1000px;
            background-image: url("image/timg.jfif");
            background-repeat: no-repeat;
            background-attachment: scroll;
            background-position: right bottom;
        }

        /*写法1：完整写法*/
        #div1 {
            height: 300px;
            background-color: yellowgreen;
            background-size: 100% 100%;
        }

    </style>
</head>
<body>
<div id="div1" class="div1_class"></div>
<div id="div2" class="div2_class"></div>
</body>
</html>

六，CSS边框样式

1. border style：

  • dotted：点线边框
  • dashed：虚线边框
  • solid：定义实线边框
  • double：定义两个边框，两个边框的宽度和border-w的值相同
  • groove：定义3D沟槽边框。效果取决于边框的颜色值
  • ridge：定义3D脊边框。效果取决于边框的颜色值
  • insert：定义一个3D的嵌入边框。效果取决于边框的颜色值
  • outset：定义一个3D的突出边框。效果取决于边框的颜色值

2. border-width：

  • px：通过像素设置边框的宽度
  • 关键字：thick，medium（默认值），thin
  • 单独设置边框宽度是无效的，需要结合style才能显示

3. border-color：
颜色三种格式：

  • 16进制： #000000
  • RGB：RGB(0,0,0)
  • 英文名称：black

4. 对应关系：

  • 对应关系：border-style/border-width/border-color都可以设置多值：
    1） 位置1,位置2,位置3,位置4：上->右->下->左
    2） 位置1,位置2,位置3：上->左右->下
    3） 属性1,属性2: 上下->左右
    4） 属性1:上下左右
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>CSS边框样式</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <style type="text/css">
        #table_1 {
            border-width: 20px;
            border-style: groove;
            border-color: yellow;
        }

        #table_2 {
            /*上 右 下 左*/
            border-width: 20px 30px 40px 50px;
            /*上 右 下 左*/
            border-style: groove double solid groove;
            /*上 右 下 左*/
            border-color: yellow black red blue;
        }

        /*如果只有3个，就是上 右下 左*/
        #table_3 {
            border-width: 20px 30px 40px;
            border-style: groove double solid;
            border-color: yellow black red blue;
        }

        /* 如果只有2个，就是上下 右左*/
        #table_4 {
            border-width: 20px 30px;
            border-style: groove double;
            border-color: yellow blue;
        }
    </style>
</head>

<body>
<table id="table_1">
    <tr>
        <th>
            id
        </th>
    </tr>
</table>
<br>
<table id="table_2">
    <tr>
        <th>
            id
        </th>
    </tr>
</table>
<br>
<table id="table_3">
    <tr>
        <th>
            id
        </th>
    </tr>
</table>
<br>
<table id="table_4">
    <tr>
        <th>
            id
        </th>
    </tr>
</table>
</body>

</html>
效果图.png

七，CSS外边距样式

注意：

  1. 同级元素外间距之间的间隔（外边框四面都是同样间距）
  2. 如果不设置的话，外边距默认是8px
  • margin：设置四面的外间距
  • margin-bottom：设置下边的外间距
  • margin-left： 设置左边的外间距
  • margin-right： 设置右边的外间距
  • margin-top： 设置上边的外间距
    设置长度：
  • auto：浏览器自动推断
  • px：根据像素来设置
  • 百分比：根据百分比来设置

八，CSS内边距样式

  • padding：设置四面的内间距
  • padding-bottom：设置下边的内间距
  • padding-left ：设置左边的内间距
  • padding-right ：设置右边的内间距
  • padding-top：设置上边的内间距
    设置宽度高度：
  • auto：浏览器自动推断
  • px：根据像素来设置
  • 百分比：根据百分比来设置
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>CSS内外边距样式</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <style type="text/css">
        /**{*/
        /*    background-color: #ffff77;*/
        /*}*/
        .div1_class {
            background-color: red;
            height: 100px;
            width: 20px;
            /*margin: 10px;*/
            /*margin-left: 100px;*/
            /*margin-bottom: 100px;*/
            /*margin-right: 100px;*/
            /* 也支持一起设置,或者设置其中几个*/
            /*上 右 下 左*/
            margin: 100px 200px 300px 400px;
        }

        .input1 {
            padding: 100px 200px 300px 400px;
        }

    </style>
</head>

<body>
<div class="div1_class"></div>
<input class="input1" value="输入框">
</body>

</html>

九，CSS定位样式-重点

  1. position：
  • static：默认，不定位
  • absolute：绝对元素定位
  • relative：相对于定位
  • fixed：绝对元素定位，相对于浏览器
  1. top：
  2. right：
  3. bottom：
  4. left：
    设置长度：
  • auto：浏览器自动推断
  • px：根据像素来设置
  • 百分比：根据百分比来设置
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>css定位样式</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <style type="text/css">

        .parent {
            width: 100px;
            height: 100px;
            background-color: #ffff77;
        }

        .child {
            width: 50px;
            height: 50px;
            top: 50px;
            left: 50px;
            /*margin: 10px;*/
            position: fixed;
            background-color: red;

        }
    </style>
</head>
<body>
<div class="parent">
    <div class="child"></div>
</div>
</body>
</html>

十，CSS文本样式

  1. color:
    颜色的三种格式：
  • 16进制： #000000
  • RGB：RGB(0,0,0)
  • 英文名称：black
  1. text-align：
  • left：默认值，设置文本水平对齐方式居左
  • right：设置文本水平对齐方式居右
  • center：设置文本水平对齐方式居中

相关文章

网友评论

      本文标题：二，CSS讲解

      本文链接：https://www.haomeiwen.com/subject/jjhsahtx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|二，CSS讲解|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！