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

2021/9/3 23:08:49

编程Tag： 选择器 css 元素设置 border padding 2021 03 09

本文主要是介绍第一章爬虫基础-前端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的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

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