前端学习二（css）

一、使用css三种方式

1、外链式：在head中通过link链接外部css文件

2、嵌入式：通过style标签里面写css，通常在head里面

3、内联式：通过标签本身的style属性，在标签上写样式

<!DOCTYPE html>
<HTML>

<head>
    <title>学习css</title>
    <meta charset="utf-8">
    <!-- 在html中使用css三种方式
    1、外链式：在head中通过link链接外部css文件
    2、嵌入式：通过style标签里面写css，通常在head里面
    3、内联式：通过标签本身的style属性，在标签上写样式 -->
    <!-- <link rel="stylesheet" href="./myfirst.css"> -->
    <!-- <style>
        div {
            width: 500px;
            height: 500px;
            background: blueviolet
        }
    </style> -->
</head>

<body>
    <div style="width: 500px;height: 200px;background: cadetblue;">
        div
    </div>
</body>

</HTML>

以下是示例使用的myfirst.css代码

div{
    width: 500px;
    height: 500px;
    background: red
}

View Code

二、文本样式

这里示例有用到下面的选择器

<!DOCTYPE html>
<HTML>

<head>
    <title>学习css</title>
    <meta charset="utf-8">
    <style>
        /* 这种所有的p标签都会生效 */
        p {
            color: #8b0000;
            /* 字体大小 */
            font-size: 18px;
            /* 字体行高 */
            line-height: 30px;
        }

        /* 对class="p1"的标签生效，
        设置了某种属性，就会覆盖全局设置的某种属性 */
        .p1 {
            color: #000;
            /* 字体加粗 */
            font-weight: bold;
            /* 字体倾斜 */
            font-style: italic;
            /* 缩进，根据字体大小可以推断缩进几个字符 */
            text-indent: 36px;
            /* 设置字体 */
            font-family: "楷体";
            /* 居中 */
            text-align: center;
        }

        .p4 {
            /* 同时设置几个属性，下面的顺序是：是否加粗、字号/行高、字体样式 */
            font: normal 12px/36px '微软雅黑';
        }
    </style>
</head>

<body>
    <div style="text-align: center;">
        <!-- span标签不能设置居中，但是可以设置div居中来达到div中所有内容居中的效果 -->
        <span>标题</span>
        <p class="p1">北京时间10月20日消息，奥运冠军杨倩入围2021年清华大学特等奖学金候选。根据规定，她可以拿到1.5万元奖学金。</p>
        <p>北京时间10月20日消息，奥运冠军杨倩入围2021年清华大学特等奖学金候选。根据规定，她可以拿到1.5万元奖学金。</p>
        <p>北京时间10月20日消息，奥运冠军杨倩入围2021年清华大学特等奖学金候选。根据规定，她可以拿到1.5万元奖学金。</p>
        <p class="p4">北京时间10月20日消息，奥运冠军杨倩入围2021年清华大学特等奖学金候选。根据规定，她可以拿到1.5万元奖学金。</p>

    </div>
</body>

</HTML>

View Code

三、背景设置background

1、设置背景颜色【颜色名、rgb（rgba第四个值是设置透明度）、16进制数值】

2、url 背景图片

<!DOCTYPE html>
<HTML>

<head>
    <title>背景</title>
    <meta charset="utf-8">
    <style>
        /* 给div元素设置样式 */
        div {
            width: 400px;
            height: 400px;
            /* 
            1、设置背景颜色【颜色名、rgb（rgba第四个值是设置透明度）、16进制数值】
            2、url 背景图片 */
            /* background: rgb(219, 135, 222); */
            background: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fffvii-remake.square-enix-games.com%2Fimages%2Fcharacters%2Fcharacters_full_tifa.png&refer=http%3A%2F%2Fffvii-remake.square-enix-games.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg);
            /* 背景图大小 百分比、像素值以及具体的单词都可以
            auto-原图大小
            cover-铺满 */
            background-size: 100px 100px;
            background-repeat: no-repeat;

        }

        /* 给整个body设置背景 */
        body {
            background: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fffvii-remake.square-enix-games.com%2Fimages%2Fcharacters%2Fcharacters_full_tifa.png&refer=http%3A%2F%2Fffvii-remake.square-enix-games.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg);
            background-size: 50% 400px;
            /* 平铺效果：no-repeat不平铺、 repeat-x水平平铺、repeat-y竖直平铺*/
            background-repeat: no-repeat;
            /* 背景位置 百分比、像素值以及具体的位置单词都可以，默认是左上角*/
            background-position: 20%;
            /* 固定背景，不会随着浏览器上下滑动而滑动 */
            background-attachment: fixed;
        }
    </style>
</head>

<body>
    <div class="class">div1</div>
</body>

</HTML>

View Code

四、选择器

1、标签选择器(不常用)：通过元素的标签名进行选择
2、类选择器：通过元素class属性去选择
3、id选择器(也不常用，一般是js用的)
4、属性选择器(不常用)，示例如下，还可以根据name="b1"更具体的去筛选
5、包含选择器（层级）,根据层级用空格分开，可以标签、类、id、属性混用
6、组选择器，通过逗号隔开，也可以标签、类、id、属性混用
7、伪类及伪元素选择器
　　hover ：悬停显示效果
　　link ：向未被访问的链接添加样式
　　visited ：向已被访问的链接添加样式，只有color属性生效
　　active：链接被激活时的状态，也就是网页链接跳转之前的鼠标松开的状态
　　定义顺序为a:link>a:visited>a:hover>a:active
　　参考链接：https://blog.csdn.net/lionwerson/article/details/105991623

<!DOCTYPE html>
<HTML>

<head>
    <title>css选择器</title>
    <meta charset="utf-8">
    <style>
        /* 1、标签选择器(不常用)：通过元素的标签名进行选择 */
        li {
            color: rgb(172, 69, 69);
        }

        /* 2、类选择器：通过元素class属性去选择 */
        .li3 {
            color: rgb(91, 69, 172);
        }

        /* 3、id选择器(也不常用，一般是js用的) */
        #b2 {
            background: chartreuse;
        }

        /* 4、属性选择器(不常用)，示例如下，还可以根据name="b1"更具体的去筛选 */
        div[name] {
            font-size: 20px;
        }

        /* 5、包含选择器（层级）,根据层级用空格分开，可以标签、类、id、属性混用
        下面例子.ul1如果省略，那么div下所有层级的li都会有此效果 */
        div .ul1 li {
            font-style: italic;
        }

        /* 6、组选择器，通过逗号隔开，也可以标签、类、id、属性混用 */
        h1,
        h2,
        h3 {
            font-weight: bold;
        }

        /* 7、伪类及伪元素选择器
        hover 悬停显示效果 
        link    向未被访问的链接添加样式
        visited 向已被访问的链接添加样式，只有color属性生效
        active：链接被激活时的状态，也就是网页链接跳转之前的鼠标松开的状态
        定义顺序为a:link>a:visited>a:hover>a:active
        参考链接：https://blog.csdn.net/lionwerson/article/details/105991623
        */
        .python:hover {
            background: chartreuse;
            font-size: 30px;
        }

        a:link {
            color: #1515eb;
            font-weight: bold;
            font-size: 30px;
        }

        a:visited {
            color: rgb(31, 216, 14);
        }
    </style>
</head>

<body>
    <div class="box1" name="b1">box1</div>
    <div class="box2" id="b2">box1
        <h1>h111111</h1>
        <h2>h222222</h2>
        <h3>h333333</h3>
    </div>
    <div class="box3">
        <ul class="ul1">
            <li>11</li>
            <li>22</li>
            <li class="li3">33</li>
            <li>44</li>
            <li>55</li>
        </ul>
    </div>

    <div class="box4">
        <!-- 去掉无序列表前面的点，list-style-type设置为none -->
        <ul style="list-style-type: none;">
            <li class="python">python</li>
            <li>java</li>
            <li>php</li>
            <li>c++</li>
            <li>go</li>
        </ul>
        <a href="https://www.baidu.com">百度</a>

    </div>
</body>

</HTML>

View Code

五、三种模型框

1、内边距 padding

2、边框线 border

3、外边距 margin，无背景色

<!DOCTYPE html>
<HTML>

<head>
    <title>学习css</title>
    <meta charset="utf-8">
    <style>
        /* 
        三种模型框
        1、内边距  padding
        2、边框线  border
        3、外边距  margin，无背景色  */
        .box1 {
            width: 200px;
            height: 200px;
            background: darkgreen;
            padding: 20px;
            border: solid 5px red;
            margin: 10px;
        }

        .box2 {
            width: 300px;
            height: 300px;
            /* 内边距：可以设置有内边距的方向 */
            padding-left: 200px;
            background: darkgrey;
            /* 边框线：dotted-点线、solid-实线、double-双线 */
            border: dotted 5px blue;
            /* 外边距：单独设置一个方向 */
            margin-top: 30px;
        }

        .box3 {
            width: 400px;
            height: 400px;
            /* 内边距：设置2个值，第一个代表上下、第二个代表左右 */
            padding: 20px 10px;
            background: darkkhaki;
            /* 边框线：可以设置有边框线的方向，设置的三个值无顺序要求 */
            border-left: rgb(255, 0, 0) 5px double;
            /* 外边距：设置2个值，第一个代表上下、第二个代表左右 */
            margin: 10px auto;
        }
    </style>
</head>

<body>
    <div class="box1">有闲的节奏，挑拨的琴弦，在微风吹过斑驳光影的树下，倾听弦的声音，揣测着风的方向，越来越快乐，越来越幸福…… </div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>

</HTML>

View Code

六、元素定位

三种定位机制 : 普通文档流 (text)| 浮动(float) | 定位(position)

1、普通文档流【CSS中默认的文本文档】

除非专门指定，否则所有框都在普通流中定位。普通流中元素框的位置由元素在(X)HTML中的位置决定。

块级元素从上到下依次排列，框之间的垂直距离由框的垂直margin计算得到。行内元素在一行中水平布置。

2、层定位

对每个图层进行相应的定位（相对定位relative、绝对定位absolute、固定定位fixed、无定位static）

3、浮动

<!DOCTYPE html>
<HTML>

<head>
    <title>学习css</title>
    <meta charset="utf-8">
    <style>
        /*  CSS3 中有三种定位机制 : 普通文档流 (text)| 浮动(float) | 定位(position)
        一、普通文档流【CSS中默认的文本文档】  
            除非专门指定，否则所有框都在普通流中定位。普通流中元素框的位置由元素在(X)HTML中的位置决定。
            块级元素从上到下依次排列，框之间的垂直距离由框的垂直margin计算得到。行内元素在一行中水平布置。
        二、层定位
            对每个图层进行相应的定位（相对定位relative、绝对定位absolute、固定定位fixed、无定位static）
        三、浮动
        */
        div {
            width: 200px;
            height: 200px;
        }

        .box1 {
            background: rgb(8, 240, 8);
        }

        .box2 {
            background: rgb(190, 15, 38);
            /* 相对定位，相对标签原来在页面文档中的位置进行偏移 */
            position: relative;
            right: 50px;
            top: 50px;
        }

        .box3 {
            background: rgb(202, 235, 14);
            /* 固定位置，相对于浏览器窗口进行定位 */
            position: fixed;
            left: 500px;
            top: 100px;
        }

        .box4 {
            background: cyan;
            /* 绝对定位，相对已经定位的父级元素进行偏移，如果父级都没有，则相对于左上角偏移 */
            position: absolute;
            left: 50px;
            top: 50px;
        }

        .box00 {
            width: 1000px;
            height: 100px;
            background: lightsteelblue;
        }

        .box00 div {
            /* 设置浮动，设置box00浮动不会对包含的4个div生效，只会对本标签生效 */
            float: left;
        }

        .box11 {
            background: blue;
        }

        .box22 {
            background: rgb(0, 255, 13);
        }

        .box33 {
            background: rgb(200, 25, 216);
        }

        .box44 {
            background: rgb(235, 10, 179);
        }
    </style>
</head>

<body>
    <div class="box1">有闲的节奏，挑拨的琴弦，在微风吹过斑驳光影的树下，倾听弦的声音，揣测着风的方向，越来越快乐，越来越幸福…… </div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box" style="height: 500px;width: 500px;background: darkolivegreen;position: relative;">
        <div class="box4"></div>
        <!-- 如果box4没有绝对定位，页面则是从上到下的顺序排列
        如果有绝对定位，下面的box1则会顶到原来box4的位置（固定位置也有此效果，但相对定位没有此现象） -->
        <div class="box1"></div>
        <div class="box1"></div>
    </div>
    <hr>
    <div class="box00">
        <div class="box11"></div>
        <div class="box22"></div>
        <div class="box33"></div>
        <div class="box44"></div>
    </div>

</body>

</HTML>

View Code

练习

<!DOCTYPE html>
<HTML>

<head>
    <title>学习css</title>
    <meta charset="utf-8">
    <style>
        /* https://element.eleme.cn/#/zh-CN/component/container
        子元素浮动，父元素必须设置高度，否则下面的元素会塌进来 。不设置高度可以用下面2个办法解决
        1、给父元素设置(用的比较多) overflow:hidden
        2、在浮动元素后，添加额外的块级子元素，并设置 clear:both
        */
        .box {
            width: 100%;
            /* height: 86px; */
            background: black;
            /* overflow:hidden */
        }

        .clear {
            clear: both
        }

        .box div {
            width: 100px;
            height: 86px;
            float: left;
            color: white;
            line-height: 86px;
            text-align: center;
        }

        .box div:hover {
            background: #00FFFF;
        }

        .content {
            height: 800px;
            background: rgb(121, 126, 131);
            margin-top: 10px;
        }

        .left {
            width: 200px;
            height: 800px;
            background: rgb(8, 107, 236);
            float: left;
        }

        .right {
            width: 800px;
            height: 800px;
            float: left;
            background: rgb(22, 199, 90);
            margin-left: 10px;
            /* none不显示、block显示 */
            display: block;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="box11">1</div>
        <div class="box22">2</div>
        <div class="box33">3</div>
        <div class="box44">4</div>
        <p class="clear"></p>
    </div>

    <div class="content">
        <div class="left"></div>
        <div class="right"></div>
    </div>

</body>

</HTML>

posted @ 2021-10-23 22:58 whitewall 阅读(92) 评论(0) 收藏举报

刷新页面返回顶部

WhiteWall

前端学习二（css）

公告