海量数据预处理实战----CSS网页样式

最新推荐文章于 2024-05-22 16:28:54 发布

坞吾5雾

最新推荐文章于 2024-05-22 16:28:54 发布

阅读量413

点赞数 1

分类专栏：海量数据预处理实训文章标签： css 前端 html

本文链接：https://blog.youkuaiyun.com/m0_64139004/article/details/128105531

版权

海量数据预处理实训专栏收录该内容

2 篇文章

订阅专栏

CSS 盒子模型(Box Model)尺寸

DIV盒子模型

CSS网页样式——选择器

实验目的

了解CSS的作用
掌握CSS引入的几种方式和优先级
掌握CSS基本选择器

实验原理

概念：CSS 指层叠样式表 (Cascading Style Sheets)，是一种用来表现HTML的计算机语言，样式定义如何显示 HTML 元素， CSS可以将样式定义在HTML元素的style属性中，也可以将其定义在HTML文档header部分，也可以将样式声明在一个专门的CSS文件中，以供HTML页面引用。通常存储在外部样式表中，即CSS 文件中，外部样式表可以极大提高工作效率。

后缀：通常用.css作为文件扩展名

选择器：CSS给html页面设置样式，主要通过选择器来完成，选择器由两个主要的部分构成：选择器以及一条或多条声明，如下图所示：

选择器通常是您需要改变样式的 HTML 元素，每条声明由一个属性和一个值组成，属性是希望设置的样式，每个属性有一个值，属性和值用冒号分开。常用的三种基本选择器有标签选择器、ID选择器、类选择器

标签选择器：通过标签名选中html元素，如 p{color:"red"}
ID选择器：ID选择器可以为标有特定 id 的 HTML 元素指定特定的样式，CSS 中 id 选择器以 "#" 来定义。注意：ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。
CLASS选择器：CLASS选择器用于描述一组元素的样式，class可以在多个元素中使用，CSS中类选择器以一个点"."号显示。

插入样式表：将样式表插入html页面中有以下几种方式:

外部样式表(External style sheet) ：每个页面使用 <link> 标签链接到样式表。 <link> 标签在（文档的）头部：<link rel="stylesheet" type="text/css" href="mystyle.css">
内部样式表(Internal style sheet) ：可以使用 <style> 标签在文档头部定义内部样式表

<style>

p {color:sienna;}

</style>

内联样式(Inline style)：定义在html标签内，此时，style可以看做标签的属性

<p >这是一个段落。</p>

CSS 注释： 注释是用来解释代码的，浏览器会忽略它，CSS注释以 "/*" 开始, 以 "*/" 结束

实验步骤

1.创建一个html文件

2.在body标签搭建页面

<body> 
    <p>我是标签选择器</p> 
    <h1>我是id选择器</h1> 
    <h2>我是类选择器</h2> 
</body>

3.在cssdemo1.html中编写css样式代码，在head标签中输入style，然后按Tab键快速生成style标签。给p标签设置字体颜色为红色，通过标签选择器选中p标签中的元素

p{ color: mediumvioletred; }

标签选择器只要在style标签中定义就可以生效

4.给h1标签中的内容设置背景色为绿色，通过id选择器选中元素

<h1 id="h1">我是id选择器</h1>

需在HTML中为标签添加id选择器，才可生效，即id="ID名"

5.给h2标签中的内容设置背景色为蓝色，通过类选择器选中元素

<h2 class="h2">我是类选择器</h2>

用法与id选择器基本相同

6.在body中添加内容，“百校工程，瑞翼教育”，需要将“百校工程”突出重点，用span标签包裹。

<p><span>百校工程</span>，瑞翼教育</p> 
<h1>人生苦短，我学<span>python</span></h1>

7.在style标签中添加样式

p span{ 
/* 后代选择器*/ 
    font-size: 30px; 
    color:yellow; 
}

以上属于后代选择器，由于浏览器解析html页面的时候，会将整个页面绘制成一个dom树，span相对于p来说，属于他的子标签，所以叫后代选择器。

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器</title>
    <style type="text/css">
        p{
            color: red;
        }
        #h1{
            background: yellow;
        }
        .h2{
            background: purple;
        }
       p span{   /* 后代选择器*/
            font-size: 30px;
            color:green;
        }
    </style>
</head>
<body>
    <p>我是标签选择器</p>
    <h1 id="h1">我是id选择器</h1>
    <h2 class="h2">我是类选择器</h2>
    <p><span>百校工程</span>985工程</p>
    <h1>人生苦短，我学<span>python</span></h1>
</body>
</html>

CSS引入方式和优先级

插入样式表的方法有三种:外链式(link) 、内嵌式(style标签）、行内式(style属性)

8.新建一个html文件，在body中给p标签设置行内样式

<body>  
<p style="color:red;margin-left:20px">这是一个段落。</p>  
</body>

9.在head中添加style标签，构建内嵌式css，给p标签设置属性

<style type="text/css"> 
    p{ 
        color: blue; 
    } 
</style>

总结：我们发现在行内式中设置颜色属性为red，内嵌式颜色属性为blue，外链式属性为green，最终生效的是行内式，如果把行内式注释掉，绿色生效，所以综上所述

行内样式 > 内嵌样式 > 外部样式
ID选择器 > 类选择 > 标签选择器

在同一选择器中，两条声明相同，后一条声明会覆盖前一条声明

实验总结

了解了CSS的作用，学习了CSS引入的几种方式和优先级，完成了CSS基本选择器。

CSS网页样式——常用样式

实验目的

了解CSS的作用
掌握常用的css样式（文本、文字、背景等）

实验原理

CSS网页样式是用来给html页面加入一定的效果，让其看起来更加美观。

常用的样式有以下几个：

1.文本样式

颜色：颜色属性被用来设置文字的颜色，通常有三种写法

十六进制值 - 如: ＃FF0000
一个RGB值 - 如: RGB(255,0,0)
颜色的名称 - 如: red

对齐方式 ：文本排列属性是用来设置文本的水平对齐方式，文本可居中或对齐到左或右,两端对齐.

{text-align:center;} 文本居中
{text-align:right;} 文本右对齐，left为左对齐
{text-align:justify;}每一行被展开为宽度相等，左，右外边距是对齐

文本修饰：text-decoration 属性用来设置或删除文本的装饰。

{text-decoration:overline;}
{text-decoration:line-through;}
{text-decoration:underline;}

文本缩进：文本缩进属性是用来指定文本的第一行的缩进。

{text-indent:50px;}

2.文字样式

font 在一个声明中设置所有的字体属性
font-family 指定文本的字体系列
font-size 指定文本的字体大小
font-style 指定文本的字体样式
font-variant 以小型大写字体或者正常字体显示文本
font-weight 指定字体的粗细

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        p{
            text-align: left;  /*左对齐*/
            text-decoration: underline;  /*下划线*/
            color:#00ff00;   /*字体颜色*/
            text-indent:50px;   /*缩进*/
            line-height: 40px;  /*行高*/
            font-style:italic; /*文字倾斜*/
            font-family:"Times New Roman"; /*字体*/
            font-size:30px; /*文字大小*/
            background: yellow; /*背景色*/
        }
 </style>
</head>
<body>
<p>Bootstrap is an open source toolkit for developing with HTML, CSS, and JS.</p>
<p>Quickly prototype your ideas or build your entire app with our Sass variables and mixins,</p>
<p>responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery</p>
</body>
</html>

3.链接样式

可以通过css装饰，超链接通常有以下四种状态

a:link - 正常，未访问过的链接

a:visited - 用户已访问过的链接

a:hover - 当用户鼠标放在链接上时

a:active - 链接被点击的那一刻

设置为若干链路状态的样式，也有一些顺序规则：

a:hover 必须跟在 a:link 和 a:visited后面，a:active 必须跟在 a:hover后面

4.列表属性

list-style 简写属性。用于把所有用于列表的属性设置于一个声明中
list-style-image 将图象设置为列表项标志。
list-style-position 设置列表中列表项标志的位置。
list-style-type 设置列表项标志的类型。

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        ul{
            list-style-type: none; /*将ul的样式设置为none*/
            width: 200px; /*将ul的宽度设置为200px*/
        }
        hr{
            color: lightgrey;  /*给hr设置颜色*/
        }
    </style>
</head>
<body>
<ul>
    <li id="d1">&nbsp;&nbsp;数码家电</li>
    <hr>
    <li id="d2">&nbsp;&nbsp;美容美妆</li>
    <hr>
    <li id="d3">&nbsp;&nbsp;食品保健</li>
    <hr>
    <li id="d4">&nbsp;&nbsp;演出旅行</li>
    <hr>
    <li id="d5">&nbsp;&nbsp;男女服装</li>
    <hr>
    <li id="d6">&nbsp;&nbsp;鞋包服饰</li>
</ul>
</body>
</html>

5.背景属性

background 简写属性，作用是将背景属性设置在一个声明中。
background-attachment 背景图像是否固定或者随着页面的其余部分滚动。
background-color 设置元素的背景颜色。
background-image 把图像设置为背景。
background-position 设置背景图像的起始位置。
background-repeat 设置背景图像是否及如何重复

超链接样式例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        ul{
            list-style-type: none;  /* 去掉列表默认的圆点*/
        }
        li{
            display: inline;  /* 让li呈一行显示*/
        }
        a{
            text-decoration: none;  /* 去掉a标签自带的下划线*/
        }
        a:link {color:red;}      /* 未访问链接*/
        a:visited {color:#00FF00;}  /* 已访问链接 */
        a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */
        a:active {color:#0000FF;}  /* 鼠标点击时 *
    </style>
</head>
<body>
<ul>
    <li><a href="https://miaosha.jd.com/" target="_blank">秒杀</a> </li>
    <li><a href="https://a.jd.com/">优惠券</a> </li>
    <li><a href="">PLUS会员杀</a> </li>
    <li><a href="">闪购</a> </li>
    <li><a href="">拍卖</a> </li>
    <li><a href="">京东服饰</a> </li>
</ul>
</body>
</html>

CSS网页样式——DIV盒子模型

实验目的

掌握盒子模型概念
掌握div盒子模型的原理和用法
掌握盒子模型的属性

实验原理

CSS 盒子模型(Box Model)

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素，平面图如下所示：

Margin(外边距) -盒子以外或者盒子和盒子之间的距离，外边距是透明的。
Border(边框) - 盒子厚度。
Padding(内边距) - 内容和盒子之间的距离。
Content(内容) - 盒子的内容，显示文本和图像。

说明：

1.元素框的最内部分（element）是实际的内容，有宽（width）和高（height）两个属性，直接包围内容的是内边距（padding）。内边距呈现了元素的背景，内边距的边缘是边框（border），边框是可以有厚度的。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素

2.内边距、边框和外边距都是可选的，默认值是零。可以通过将元素的 margin 和 padding 设置为零来覆盖浏览器样式，可以分别进行，也可以使用全局选择器对所有元素进行设置：

* {

margin: 0;

padding: 0;

}

3.盒子模型属性（margin、padding、border）顺时针分为：上右下左4个方向，3个属性都可以分别设置各个方向属性值，也可以同时设置4个方向属性值，3个属性都占据空间

CSS 盒子模型(Box Model)尺寸

在 CSS 中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。假设框的每个边上有 10 个像素的外边距和 5 个像素的内边距。如果希望这个元素框达到 100 个像素，就需要将内容的宽度设置为 70 像素，请看下图：

#box {

        width: 70px;

        margin: 10px;

        padding: 5px;

}

内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边，而且外边距可以是负值，而且在很多情况下都要使用负值的外边距。

DIV盒子模型

<div> 元素常用作布局工具，和css盒子模型结合用来构建网页整体布局

一、CSS 边框属性border

CSS允许指定一个元素边框的样式和颜色

border-style属性用来定义边框的样式。border-style 值:none: 默认无边框；dotted: 定义一个点线边框；dashed: 定义一个虚线边框；solid: 定义实线边框
border-width 属性为边框指定宽度。为边框指定宽度有两种方法：可以指定长度值，比如 2px 或1em(单位为 px, pt, cm, em 等)，或者使用 3 个关键字之一，它们分别是 thick 、medium（默认值）和 thin。
border-color属性用于设置边框的颜色。可以设置的颜色：name - 指定颜色的名称，如 "red"；RGB - 指定 RGB 值，如 "rgb(252,450,9)"；Hex - 指定16进制值, 如 "#ff0000"
可以在一个属性中设置边框：border:5px solid red；

注意： border-color单独使用是不起作用的，必须先使用border-style来设置边框样式。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>边框</title>
<style>
p.p1{
     border-style:none;
     border-width:5px;
     border-color:red;
    }
p.p2{
    border-style:dotted;
    border-width:6px;
    border-color:#98bf21;
    }
p.p3{
    border-style:dashed;
    border-width:4px;
    border-color:rgb(252,450,9);
    }
p.p4{
    border:medium solid pink;
    }
</style>
</head>
<body>
    <p class="p1">无边框。</p>
    <p class="p2">虚线边框。</p>
    <p class="p3">虚线边框。</p>
    <p class="p4">实线边框。</p>
</body>
</html>

二、padding（内边距）和margin

CSS padding（填充）是一个简写属性，定义元素边框与元素内容之间的空间，即上下左右的内边距，具体如下所示：

当然也可以简写：padding:25px 50px；表示上下填充为25px ，左右填充为50px

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Title</title>  
    <style type="text/css">  
        *{  
            padding: 0;  
            margin: 0;  
        }  
        .box{  
            width: 800px;  
            height: 400px;  
            border: 5px solid red;  
        }  
        .box1{  
            /* 设置背景*/  
            background: pink;  
            /*设置padding*/  
            padding-top:25px;  
            padding-bottom:25px;  
            padding-right:50px;  
            padding-left:50px;  
            /*设置宽高*/  
            width: 200px;  
            height: 150px;  
            /*设置margin*/  
            margin-top:100px;  
            margin-bottom:100px;  
            margin-right:50px;  
            margin-left:50px;  
            /*让box1左浮动*/  
            float: left;  
        }  
  
        .box2{  
            /* 设置背景*/  
            background: deeppink;  
            /*设置padding,上下20px，左右20px*/  
            padding: 20px 20px;  
            /*设置宽高*/  
            width: 200px;  
            height: 150px;  
             /*设置margin*/  
            margin:100px 50px;  
             /*让box2左浮动，box2会浮动在box1的右边*/  
            float: left;  
        }  
  
    </style>  
</head>  
<body>  
<div class="box">  
    <div class="box1">  
        I am is box1  
    </div>  
    <div class="box2">  
         I am is box2  
    </div>  
</div>  
</body>  
</html>