python自动化（二）前端基础：2.CSS基础

最新推荐文章于 2022-11-28 11:45:19 发布

new nm个对象

最新推荐文章于 2022-11-28 11:45:19 发布

阅读量224

点赞数 1

分类专栏： python自动化文章标签： css html

本文链接：https://blog.csdn.net/ouyicnm/article/details/116136580

版权

python自动化专栏收录该内容

45 篇文章 105 订阅

订阅专栏

一.CSS简介

CSS我们可以简单的理解为一种用来修饰HTML的层叠样式表。我们项目的前端页面往往是十分美观的，如果使用HTML自带的属性来设置页面的样式（字体，颜色，位置等）会十分麻烦，而CSS就是专门用来设置HTML样式的。
CSS的优点：

减少 HTML 页面体积（CSS 效果是针对多个 HTML 元素是可以复用的
使网页维护简单（样式和 HTML）+
职责明确
美化网页样式

二.CSS的使用

1.CSS的引用方式

css样式的写法有三种：

行内样式
把样式写在标签内部，需要在标签中添加一个属性style，在style中定义样式
内部样式表
在head中定义一个style标签，在这个标签中写当前页面的样式
外部样式表
在html文件外创建.css结尾的文件，在文件中写css样式，引入页面需要使用link标签

行内样式表

在需要引用CSS的标签中，定义一个style标签。在标签内设置key/value。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div style="font-size:30px;color:red;">行内样式表</div>
</body>
</html>

内部样式表

在head中定义一个style标签，在这个标签中写当前页面的样式

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box{
            font-size: 40px;
            color: rgb(0,255,0);
        }
    </style>
</head>
<body>
    <!--内部样式表,定义一个选择器，然后在head标签中使用style标签进行说明-->
    <div class="box">内部样式表</div>
</body>
</html>

外部样式表

在html文件外创建.css结尾的文件，在文件中写css样式，引入页面需要使用link标签

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <!--使用link单标签引入css文件，rel属性默认给值stylesheet，herf标签给文件的路径-->
    <link rel="stylesheet" href="style.css">
</head>
<body>
<!--外部样式表,定义一个选择器，然后在.css文件中进行说明。需要在head标签中，使用link标签将css文件引入-->
<div class="box">外部样式表</div>
<div class="box1">外部样式表</div>
</body>
</html>

2.CSS选择器

一个页面中会有多个标签的样式是一样的，这是我们可以使用选择器来选择所以满足条件的标签来统一设置CSS属性值，提升复用性。

id选择器：
需要在标签上添加 id 属性，给id属性一个变量名<div id='container'></div>，css中通过 #container 找到对应元素，然后可以统一设置样式。
class选择器
需要在标签上添加 class 属性，给class属性一个变量名 <div class='box'></div>，css中通过 .box 找到对应的元素，然后可以统一设置样式。
标签选择器：
直接找标签的名称(div,span,a,p,input)，然后设置样式
通用选择器：* 代表所有
子集选择器：父级>子集(选中父级的下一级的对应标签)
后代选择器：父级后代（选择父级下的所有对应标签，无论是第几代）
举例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <!--使用link单标签引入css文件，rel属性默认给值stylesheet，herf标签给文件的路径-->
    <link rel="stylesheet" href="./style.css">
</head>
<body>
<!--写一个新闻标签-->
<div class="news">
    <ul id="list0">
        <li>
            <h3>猫咪1</h3>
            <img src="./maomi/maimi1.jpg" alt="图片加载失败" class="pic">
            <p>猫咪1简介</p>
            <p>猫咪社</p>
        </li>
        <li>
            <h3>猫咪1.5</h3>
            <img src="./maomi/maomi2.jpg" alt="图片加载失败" class="pic">
            <p>猫咪1.5简介</p>
            <p>猫咪社</p>
        </li>
    </ul>
</div>
<div class="news">
    <ul id="list1">
        <li>
            <h3>猫咪2</h3>
            <img src="./maomi/maomi3.jpg" alt="图片加载失败" class="pic">
            <p>猫咪2简介</p>
            <p>猫咪网</p>
        </li>
    </ul>
</div>
</body>
</html>

/*类选择器*/
.news{
    margin-left: 50px;
}
/*id选择器*/
#list0{
    list-style: none;
}
/* /*后代选择器+id选择器*/
.news #list1{
    list-style: none;
}
/*后代选择器+标签选择器*/
.news #list0 li{
    border-bottom: 3px solid #000;
}
/*子集选择器*/
li>h3{
    display: inline-block;
}
/*通用选择器*/
*{
    margin: 0;
    padding: 0;
}

3.CSS盒模型

盒模型（每一个标签都是盒模型，都可以看成是一个盒子）
盒模型都有以下几个属性：

content : 写入内容的地方
padding：内边距,撑开内容和边框直接的距离
border：边框
margin：外边距
注意：

块级元素、行内-块级元素可以设置宽高，这里设置的宽和高指的是content的宽高
padding/margin/border都是是四个方向上，四个方向上的值可以不同。四个方向：上为top，下为bottom，左为left，右为right。
border由三个属性组成：宽度(border-width)、样式(border-style)、颜色(border-color)
border的简写方式：border:1px(宽度) solid(实线)/dotted(点线)/dashed(虚线) #000(颜色);(三个属性没有顺序要求）例如：border-bottom:3px red solid;（只设置下边框）
padding/margin的简写：
1. 第一种形式：只有一个值，这时四个方向都使用这个值 padding:10px;
2. 第二种形式：两个值，这时上和下10px,左和右是20px; padding:10px 20px;
3. 第三种形式：三个值，这时上10，左右20px，下30px padding:10px 20px 30px;
4. 第四种形式：四个值，上10 ，右20 ，下30，左40 padding:10px 20px 30px 40px;

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        <!--内外边距设置为0，清楚默认的设置-->
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 600px;
            height: 400px;
            border: 1px solid #000;
            margin: 50px auto;
        }
        .first{
            width: 200px;
            height: 100px;
            border: 2px dotted red;
            display: inline-block;
            padding: 20px;
            margin-right: 50px;
        }
        .second{
            width: 200px;
            height: 100px;
            border: 2px dashed blue;
            display: inline-block;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="first">first</div>
        <div class="second">second</div>
    </div>
</body>
</html>

4.CSS字体设置

CSS中设置字体的常用字段如下：

font-family: 设置字体(宋体、微软雅黑)
font-size:字体大小
ont-weight:字体粗细

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        <!--内外边距设置为0，清楚默认的设置-->
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 600px;
            height: 400px;
            border: 1px solid #000;
            margin: 50px auto;
        }
        .first{
            width: 200px;
            height: 100px;
            border: 2px dotted red;
            display: inline-block;
            padding: 20px;
            margin-right: 50px;
            font-family: '宋体';
            font-size: 30px;
            font-weight: bold;
        }
        .second{
            width: 200px;
            height: 100px;
            border: 2px dashed blue;
            display: inline-block;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="first">first</div>
        <div class="second">second</div>
    </div>
</body>
</html>

5.CSS背景设置

CSS设置背景的常用字段如下：

背景颜色：比背景图片更靠近底层。background-color
背景图片：background-image:url(‘图片路径’)
背景图片大小：background-size:x轴方向 y轴方向
背景定位：background-position:x轴方向 y轴方向（默认是从左上角开始定位）
背景重复：background-repeat:no-repeat; repeat-x; repeat-y;

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
            background-color: blue;
            height: 1000px;
        }
        .box{
            background-color: red;
            background-image: url("images/1.jpg");
            height: 300px;
            background-size: 300px 234px;
            background-repeat: no-repeat;
            background-position: 20px 30px;
        }
    </style>
</head>
<body>
    <div class="box">
        汉字
    </div>
</body>
</html>

运行效果如下：
在这里插入图片描述

6.其他小知识点：

宽：width
高：height
行高：line-height
文字对齐效果：text-align:center/left/right
溢出隐藏：overflow:hidden
垂直对齐方式：vertical-align：top/middle/bottom
hover属性：鼠标放上去的效果，鼠标离开后会恢复到原来的效果元素:hover{}

7.浮动

什么是浮动：让元素脱离文档流，“漂”起来。
文档流：前端页面在浏览器中展示时是从左上角开始排练，横向从左到右依次排练行内元素或行内块元素，纵向是从上到下依次排练块级元素。
浮动关键字：float: left / right
浮动后：元素会脱离文档流，"漂"在离它最近的上一个块级元素之后，变成行内-块级元素

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
        <style>
            div{
                border: 1px solid #000;
            }
            .two{
                float: left;
            }
        </style>

</head>
<body>
    <div class="first">first</div>
    <div class="two">two</div>
    <div class="three">three</div>
</body>
</html>

结果如下：

在这里插入图片描述

元素浮动后一个问题：

浮动元素后面元素会受浮动影响，使用浮动后需要清除浮动
清除浮动方案：
	1.添加一个空标签，给空标签设置clear属性 clear:left / right / both
	2.给有浮动的元素添加一个父级元素，然后让父级元素清除浮动(overflow: hidden;)

8.定位

定位关键字：position
定位方式：相对定位、绝对定位、固定定位
相对定位(relative)：是元素本身相对自己的一个偏移量，但不脱离文档流

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            div{
                width: 600px;
                height: 400px;
                border: 1px solid #000;
            }
            .one{
                width: 100px;
                height: 100px;
                border: 1px dotted red;
                /*相对定位*/
                position: relative;
                top: 100px;
            }

        </style>

</head>
<body>
    <div>
        <div class="one">haha</div>
    </div>

</body>
</html>

结果如下：

在这里插入图片描述

绝对定位(absolute)：是元素相当于父级(会有一个相对定位)的一个偏移量，是脱离文档流的

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            .box{
                width: 600px;
                height: 400px;
                border: 1px solid #000;

            }
            .one{
                width: 100px;
                height: 100px;
                border: 1px dotted red;
                float: left;
                /*绝对定位*/
                position: absolute;
                top: 100px;
            }
            .ck{
                width: 100px;
                height: 100px;
                border: 1px dotted red;
                float: left;
            }

        </style>

</head>
<body>
    <div class="box">
        <div class="one">haha</div>
        <div class="ck">参考盒子</div>

    </div>

</body>
</html>

在这里插入图片描述

固定定位(fixed)：相当于浏览器窗口定位，不会随页面滚动发生位置改变，也是脱离文档流的

  定位有四个方向：
  	top:相对顶部的偏移量
  	bottom:相对顶部的偏移量
  	left:相对左边的偏移量
  	right:相对右边的偏移量

new nm个对象

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
python自动化（二）前端基础：2.CSS基础

一.CSS简介CSS我们可以简单的理解为一种用来修饰HTML的层叠样式表。我们项目的前端页面往往是十分美观的，如果使用HTML自带的属性来设置页面的样式（字体，颜色，位置等）会十分麻烦，而CSS就是专门用来设置HTML样式的。CSS的优点：减少 HTML 页面体积（CSS 效果是针对多个 HTML 元素是可以复用的使网页维护简单（样式和 HTML）+职责明确美化网页样式二.CSS的使用1.CSS的引用方式css样式的写法有三种：第一种：行内样式把样式写在标签内部，需要在标签中
复制链接

扫一扫

专栏目录