HTML5教程

第一章 爬虫基础-前端CSS 2021-09-03

本文主要是介绍第一章 爬虫基础-前端CSS 2021-09-03,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

爬虫基础系列文章

介绍爬虫基础知识,包括网络,前端界面HTML,CSS, JS 等。
第一章 爬虫基础-网络传输协议 2021-09-03
第一章 爬虫基础-前端HTML 2021-09-03


前端CSS

  • 爬虫基础系列文章
  • 前言
  • 1 CSS是什么
  • 2 CSS四种引入样式
    • 2.1 行内样式(内联式)
    • 2.2 其余3种样式
  • 3 CSS文本属性
    • 3.1 CSS常用的文本样式
    • 3.2 CSS 颜色表示
  • 4 CSS选择器
    • 4.1 ID、标签、类选择器
    • 4.2 层级选择器
    • 4.3 伪类、伪元素选择器
  • 5 盒子模型
    • 5.1 盒子相关设置
  • 6 backgroud属性
  • 7 CSS元素溢出
    • 7.1 overflow参数:
  • 8 浮动
    • 8.1浮动特点:

前言

重点掌握:
1、掌握CSS中的各种选择器
2、熟悉CSS基础样式

1 CSS是什么

CSS是一种用来表现**HTML文件样式**的语言。CSS不仅可 以静态地修饰网页,还可以配合各种脚本语言动态地对 网页各元素进行格式化。CSS 能够对网页中元素位置的 排版进行像素级精确控制,支持几乎所有的字体字号样 式,拥有对网页对象和模型样式编辑的能力。

2 CSS四种引入样式

基本用法: 选择器 { 属性:值 }

2.1 行内样式(内联式)

在标签内使用style属性指定css代码,只能改变当前标签的样式。不能批量对某个标签生效。

<div style="color:red;">hello css</div>

2.2 其余3种样式

  • 嵌入式:直接在html标签中的head的style属性写上样式 “属性1:值1;属性2: 值2;…”。 仅对当前页面生效。
  • 外联式: 也可通过link标签,链接外部样式到页面中, 此为外联式, 所有的CSS 代码存在CSS文件中,便于维护,这个最常用 。 通过link 的
  • 导入样式: import 是CSS 的写法, CSS2.1出现的概念, 存在一定的兼容性。
Title

3 CSS文本属性

3.1 CSS常用的文本样式

  • color 设置文字的颜色,如: color:yellow;

  • font-size 设置文字的大小,如:font-size:15px;

  • font-family 设置文字的字体,如:font-family:‘微软雅黑’;

  • font-style 设置字体是否倾斜,如:font- style:‘normal’; 设置不倾斜,默认设置; font- style:‘italic’;设置文字倾斜

  • font-weight 设置文字是否加粗,如:font- weight:bold; 设置加粗 ; font-weight:normal 设置不加粗

  • line-height 设置文字的行高,设置行高相当于在每行文 字的上下同时加间距, 如:line-height:24px; 注意是本行文字的底部到下一行文字的底部算完整的行高

  • font: 同时设置文字的几个属性,建议按照如下顺序写: 是否加粗 字号/行高 字体;如: font:normal 24px/48px ‘宋体’;

  • text-decoration 设置文字的下划线,如:text- decoration:none; 将文字下划线去掉

  • text-indent 设置文字首行缩进,如:text- indent:24px; 设置文字首行缩进24px

  • text-align 设置文字水平对齐方式,如text- align:center 设置文字水平居中;

3.2 CSS 颜色表示

  • 颜色英文名字表示,比如:green 绿色,red 红色
  • rgb三原色表示,比如:rgb(0,0,0) 黑色, rbg(0,0,255) 蓝色
  • 16进制数值表示,比如: #00FF00 绿色,#FFFF00 黄色

4 CSS选择器

4.1 ID、标签、类选择器

过id名来选择元素,元素的id名称不能重复,所以使 用id作为选择器只能对应一个页面上的元素,不能服 用。id一般来说是给程序使用,不推荐作为CSS选择器使 用。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*标签选择器*/
        div { color: blue;}

        /*id 选择器*/
        #box1 {color: red;}

        /*类选择器*/
        .b {color: blue}
        .r {color: red;
            font-size: 36px}
    </style>
</head>
<body>
<div id="box">1</div>
<div id="box1">2</div>
<p class="b">字体为蓝色</p>
<p class="r">字体为?色</p>
<!-- 当多个类选择器同事修改一个标签的属性时, 会选择CSS样式中类选择器中的最后一个-->
<p class="r b">你猜我是什么颜色</p>
</body>

4.2 层级选择器

层级选择器主要是用来选择父元素下的子元素,或者子元素下的子元素,可以和标签元素结合使用,减少命名,也可以通过层级,防止命名冲突。综合使用以上三种选择器, .box1 p{color: gold;} box 下的 p 标签。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    p{color: red;}
    .box1 p{color: gold;}
  </style>
</head>
<body>
<div class="box1">
  <p>我是box1中的P标签</p>
</div>
<p>我是单独的外部的P标签</p>
<div class="box2">
  <p>P标签</p>
</div>
</body>

4.3 伪类、伪元素选择器

  • 常用的伪类选择器 hover:设置当鼠标悬浮在元素上的时候的状态
  • 伪元素选择器before和after:通过样式往标签中插入内容
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    .a{color: blue}
    .a:hover{
      color: red;
    }
    .b:before{
      content: "插入在前";
    }
    .c:after{
      content: "插入在后";
    }
  </style>
</head>
<body>
<p class="a">悬浮以后颜色变红色</p>
<p class="b">before</p>
<p class="c">after</p>
</body>

代码效果呈现:
在这里插入图片描述

5 盒子模型

CSS盒模型本质上是一个盒子,封装周围的HTML元素,盒子模型允许我们在其它元素和周围元素边框之间的空间放置元素。
设置对应的样式分别为:

  • 盒子的宽度(width)
  • 盒子的高度(height)
  • 盒子内的内容和边框之间的间距(padding)
  • 盒子的边框(border)
  • 盒子与盒子之间的间距(margin)。

盒子模型
盒子的真实大小是:
盒子宽度 = width + padding左右 + border左右
盒子高度 = height + padding上下 + border上下

5.1 盒子相关设置

设置宽高(width,height):不是整个盒子的宽度、高度,指的内容的的宽度、高度。
设置内间距padding, padding同样可以指定设置某一个边,但是也可以全部都设置,

            border-top-color: blue; /*设置顶部边框 的颜色为蓝色*/
            border-top-width: 10px; /*设置顶部边框 线条粗细为10px*/
            /*常用的有solid(实线) dashed(虚线) dotted(点线)*/
            border-top-style: solid; /*设置顶部边 框线条为实线*/
            border-top: blue 10px solid; /*三个顺序可以变 换*/
            border: blue 10px solid; /*四个边设置的一样可以直接*/
         compadding-top:30px; /* 设置顶部内间距为30px */
         padding-left: 30px; /* 设置左边内间距为30px */
         padding-right: 50px; /* 设置右边内间距为50px */
         padding-bottom: 50px; /* 设置底部内间距为50px; */
         
         /*padding的4个值是有特定位置的,按照顺时针的方向设置,分别是 上、右、下、左*/
         padding: 30px 50px 50px 30px;

         /*3个值*/ /*设置顶部内边距为30px,左右内边距为50px,底部内边距为30px*/
         padding: 30px 50px 30px;
         /*2个值*/ /*设置上下内边距为30px,左右内边距为50px*/
         padding: 30px 50px;
         /*一个值*/ /*设置四边内边距都为30px */
         padding: 30px;

在这里插入图片描述
功能实现:

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box1{
            width: 556px;
            height: 556px;
            border: 2px red solid;
            padding-left: 20px;
            padding-right: 20px;
        }
        .title{
            border-bottom: 2px  red solid;
            padding: 0;
            line-height: 48px;
        }
        ul{
            padding: 0;
        }
        li{
            list-style: none;
        }
        .s{
            margin-bottom: 14px;
            height: 14px;
            line-height: 14px;
            border-bottom: 1px dashed black;
        }
    </style>
</head>
<body>
<div class="box1">
    <div class="title">科技滚动新闻</div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <li class="s"></li>
    </ul>
</div>

6 backgroud属性

background属性是css中应用比较多,且比较重要的一个属性,它是负责给盒子设置背景图片和背景颜色的。background可以分解为以下几个选项:

  • background-color 设置背景颜色
  • background-image 设置背景图片地址
  • background-repeat 设置背景图片如何重复平铺
  • background-position 设置背景图片的位置
  • background-attachment 设置背景图片是固定还是随着页面滚动条滚动
    而在实际工作中,会将上面的几个合并到一起来写,而且基本上都是这么来用的,这样做的性能会更好,兼容性也会更高。
   <style>
       div {
           width: 800px;
           height: 800px;
           background: red url('img.png')  center fixed;
           /*“red”设置background-color;
           “url(bg.jpg)”是设置background-image;
           “no-repeat”是设置background-repeat;
           “left center”是设置background-position;
           “fixed”是设置background-attachment 每个设置之间用空格隔开,
           不需要设置的可以不写,不写的 会使用默认值。 */
       }
   </style>

7 CSS元素溢出

当子元素所需大小超过了父元素的大小时,就会出现元素溢出的现象,此时就需要通过设置父元素的显示溢出元素的属性overflow来进行解决。

7.1 overflow参数:

  • visible 默认值。不对溢出的元素做任何处理,直接呈现在元素框之外
  • hidden 溢出元素会被修剪,溢出的部分不可见,此参数还可以清除浮动
  • scroll 将隐藏所有溢出的内容并使滚动条出现在相关元素上。如果内容没有溢出,滚动条仍然可见,但被禁用。
  • auto 和scroll非常相似,但滚动条仅在内容溢出时出现
  • inherit 从父元素继承overflow属性的值
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    div{
      width: 60px;
      height: 120px;
      border: 2px black solid;
      overflow: auto;
    }
  </style>
</head>
<body>
<div>
  <p>当子元素所需大小超过了父元素的大小</p>
</div>

8 浮动

实现下图效果需要使用到浮动。不设置浮动,会出现什么情况。
在这里插入图片描述

8.1浮动特点:

  • 浮动元素有左浮动(**float:left;)**和右浮动(float:right;)两种
  • 浮动的元素会向左或向右浮动,碰到父元素边界或其他元素才停下来
  • 相邻浮动的块元素可以并在一行,如果超出父级元素宽度就自动换行
  • 浮动元素后面没有浮动的元素会占据浮动元素的位置,没有浮动的元素内的文字会避开浮动的元素,形成文字饶图的效果
  • 父元素如果没有设置尺寸(一般是不设置height),父元素内整体浮动的元素无法撑开父元素时,需要清除父元素浮动。
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    .box1{
      width: 500px;
      height: 140px;
      border: 2px black solid;
    }
    .box2{
      width: 100px;
      height: 100px;
      border: 1px red solid;
      margin: 20px;
      float: left;
    }
    .box3{
      width: 100px;
      height: 100px;
      border: 1px red solid;
      margin: 20px;
      float: right;
    }
  </style>
</head>
<body>
<div class="box1">
  <div class="box2"></div>
  <div class="box3"></div>
</div>
这篇关于第一章 爬虫基础-前端CSS 2021-09-03的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!