CSS笔记 —— 美化网页
本篇博客是根据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标签
使用 < span > 来组合行内元素，以便通过样式来格式化它们
可以将p标签或者段落文字放入span标签中，span标签本身没有效果，可以给span标签加上class和id属性，然后用css修改样式，从而改变span标签里面内容的表现效果
"en">
"UTF-8">
Title
我要学习 "title1">java
美化网页的字体样式
这是初始的字体样式
大数据
"p1">
或称巨量资料，指的是所涉及的资料量规模巨大到无法透过目前主流软件工具，在合理时间内达到撷取、管理、处理、并整理成为帮助企业经营决策更积极目的的资讯
“大数据”是需要新处理模式才能具有更强的决策力、洞察发现力和流程优化能力来适应海量、高增长率和多样化的信息资产。
The strategic significance of big data technology lies not in mastering huge data information, but in the professional processing of these meaningful data.
这是用来修改字体样式的几种属性（更多的属性可以到w3school里面查询）
font-family：字体
font-size: 字体大小
font-weight: 字体粗细
color：字体颜色
- 字体格式
可以同时修改英语和汉字的字体样式
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;
}
- 文字与图片水平对齐
Title
"images/1.png"
alt="" height="318" width="532">
初音的图片
用伪类美化超链接
伪类用于定义元素的特殊状态。
伪类的作用：
设置鼠标悬停在元素上时的样式
为已访问和未访问链接设置不同的样式
设置元素获得焦点时的样式
不同的伪类有着不同的效果
a:link {color:#FF0000;} /* 未访问的链接 /
a:visited {color:#00FF00;} / 已访问的链接 /
a:hover {color:#FF00FF;} / 鼠标划过链接 / 即鼠标放在超链接上时，会变成大括号里设置的color颜色
a:active {color:#0000FF;} / 已选中的链接 */
拿推荐系统开发实战这本书来举例子
"">
"images/2.jpg" alt="" height="280" width="210">
$999
- 伪类hover，鼠标悬浮在元素上的样子
这是打开网页后的样子
这是鼠标悬浮在超链接上的样子，超链接的颜色会改变成设定的橘色
- 伪类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进行操作
"news">
News headline 1
some text. some text. some text...
"news">
News headline 2
some text. some text. some text...
这样像上面代码示例一样，修改一下html的代码
将上一项的css代码修改一下，在最前面的位置加上这一段
/*id选择器*/
#nav{
width:300px;
background: #71e0b3;
}
注意这里的background是div的背景色，这个背景色在所有的元素的背景色的下面
这里标题和表格项中的间隔颜色和表格项的颜色一样，所以做出了这个表格是一整个表格的效果
现在改一下div的background的颜色
#nav{
width:300px;
background: #4c94ff;
}
很明显，div的背景色是在最下面