CSS笔记 —— 美化网页

一纸春秋 2021-10-31 15:19:13 3626

分类专栏：前端文章标签： css 前端伪类

版权

专栏收录该内容

5 篇文章 2 订阅

订阅专栏

本篇博客是根据B站up@遇见狂神说的视频以及W3school官网文档整理的笔记，里面会有一些视频的截图、代码和官网的概念，以及我个人的注释笔记，代码例子等。
全篇博客包括代码均为自己手打，结果截图均为自己运行的结果。
以下是视频链接
https://www.bilibili.com/video/BV1YJ411a7dy?spm_id_from=333.999.0.0
W3school官网链接
https://www.w3school.com.cn/css/index.asp

span标签

使用 < span > 来组合行内元素，以便通过样式来格式化它们
可以将p标签或者段落文字放入span标签中，span标签本身没有效果，可以给span标签加上class和id属性，然后用css修改样式，从而改变span标签里面内容的表现效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*id选择器，突出显示java字样*/
        #title1{
            font-size: 50px;
        }
    </style>

</head>
<body>

我要学习 <span id="title1">java</span>

</body>
</html>

在这里插入图片描述

美化网页的字体样式

这是初始的字体样式

<body>

<h1>大数据</h1>
<p class="p1">
    或称巨量资料，指的是所涉及的资料量规模巨大到无法透过目前主流软件工具，在合理时间内达到撷取、管理、处理、并整理成为帮助企业经营决策更积极目的的资讯
</p>
<p>
    “大数据”是需要新处理模式才能具有更强的决策力、洞察发现力和流程优化能力来适应海量、高增长率和多样化的信息资产。
</p>

<p>
    The strategic significance of big data technology lies not in mastering huge data information, but in the professional processing of these meaningful data.
</p>

</body>

在这里插入图片描述

这是用来修改字体样式的几种属性（更多的属性可以到w3school里面查询）
font-family：字体
font-size: 字体大小
font-weight: 字体粗细
color：字体颜色

<style>
    /*选中body里面的全部标签内容，并修改字体格式*/
    body{
        font-family: 楷体;
    }
</style>

在这里插入图片描述
可以同时修改英语和汉字的字体样式

body{
    font-family:"Arial Black",楷体;
}

h1{
    font-size:50px; 
}

在这里插入图片描述
注意：一个em是一个字的大小，一个px是一个像素的大小

/*类选择器，选中第一段，并修改字体粗细*/
.p1{
    font-weight: bold;
}

在这里插入图片描述

字体颜色
字体颜色有两种值，一种是#d46b25这种RGB格式的数字，一种是单词，比如red，blue等
RGB格式的代码也可以写成color:rgb(0,255,255);的形式

body{
    color: #d46b25;
}

在这里插入图片描述

文本对齐的方式

文字排版，居左，居中，居右

/*文字排版text-align，有三个属性值left，center，right，分别对应左侧，居中，右侧*/
h1{
    text-align:center;
}

在这里插入图片描述
标题h1被移到了页面的中间位置

首行缩进
一个em是一个字的距离

.p1{
    text-indent: 2em;
}

在这里插入图片描述
虽然因为下面是引号的原因，效果看起来不是太明显，但确实是缩进了两个字的距离

.p2{
    /*这里的background是设置这一段文字的背景颜色*/
    background: #71e0b3;
    line-height: 300px;
}

在这里插入图片描述

.c1{
    /*下划线*/
    text-decoration:underline;
}
.c2{
    /*中划线*/
    text-decoration: line-through;
}
.c3{
    /*上划线*/
    text-decoration: overline;
}

在这里插入图片描述
超链接 a标签默认是有下划线的，这里可以去除下划线

a{
    text-decoration: none;
}

文字与图片水平对齐

<head>
    <meta charset="UTF-8">
    <title>Title</title>

<!--    水平对齐，需要有参照物，是两个元素之间水平对齐，所以要一次性选中两个元素-->
    <style>
        img,span{
            vertical-align: middle;
        }
    </style>
</head>

<body>
<p>
    <img src="images/1.png" alt="" height="318" width="532">
    <span>初音的图片</span>
</p>
</body>

在这里插入图片描述

用伪类美化超链接

伪类用于定义元素的特殊状态。

伪类的作用：
设置鼠标悬停在元素上时的样式
为已访问和未访问链接设置不同的样式
设置元素获得焦点时的样式

不同的伪类有着不同的效果
a:link {color:#FF0000;} /* 未访问的链接 /
a:visited {color:#00FF00;} / 已访问的链接 /
a:hover {color:#FF00FF;} / 鼠标划过链接 / 即鼠标放在超链接上时，会变成大括号里设置的color颜色
a:active {color:#0000FF;} / 已选中的链接 */

拿推荐系统开发实战这本书来举例子

<body>

<a href="">
    <img src="images/2.jpg" alt="" height="280" width="210">
</a>
<p>
    <a href="">推荐系统开发实战</a>
</p>
<p>
    <a href="">作者：一位大佬</a>
</p>
<p>
    $999
</p>
</body>

伪类hover，鼠标悬浮在元素上的样子

<style>
    /*使用默认的颜色，并且去除下划线*/
    a{
        text-decoration: none;
        color:#000000;
    }
    /*使用伪类hover，当鼠标悬浮在超链接上时，改变超链接的颜色*/
    a:hover{
        color:orange;
    }
</style>

这是打开网页后的样子
在这里插入图片描述
这是鼠标悬浮在超链接上的样子，超链接的颜色会改变成设定的橘色

伪类active，选中超链接，也就是按住的时候。

/*鼠标按住超链接未释放的状态*/
a:active{
    color:green;
}

就按一下就变绿一下，一直按着就一直是绿色
在这里插入图片描述
除了颜色还可以添加别的效果
加上鼠标悬浮在超链接上面时，超链接字体放大的效果

a:hover{
    color:orange;
    font-size: 50px;
}

在这里插入图片描述

这里没在html里面写css的代码，而是分开写了
这是html中的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
    <link rel="stylesheet" href="css/style1.css" type="text/css" />
</head>
<body>
<h2 class="title">全部商品分类</h2>
<ul>
    <li>
        <a href="#">图书</a>
        <a href="#">音像</a>
        <a href="#">数字商品</a>
    </li>
    <li>
        <a href="#">家用电器</a>
        <a href="#">手机</a>
        <a href="#">数码</a>
    </li>
    <li>
        <a href="#">电脑</a>
        <a href="#">办公</a>
    </li>
    <li>
        <a href="#">家具</a>
        <a href="#">家装</a>
        <a href="#">厨具</a>
    </li>
    <li>
        <a href="#">服饰鞋帽</a>
        <a href="#">个性化妆</a>
    </li>
    <li>
        <a href="#">礼品箱包</a>
        <a href="#">钟表</a>
        <a href="#">珠宝</a>
    </li>
    <li>
        <a href="#">食品饮料</a>
        <a href="#">保健食品</a>
    </li>
    <li>
        <a href="#">彩票</a>
        <a href="#">旅行</a>
        <a href="#">充值</a>
        <a href="#">票务</a>
    </li>
</ul>

</body>
</html>

在这里插入图片描述

修改标题和列表项目

.title{
    font-size:18px;
    font-weight: bold;
    text-indent:1em;
    line-height:35px;
}

/*ul li可以选中整个列表*/
ul li{
    /*设置列表里每一条的高度*/
    height:30px;
    /*去掉列表中每一项前面的圆点*/
    list-style:none;
}

在这里插入图片描述

list-style的作用

/*list-style可以修改列表里面每一项前面的序号
    none:表示去掉序号，也就是去掉无序列表的圆点和有序列表的数字
    circle:将序号替换为空心圆
    decimal：数字
    square：正方形
*/
ul li{
    /*设置列表里每一条的高度*/
    height:30px;
    /*将序号替换为空心圆*/
    list-style:circle;
}

在这里插入图片描述

继续修改，修改颜色，超链接等

.title{
    font-size:18px;
    font-weight: bold;
    text-indent:1em;
    line-height:35px;
    background: #42e7b1;
}

/*ul li可以选中整个列表*/
/*list-style可以修改列表里面每一项前面的序号
    none:表示去掉序号，也就是去掉无序列表的圆点和有序列表的数字
    circle:将序号替换为空心圆
    decimal：数字
    square：正方形
*/
/*改变列表的背景色*/
ul{
    background:#71e0b3;
}

ul li{
    /*设置列表里每一条的高度*/
    height:30px;
    /*去掉列表中每一项前面的圆点*/
    list-style:none;
    /*加上首行缩进*/
    text-indent:2em;
}

a{
    /*去掉下划线*/
    text-decoration:none;
    font-size:14px;
    color:#000000;
}

a:hover{
    /*鼠标放在超链接上时的颜色*/
    color:orange;
    /*鼠标放在超链接上时加上下划线*/
    text-decoration:underline;
}

在这里插入图片描述

使用div标签
< div >是一个块级元素，可以将不同的元素放在一个div中，作为一个组合。比如将新闻的标题和摘要放在一个div里面。这样同一个新闻的标题和摘要在一个div里面，而另一个新闻的标题和摘要在另一个div里面
< div > 可定义文档中的分区或节
< div > 标签可以把文档分割为独立的、不同的部分。
可以给div添加class和id属性，方便对整个div进行操作

<div class="news">
  <h2>News headline 1</h2>
  <p>some text. some text. some text...</p>
 </div>

 <div class="news">
  <h2>News headline 2</h2>
  <p>some text. some text. some text...</p>
 </div>

这样像上面代码示例一样，修改一下html的代码

<div id="nav">
    <h2 class="title">全部商品分类</h2>
    <ul>
        <li>
            <a href="#">图书</a><a href="#">音像</a><a href="#">数字商品</a>
        </li>
        <li>
            <a href="#">家用电器</a><a href="#">手机</a><a href="#">数码</a>
        </li>
        <li>
            <a href="#">电脑</a><a href="#">办公</a>
        </li>
        <li>
            <a href="#">家具</a><a href="#">家装</a><a href="#">厨具</a>
        </li>
        <li>
            <a href="#">服饰鞋帽</a><a href="#">个性化妆</a>
        </li>
        <li>
            <a href="#">礼品箱包</a><a href="#">钟表</a><a href="#">珠宝</a>
        </li>
        <li>
            <a href="#">食品饮料</a><a href="#">保健食品</a>
        </li>
        <li>
            <a href="#">彩票</a><a href="#">旅行</a><a href="#">充值</a><a href="#">票务</a>
        </li>
    </ul>
</div>

将上一项的css代码修改一下，在最前面的位置加上这一段

/*id选择器*/
#nav{
    width:300px;
    background: #71e0b3;
}

注意这里的background是div的背景色，这个背景色在所有的元素的背景色的下面
这里标题和表格项中的间隔颜色和表格项的颜色一样，所以做出了这个表格是一整个表格的效果
在这里插入图片描述
现在改一下div的background的颜色

#nav{
    width:300px;
    background: #4c94ff;
}

在这里插入图片描述
很明显，div的背景色是在最下面

CSS笔记 —— 美化网页

CSS笔记 —— 美化网页

用伪类美化超链接

Recommend

我用Python爬虫爬取并分析了C站前100用户最高访问的2000篇文章

Creating A Magento PWA: Customizing Themes vs. Coding From Scratch

她用金属丝和纸张创作动物雕塑，传播环保理念，人们看了羞愧不已

给大家推荐两个国内超赞的视觉设计工作室吧！

结构光三维重建Projector-Camera Calibration投影仪相机标定

这个自动保护罩，简直是梦寐以求啊

产品小白收藏篇！关于农产品网络营销分析（八）

世界第一部AI创作的恐怖片，网友看完笑了

该文章已经被删除

交互设计思路：积分模块改版总结（上）

About Joyk