本文已参与「新人创作礼」活动，一起开启掘金创作之路。
1.骨架
<!--DOCTYPE：告诉浏览器使用什么规范（默认是html）-->
<!DOCTYPE html>
<!--语言 zh中文 en英文-->
<html lang="en">
<!--head标签代表网页头部-->
<head>
<!--meta 描述性标签，表示用来描述网站的一些信息-->
<!--一般用来做SEO（搜索）-->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--网站标题-->
<title>Document</title>
<style>
p {
color: red;
}
</style>
<!-- <link rel="stylesheet" href="css/style.css" />
</head>
<!--body代表主体-->
<body>
<p>hello</p>
</body>
</html>
1.1 CSS的3种导入方式
第一种：内部样式
<style>
p {
color: red;
}
</style>
第二种：外部样式
<link rel="stylesheet" href="css/style.css" />
第三种：行内样式
<p style="color: red">hello</p>
推荐用外部样式
2、选择器
2.1 基础选择器
<body>
<p class="one" id="one">我是老一</p>
<p class="one" id="two">我是老二</p>
<p class="three" id="three">我是老三</p>
</body>
2.1.1 标签选择器
所有标签统一样式
p{
color: blue;
}
2.1.2类选择器
class选择器，可以几个标签公用样式，可以复用
.one{
color: blue;
}
.three{
color: red;
}
2.1.3 id选择器
id是唯一的
#one{
color: blue;
}
#two{
color:chartreuse
}
#three{
color: red;
}
2.2 层次选择器
2.2.1 后代选择器
body p {
color: blue;
}
2.2.2 子选择器
body>p {
color: blue;
}
2.3属性选择器
id或者class配个标签一起使用
.demo p
3.基本样式
3.1 span标签 和文字样式
<body>
<p class="one" id="one">我是老一</p>
<p class="one" id="two">我是老二</p>
<p class="three" id="three"><span id="font">我是老三</span></p>
</body>
#font {
/*字体系列*/
font-family: '微软雅黑';
/*字体大小*/
font-size: 25px;
/*字体粗细 可以用数字1-900*/
font-weight:bold;
/*字体颜色*/
color: red;
}
3.2文本样式
<p id="stext"><span >我是老四，不是老六，也不是老八，你个老六我是服了，你个老八，吃我汉堡</span></p>
#stext {
/*文本颜色*/
color: blue;
/*文本对齐方式*/
text-align: center;
/*首行缩进*/
text-indent: 20em;
/*行高*/
line-height: 10px;
/*下划线 underline 中划线line-through 上划线 overline*/
/*超链接去下划线 none*/
text-decoration: underline;
}
3.3 超链接样式
<a href="#">百度一下，你就知道</a>
/* 鼠标悬浮*/
a:hover{
color: red;
font-size: 30px;
}
/* 鼠标按主未释放的状态 */
a:active{
color:aqua
}
/* 未访问的链接 */
a:link{
color:blue;
}
/* 已访问的链接 */
a:visited{
color: darkmagenta;
}
3.4 阴影
<p id="price">我是老一</p>
#price{
/* text-shadow: 阴影颜色，水平偏移，垂直偏移，阴影半径*/
text-shadow: #008800 20px -10px 2px;
}
3.5 列表
<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>
#nav{
width: 300px;
background: darkgrey;
}
.title{
font-size: 18px;
font-weight: bold;
text-indent: 1em;
line-height: 35px;
background: red;
}
ul{
background: darkgrey;
}
ul li{
height: 30px;
list-style: none;
text-indent: 1em;
}
a{
text-decoration: none;
font-size: 14px;
color: black;
}
a:hover{
color: orange;
text-decoration: underline;
}
3.6 背景
background-image:url("");/默认是全部平铺的/ background-repeat:repeat-x/水平平铺/ background-repeat:repeat-y/垂直平铺/ background-repeat:no-repeat/不平铺/
background: darkgrey;
background-image: url("../images/b.jpg");
3.7 渐变
body{
background-color: #FFFFFF;
background-image: linear-gradient(66deg, #FFFFFF 0%, #6284FF 50%, #FF0000 100%);
}
4.盒子模型 div样式
margin：外边距 padding：内边距 border：边框
4.1 边框和高度，宽度
<div id="div1">
</div>
<div id="div2">
</div>
dashed虚线 solid实线
#div1{
height: 100px;
width: 100px;
border: 3px dashed blue;
}
4.2 内边距，外边距
<div id="div1">
<div id="div2"></div>
</div>
#div1{
height: 100px;
width: 100px;
padding: 10px;
border: 3px solid blue;
}
#div2{
height: 50px;
width: 50px;
margin-top: 10px;
border: 3px solid red;
}
4.3 圆角边框
border-radius: 100px 100px 100px 100px;
4.4 div阴影
box-shadow: 10px 10px 100px yellow;
5.浮动
块级元素：独占一行 h1~h6 、p、div、 列表… 行内元素：不独占一行 span、a、img、strong
5.1display
block：块元素 inline：行内元素 inline-block：是块元素，但是可以内联，在一行 none：消失
5.2 float浮动
float: left;
5.3 overflow
right：右侧不允许有浮动元素 left：左侧不允许有浮动元素 both：两侧不允许有浮动元素 none：
6 定位
6.1 相对定位 relative
position: relative;
/*相对定位 上下左右*/
top: -20px;/*向上偏移20px*/
left: 20px;/*向右偏移20*/
bottom: -20px;/*向下偏移20px*/
right: 20px;/*向左偏移20px*/
6.2 绝对定位 absolute
定位：基于xxx定位，上下左右~ 1、没有父级元素定位的前提下，相对于浏览器定位 2、假设父级元素存在定位，我们通常会相对于父级元素进行偏移 3、在父级元素范围内移动
position: relative;
/*相对定位 上下左右*/
top: -20px;/*向上偏移20px*/
left: 20px;/*向右偏移20*/
bottom: -20px;/*向下偏移20px*/
right: 20px;/*向左偏移20px*/
6.3 z-index 图层
z-index：默认是0，最高无限~999
1、z-index 需要配合position 2、CSS中设置属性position后z-index才有效果 3、z-index表示层叠数值，数值越大越靠上，数值月越小越靠下方 4、设置position后标签属性是可以重叠的 5、设置position属性后同时top bottom、left、right 相对位置也生效、否则以上属性全无效
