CSS概述
使用HTML写前端展示数据时，写出来的原型是很不好看的，因此，我们利用的CSS来改变样式，使其整洁好看
1.首先，我们要知道，html的初始样子是咋样的
2.那我们的CSS写在哪儿呢？哎！有三种
①在内部写（不推荐，因为为了可复用，我们一般用第二种）
②在外部写，我们一般建立个css包用来存放css样式资源
第三个不常用，就算了。。。
那么我们开始吧
在style中怎么去改变我们的样式
字体样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*font-family: 字体*/
/*font-size: 字号大小*/
/*font-weight: 粗细*/
body{
font-family: 华文隶书;
}
h1{
font-size: 50px;
text-align: center;
}
.p1{
font-size: 30px;
font-weight: bold;
color: #9900ff;
}
</style>
</head>
<body>
<h1>介绍</h1>
<p class="p1">
1. 谓众介并列，相继传话。古代传递宾主之言者称介。绍，继，接续。
《礼记·聘义》：“介绍而传命。” 汉王褒《四子讲德论》：“无介绍之道，安从行乎公卿？”
</p>
<p>
2. 居间沟通，使双方发生关系。
《新唐书·张行成传》：“古今用人未尝不因介绍。” 宋 罗大经《鹤林玉露》卷五：“ 南轩 为之介绍，数月乃得见。” 艾青《在浪尖上》诗：“我把你介绍给别人；‘这是一个英雄’。”亦指居间沟通使相互发生关系的人。 宋 梅尧臣《永叔内翰见过》诗：“我壶无醪醴，不能犒介绍。”
</p>
</body>
</html>
超链接伪类
a:hover{}最常用的（把鼠标放在字上面会发生变化）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*默认的颜色*/
a{
text-decoration: none;
color: black;
}
/*鼠标悬浮的颜色,即鼠标移过去就变颜色*/
a:hover{
color: orange;
font-size: 15px; /*鼠标放上去字体变化的功能*/
}
/*鼠标按住不放展示的颜色*/
a:active{
color: #2600ff;
}
</style>
</head>
<body>
<a href="#">
<img src="images/a.jpg" alt="">
</a>
<p>
<a href="#">码出高效:JAVA开发</a>
</p>
<p>
<a href="">作者：孤尽老师</a>
</p>
</body>
</html>
列表
这里我们就使用了CSS外部引用
> CSS和html的关联就用link标签来处理
#nav{
width: 300px;
background: #a0a0a0;
}
.title{
font-size: 30px;
line-height: 30px;
font-weight: bold;
text-indent: 1em;
text-align: center;
background: #00ff62;
}
/*ul li{} 更改所有li的样式*/
/*list-style:none去掉默认的圆点
circle 空心圆点
decimal: 1 2 3数字
square: 空心方块*/
ul li{
height: 30px;
list-style: none;
text-indent: 1em;
}
a{
text-decoration: none;
font-size: 17px;
color: blue;
}
a:hover{
color: orange;
font-size: 15px; /*鼠标放上去字体变化的功能*/
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表样式</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<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></li>
<li><a href="#">电脑</a> <a href="#">办公</a></li>
<li><a href="#">家具</a> <a href="#">厨具</a></li>
<li><a href="#">衣服</a> <a href="#">化妆</a></li>
<li><a href="#">包包</a> <a href="#">珠宝</a></li>
<li><a href="#">饮料</a> <a href="#">食物</a></li>
<li><a href="#">彩票</a> <a href="#">充值</a></li>
</ul>
</div>
</body>
</html>
背景
样式大概修改了，但是背景空荡荡的，就一些字在上面，那我们怎么去让它多点观赏性呢？
用background-image: url(“”);用来设置背景图片的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 1000px;
height: 690px;
border: 1px solid red;
/*默认是全部平铺的*/
background-image: url("images/b.jpg");
}
.div1{
background-repeat: repeat-x;
}
.div2{
background-image: none;
}
</style>
</head>
<body>
<div class="div1">
</div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>
这里来个整合的，把背景颜色、图片、位置、平铺方式放在一起写
/*分别是 颜色 背景图片 背景图片的位置 平铺方式*/
background: red url("images/b.jpg") 10px 27px no-repeat;
扫一扫
1865
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
