python自动化(二)前端基础:2.CSS基础

一.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。


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

内部样式表

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


<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>title>
    <style>
        .box{
      
            font-size: 40px;
            color: rgb(0,255,0);
        }
    style>
head>
<body>
    
    <div class="box">内部样式表div>
body>
html>

外部样式表

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


<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>title>
    
    <link rel="stylesheet" href="style.css">
head>
<body>

<div class="box">外部样式表div>
<div class="box1">外部样式表div>
body>
html>

2.CSS选择器

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

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

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>title>
    
    <link rel="stylesheet" href="./style.css">
head>
<body>

<div class="news">
    <ul id="list0">
        <li>
            <h3>猫咪1h3>
            <img src="./maomi/maimi1.jpg" alt="图片加载失败" class="pic">
            <p>猫咪1简介p>
            <p>猫咪社p>
        li>
        <li>
            <h3>猫咪1.5h3>
            <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>猫咪2h3>
            <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:外边距
    注意:
  1. 块级元素、行内-块级元素可以设置宽高,这里设置的宽和高指的是content的宽高

  2. padding/margin/border都是是四个方向上,四个方向上的值可以不同。四个方向:上为top,下为bottom,左为left,右为right

  3. border由三个属性组成:宽度(border-width)、样式(border-style)、颜色(border-color)

  4. border的简写方式:border:1px(宽度) solid(实线)/dotted(点线)/dashed(虚线) #000(颜色);(三个属性没有顺序要求)例如:border-bottom:3px red solid;(只设置下边框)

  5. 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;

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>title>
    <style>
        
        *{
      
            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">firstdiv>
        <div class="second">seconddiv>
    div>
body>
html>

4.CSS字体设置

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

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



    
    
    


    
"box">
"first">first
"second">second

5.CSS背景设置

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

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



    
    
    


    
"box"> 汉字

运行效果如下:
python自动化(二)前端基础:2.CSS基础_第1张图片

6.其他小知识点:

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

7.浮动

  • 什么是浮动:让元素脱离文档流,“漂”起来。

  • 文档流:前端页面在浏览器中展示时是从左上角开始排练,横向从左到右依次排练行内元素或行内块元素,纵向是从上到下依次排练块级元素。

  • 浮动关键字:float: left / right

  • 浮动后:元素会脱离文档流,"漂"在离它最近的上一个块级元素之后,变成行内-块级元素


<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">firstdiv>
    <div class="two">twodiv>
    <div class="three">threediv>
body>
html>

结果如下:

python自动化(二)前端基础:2.CSS基础_第2张图片

元素浮动后一个问题:

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

8.定位

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

<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">hahadiv>
    div>

body>
html>

结果如下:

python自动化(二)前端基础:2.CSS基础_第3张图片

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

<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">hahadiv>
        <div class="ck">参考盒子div>

    div>

body>
html>

python自动化(二)前端基础:2.CSS基础_第4张图片

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

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

你可能感兴趣的:(python自动化,css,html)