目录
[1.0 定义](#1.0 定义)
[2.0 基本语法规范](#2.0 基本语法规范)
[3.0 引入方式](#3.0 引入方式)
[4.0 选择器](#4.0 选择器)
[7.0 代码案例](#7.0 代码案例)
一、什么是CSS
1.0 定义
层叠样式表 页面样式和结构分离(美颜技术）
html是大体的页面布局
2.0 基本语法规范
选择器+{一条/n条 声明}
通常style在head里
3.0 引入方式
(1)内部样式表
写在style标签中，嵌入到html内部（哪里都可以 但一般在head中）
样式和页面结构分离 但是分离不够彻底
將css嵌套到html頁面中 但是如果特别多 就有点繁杂
控制台 control F搜索 在页面源码搜索关键字
(2)行内样式表
通过style 来指定某个标签的样式 只适合于写简单样式，只针对某个标签有效
不能写太复杂的样式
行内里面 <h1 style=" font-size= "80" ">
行内样式表比内部样式表优先级高 如果出现冲突 以行内样式表的内容为主
(3)外部样式
实际开发中最常用的方式
创建一个css文件 使用link标签引入css
<link rel="stylesheet" href="./Demo02.css">
stylesheet是一个样式表 href是地址
样式和结构彻底分离了 修改后不一定立刻生效
4.0 选择器
基础选择器 复合选择器 其他（参考文档 CSS 选择器参考手册）
(1)标签选择器 元素名 大括号
(2)id选择器 给元素起名字 <div id="div1 "></div> #div1 { color:red}
(3)class选择器 类选择器 <div class="fong40"></div> 可以重复起 .font40{ font-size:40px}
(4)通配符选择器 *{color : red}
(5)复合选择器 #div1，#div2{color ：red} 逗号表示取的是并集 ul li 表示ul下面的li标签的渲染
甚至可以ul标签下的li标签下的a标签 写法是：ul li a{color：red}
甚至可以 ul标签小的li标签里面的 class ul .first{color：red}
5.0常用CSS
CSS：层叠样式表 | MDN w3school 在线教程 css样式的介绍
(1) color 表示方式 ：英文单词 rbg（三原色） 十六进制
(2)font-size 字体大小 默认是16px
(3)border 复合属性 可以同时设置多个样式
(4)width/height
(5) 内边距 padding 外边距margin 相对而言（相对路径绝对路径的感觉）
6.0Chrome调试工具--查看css属性
打开方式 f12 鼠标右键-->检查
标签页含义：elements 查看标签结构 console控制台 network 前后端交互过程
7.0 代码案例
(1)实现一个广告板
先写页面布局
开始美化 设置边框的颜色
最终代码和效果图：
java
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 308px;
height:204px;
border: #d8d8d8 solid 2px;
}
.title{
border-bottom: 2px dotted #000;
padding-top:40px;
padding-left:40px;
}
.item{
font-size:16px;
flood-color:#d8d8d8;
padding-left: 25px;
line-height: 28px;
padding-top:10px;
}
</style>
</head>
<body>
<div class="box">
<div class="title">广告板</div>
<divc class="content">
<div class="item">赔钱甩卖，全场一律八折优惠</div>
<div class="item">赔钱甩卖，全场一律八折优惠</div>
<div class="item">赔钱甩卖，全场一律八折优惠</div>
<div class="item">赔钱甩卖，全场一律八折优惠</div>
</divc>
</div>
</body>
</html>
(2)实现一个百度热榜
下面是效果图和代码：
java
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.col-1{
}
.col-2{
width:20%;
text-align: center;
}
.col-2{
width:20%;
text-align: center;
}
.col-2{
width:20%;
text-align: center;
}
.icon{
background-imag:url(./refresh.png);
width:24px;
height:24px;
background-size:100% 100%;
display:inline-block;
vertical-align:bootom;
}
.content{
font-size:18px;
line-height:40px;
}
.content.col-1, .content.col-2{
border-bottom:2px solid #f3f3f3;
}
.num{
font-size:20px;
color:#fffff3;
}
.first{
background-color: #f54545;
padding-right:8px;
}
.second{
background-color: #ff8547;
padding-right:8px;
}
.third{
background-color: #ffac38;
padding-right:8px;
}
.forth{
background-color: #8eb9f5;
padding-right:8px;
}
</style>
</head>
<body>
<table cellspcing="0px">
<th class="title col-1">千度热榜</th>
<th class="title col-2"><a href=#"">换一换<span class="icon"></span></a></th>
<tr class="content">
<td class="col-1"><span class="num first">1</span><a href="#">小茂密小茂密小茂密小茂密</a></td>
<td class="col-2">445万</td>
</tr>
<tr class="content">
<td class="col-1"><span class="num second">2</span><a href="#">中茂密中茂密中茂密中茂密</a></td>
<td class="col-2">445万</td>
</tr>
<tr class="content">
<td class="col-1"><span class="num third">3</span><a href="#">大茂密大茂密大茂密大茂密</a></td>
<td class="col-2">445万</td>
</tr>
<tr class="content">
<td class="col-1"><span class="num forth">4</span><a href="#">略略略略略略略略略略略略</a></td>
<td class="col-2">445万</td>
</tr>
</table>
</body>
</html>感谢大家的支持
更多内容还在加载中...........
如有问题欢迎批评指正，祝大家生活愉快、学习顺利！！！