CSS选择器、网页美化（字体、阴影、列表、渐变）
css
如何学习
1.CSS是什么
2.CSS怎么用
3.CSS 选择器
4.美化页面（文字、阴影、超链接、列表、渐变）
推荐网站：菜鸟教程
1.css入门
1.1、什么是CSS
Cascading style sheet 层叠级联样式表
CSS: 表现（美化网页）
字体、颜色、边距、高度、宽度、背景图片、网页定位、页面浮动…
1.2、发展史
CSS1.0
CSS2.0 DIV(块)+CSS，HTML与CSS分离思想，网页变得简单，SEO
CSS2.1 浮动和定位
CSS3.0 圆角，阴影，动画。。。。浏览器兼容性~
1.3、快速入门
style
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vT5M0SaM-1596704748024)(C:\Users\土豆666\AppData\Roaming\Typora\typora-user-images\image-20200804142254718.png)]
1.3.1基本入门
CSS的优势
1.内容与表现分离
2.网页结构表现统一，可以复用
3.样式十分的丰富
4.建议使用独立于HTML的css文件
5.容易被搜索引擎收录
1.4、CSS的3种导入方式
样式优先级问题：（就近原则）
行内 > 内部样式！= 外部样式
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-95ZQHwcb-1596704748026)(C:\Users\土豆666\AppData\Roaming\Typora\typora-user-images\image-20200804144221682.png)]
扩展：外部样式的两种写法
连接式：
导入式：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3jm8k412-1596704748028)(C:\Users\土豆666\AppData\Roaming\Typora\typora-user-images\image-20200804144504129.png)]
@import 是css2.1特有的
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
/*
*/
h1{
color: #26ff00;
}
style>
head>
<body>
<h1 style="color: #D6EDFF" >我是大哥大h1>
body>
html>
2.选择器
作业：选择页面上的某一个或者某一类元素
2.1、基本选择器
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
/*id选择器
id必须保证全局唯一！
不遵循就近原则
id选择器>class 选择器> 标签选择器
*/
#le{
color: #26ff00;
}
#zi{
color: #ce4d52;
}
.style1{
color: #0099cc;
}
h1{
color: #edcf72;
}
style>
head>
<body>
<h1 id="le">标题1h1>
<h1 id="zi">标题2h1>
<h1 class="style1">标题3h1>
<h1>标题4h1>
<h1>标题5h1>
body>
html>
1.标签选择器：选择一类标签 标签{}
2.类 选择器 class :选择所有class 属性一直的标签，跨标签 .类名{}
- id 选择器：全局唯一！ #id名{}
优先级： id>class>标签
2.2 层次选择器
1.后代选择器：在某个元素后面：爷爷、爸爸、我、儿子
/*后代选择器*/
body p{
color: red;
}
2.子选择器
/*子选择器*/
body>p{
background: #f89607;
}
3.相邻兄弟选择器
//同辈
/*相邻兄弟选择器：对下不对上 只有一个*/
.active + p{
background: #f608b7;
}
4.通用选择器
/*通用选择器 x兄弟选择器 当前选中元素的向下的所有兄弟元素 */
.active~p{
background: #6024fd;
}
PS P >P +P ~P
2.3、结构伪类选择器
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
/*ul的第一个子元素*/
ul li:first-child{
background: #02ff00;
}
/*ul的最后一个子元素*/
ul li:last-child{
background: red;
}
/*只选p1:定位到父元素，选择当前的第一个元素 顺序
选择当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效
*/
p:nth-child(3){
background: #000;
}
/*选中父元素下的第二个类型为p的元素 类型*/
p:nth-of-type(2){
background: #f1ba12;
}
style>
head>
<body>
<h1>h1h1>
<p>p1p>
<p>p2p>
<p>p3p>
<ul>
<li>li1li>
<li>li1li>
<li>li1li>
ul>
body>
html>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-un517V6R-1596704748030)(C:\Users\土豆666\AppData\Roaming\Typora\typora-user-images\image-20200804163031127.png)]
3、美化网页元素
3.1、为什么要美化页面元素
1、有效的传递页面信息
2、美化页面、页面漂亮、才能吸引客户
3.凸显页面内主题
4、提高用户体验
span标签：重点要突出的
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体title>
<style>
#title{
font-size: 50px;
}
style>
head>
<body>
我是<span id="title">冲冲冲span>
body>
html>
3.2字体样式
font:字体风格 字体大小 字体样式
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
body{
font-family: 楷体,"Arial Black";
color: #f8a10c;
}
H1{
font-size: 50px;
}
p1{
font-weight: bold;
}
style>
head>
<body>
<h1>《航海王》h1>
<p>是日本漫画家尾田荣一郎作画的少年漫画作品，于1997年7月22日在集英社《周刊少年Jump》
开始连载。改编的电视动画《航海王》于1999年10月20日起在富士电视台首播。p>
<p>When I wake up in the morning，
You are all I see;
When I think about you，
And how happy you make me。
You're everything I wanted;
You're everything I need;
I look at you and know;
That you are all to me。
Barry Fitzpatrickp>
body>
html>
3.3、文本样式
1.颜色 color rgb rgba
2.文本对齐方式 text-align=center
3.首行缩进 text-indent:2em;
4.行高 line-height: 单行文字上下居中
5.装饰 text-decoration:
6.文本图片水平对齐 ： vertical-align:middle
Title
aaasaa
3.4阴影
<html lang="en">
<head>
<meta charset="UTF-8">
<title>冲冲冲title>
<style>
a{
text-decoration: none;
color: #000000;
}
/*鼠标悬浮的状态,常用*/
a:hover{
color: #26ff00;
font-size: 40px;
}
/*鼠标按住未释放状态*/
a:active{
color: #f8a10c;
}
/*text-shadow: red 10px 10px 10px ; 阴影颜色，水平偏移，垂直偏移*/
#grice{
text-shadow: red 10px 0px 5px ;
}
style>
head>
<body>
<a href="#">
<img src="image/b.png" alt="">
a>
<p>
<a href="#">pathona>
p>
<p>
<a href="">作者：海外作者a>
p>
<p id="grice">
99$
p>
body>
html>
3.5、超链接伪类
正常情况下 a, a:hover
a{
text-decoration: none;
color: #000000;
}
/*鼠标悬浮的状态,常用*/
a:hover{
color: #26ff00;
font-size: 40px;
}
3.6列表
#nav{
width: 260px;
}
.title{
font-size: 18px;
font-weight: bold;
line-height: 35px;
text-indent: 1em;
background: red;
}
/*ul li*/
/*list-style： none*/
/*circle 空心圆*/
/*decimal 数字*/
/*square 正方形*/
ul{
background: greenyellow;
}
ul li{
height: 30px;
list-style: none;
text-indent: 1em;
}
a{
text-decoration: none;
font-size: 14px;
color: #2b2b2b;
}
a:hover{
color: orange;
text-decoration: underline;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表样式title>
<link rel="stylesheet" href="css/style.css" type="text/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> <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> <a href="#">数字商品a>li>
ul>div>
body>
html>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-f2Qpe5Mt-1596704748032)(C:\Users\土豆666\AppData\Roaming\Typora\typora-user-images\image-20200806152256482.png)]
3.7、背景
背景颜色
背景图片
<style>
div{
width: 1000px;
height: 700px;
border:1px solid red;
/*默认是全部平铺的*/
background-image: url("css/image/7.jpg");
}
.div1{
background-repeat: repeat-x;
}
.div2{
background-repeat: repeat-y;
}
.div3{
background-repeat: no-repeat;
}
style>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vbRJR7RZ-1596704748033)(C:\Users\土豆666\AppData\Roaming\Typora\typora-user-images\image-20200806155826241.png)]
对图片进行铺平和微调
#nav{
width: 260px;
}
.title{
font-size: 18px;
font-weight: bold;
line-height: 35px;
text-indent: 1em;
/* 颜色、图片、图片位置、平铺方式*/
background: red url("image/1.png") 176px 3px no-repeat;
}
/*ul li*/
/*list-style： none*/
/*circle 空心圆*/
/*decimal 数字*/
/*square 正方形*/
ul{
background: greenyellow;
}
ul li{
height: 30px;
list-style: none;
text-indent: 1em;
background-image: url("image/4.png");
background-repeat: no-repeat;
background-position: 178px 2px;
}
a{
text-decoration: none;
font-size: 14px;
color: #2b2b2b;
}
a:hover{
color: orange;
text-decoration: underline;
}
3.8、渐变（grabient）
https://www.grabient.com/ 渐变获取网址
background-color: #FBAB7E;
background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);