二，CSS入门

于 2020-05-24 22:50:28 发布
阅读量151 收藏
点赞数
分类专栏： CSS基础
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36792120/article/details/106322151
版权

一，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

6. 元素内选择器：

  • 定义：<table><td></td></table>
  • 设置样式： div span

7. 父元素选择器：

  • 定义：<table><thead></thead></table>
  • 设置样式： table > thead

8. 同级选择器：

  • 定义：<table></table><span></span>
  • 设置样式： table + span
9. 属性选择器：（一般重要）
  • 元素里面所有包含xx属性的，都要给它设一个值
  • 定义：<span id=“span1”></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">
        #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”></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
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:link {
            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. 同级元素外间距之间的间隔（外边框四面都是同样间距）
  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：设置文本水平对齐方式居中
好多可乐
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值