############### CSS简介 ################
# CSS # HTML是骨架 # CSS是样式 # JS是动作 # css和html是分成两个文件编写的，这也是体现了文档内容和样式的解耦， # CSS：层叠样式表(英文全称：Cascading Style Sheets)
############### CSS的内容列表 ################
css的内容列表 1，css的引入，三种方式 2，css的选择器， 基本选择器，有四种，p # . * 组合选择器， 属性选择器 分组和嵌套 伪类选择器 伪元素选择器 选择器的优先级 3，css的各种属性， 宽和高，width，height， 字体属性，font-size，font-weight，color， 文字属性，text-align，text-decoration，text-indent， 背景属性，background-color，background-repeat，background-image，background-position， display 盒子模型，margin外边距，border边框，padding内填充，content内容 float，三种取值，left，right，none， clear，清除浮动， overflow，溢出属性， 定位position， 4，综合应用案例
############### CSS的引入 ################
# CSS如何引入： # 1，直接在标签中写style="样式1;样式2" # 2，在head中通过style标签定义 # 3，把css文件单独写入一个文件，在head中通过link导入外部的css文件，
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
color: blue;
}
</style>
<link rel="stylesheet" href="test.css">
</head>
<body>
<a href="" style="color: red">百度</a>
<p>海盐</p>
<h1>小明</h1>
</body>
</html>
css文件，test.css
h1{
color: green;
}
############### CSS的语法和注释 ################
/*
css语法：
选择器{属性:值;属性:值}
CSS注释：
有了注释整个的代码就很清晰了
*/
/*解释性的说明，这个文件是做什么用的*/
/*全局性的样式*/
/*导航条的样式*/
/*商品列表的样式*/
p{
color: green;font-size: 48px;
}
############### CSS的常用选择器 ################
/*
css选择器：
第一种：标签选择器
但是这种有局限，会导致所有的标签都是同样的样式，但是实际中往往是同样的标签可能会有不同的样式
*/
p{
color: green;
}
/*
第二种：id选择器
这个选择器的优先级要高于标签选择器，到这里基本一个页面的所有的样式都可以定义了，
但是一个网页有几百个标签都要表上id才可以，
有没有简单的办法呢？
*/
#p2{
color: red;
}
/*
第三种：类选择器，
因为id不能重复，但是类可以重复，所以只需要写一份类选择器就可以应用到多个标签，这个实际工作中是用的最多的，
*/
.c1{
color: black;
}
/*第四种：通用选择器
对整个页面进行样式设置
*/
*{
font-size: 18px;
}
/*
总结：
上面是最基本的选择器
# 标签选择器：适用于批量统一默认的样式，
# ID选择器：适用于给特定的标签设置样式
# 类选择器：适用于给某一些标签设置样式，
*/
对应的html文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
<p id="p1">andy</p>
<p id="p2">xiaomei</p>
<p class="c1">xiaomei</p>
<p class="c1">xiaomei</p>
<p class="c1">xiaomei</p>
<p class="c1">xiaomei</p>
</body>
</html>
############### CSS的组合选择器 ################
/*
还有一些不常用的，但是也会用到的选择器
组合选择器
*/
/*
第一种组合选择器：后代选择器
*/
/*这是标示id是d1的标签，下面的p标签，包含所有的后代，儿子，孙子标签*/
/*#d1 p{*/
/*color: red;*/
/*}*/
/*
第二种组合选择器：儿子选择器，只有儿子标签起作用，孙子标签是不起作用的
*/
#d1>p{
color: red;
}
/*第三种组合选择器，毗邻选择器，必须是同级靠近的，而且只会往下找一个标签，再远的就不行了，
*/
div+p{
color: yellow;
}
/*第四种组合选择器，弟弟选择器，这是这个标签下面所有的标签都会受到影响
*/
div~p{
color: blue;
}
对应的html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
<div id="d1">
<!--这是儿子标签-->
<p>div里面的p标签</p>
<span>div里面的span标签</span>
<div>
<!--这是孙子标签-->
<p>div中的div里面里面的p标签</p>
<span>div中的div里面里面的span标签</span>
</div>
</div>
<!--毗邻选择器-->
<p>000</p>
<hr>
<div>111</div>
<p>222</p>
<p>333</p>
</body>
</html>
############### CSS属性选择器 ################
/*属性标签*/
/*这是把属性是s9的标签，颜色变成红色*/
[s9]{
color: red;
}
/*第二种方式*/
[s9="1"]{
color: green;
}
对应的html文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
<p s9="1">这是一个p标签</p>
<p s9="2">这是一个p标签</p>
<p>这是一个p标签</p>
</body>
</html>
############### CSS的分组和嵌套选择器 ################
/*分组选择器*/
/*第一种写法*/
/*建议分组的时候，如果有多个标签，采用分行，但是记住一定要加逗号，否则就变成了后代选择器，*/
div,
p{
color: red;
}
/*第二种写法*/
#d1,
p{
color: green;
}
/*嵌套选择器*/
/*意思就是说不是一定要是一个标签，也可以是一个id表示的*/
#d1+p{
color: yellow;
}
对应的html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
<div id="d1">这是一个div</div>
<p>这是一个p标签</p>
</body>
</html>
############### CSS伪类选择器 ################
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--伪类选择器-->
<!--所有的标签都可以使用这个伪类选择器-->
<!--格式：选择器：命令{样式}，选择器可以是元素选择器，也可以是id选择器，-->
<style>
/*<!-- 没有访问过的标签使用这个颜色，必须是浏览器没有访问过的，访问过了就不是这个颜色，-->*/
a:link {
color: red;
}
/*访问过的标签使用这个颜色*/
a:visited {
color: green;
}
/*鼠标移动上去，展示的颜色*/
/*这种网站上面用的非常的频繁，*/
a:hover{
color: aqua;
}
/*被选定*/
a:active{
color: chocolate;
}
/*input获取焦点时候的样式*/
input:focus{
outline: none;
background-color: yellow;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">baidu</a>
<a href="http://www.sohu.com">sohu</a>
<input type="text">
</body>
</html>
############### CSS伪元素选择器 ################
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--伪元素选择器-->
<!--这种下面有很多小的操作，用到的时候可以再查-->
<style>
/*<!--选择第一个字-->*/
p:first-letter {
color: red;
font-size: 48px;
}
/*这是在c1这个标签的前面加东西*/
.c1:before {
color: red;
content: "*";
}
/*这是在c2这个标签的后面加东西*/
/*点击可以调整，这个可以使用js来绑定事件*/
.c1:after {
color: red;
content: "[?]";
}
</style>
</head>
<body>
<p>
在苍茫的大海上，
在苍茫的大海上，
在苍茫的大海上，
在苍茫的大海上，
在苍茫的大海上，
在苍茫的大海上，
在苍茫的大海上，
在苍茫的大海上，
在苍茫的大海上，
</p>
<p class="c1">在苍茫的大海上</p>
<p class="c1">在苍茫的大海上</p>
</body>
</html>
############### CSS选择器的优先级 ################
# 选择器的优先级 # 1，内联标签，直接在标签内部写style，这种优先级最高 # 2，选择器都一样，谁靠近标签谁生效，因为浏览器加载文件是从上到下加载的， # 3，内联样式权重是1000，id选择器权重是100，类选择器权重是10，元素选择器权重是1，元素选择器就是标签选择器， 权重计算永不进位，10个元素选择器也大不过一个类选择器，
############### CSS字体属性 ################
/*常用的css属性*/
/*全局通用的样式*/
* {
/*文字字体：如果浏览器不支持第一个字体，就就尝试下一个，如果都没有，就使用系统默认的，*/
font-family: "微软雅黑", "Arial", "sans-serif";
/*文字大小*/
font-size: 18px;
}
.c1 {
/*字体的粗细（权重）*/
font-weight: 100;
/*字体颜色*/
/*第一种颜色方式：直接英文*/
/*color: red;*/
/*第二种颜色方式：rgb*/
/*color: rgb(255,0,122);*/
/*第三种颜色方式：16进制*/
/*这种可以使用浏览器的取色器来取色*/
/*color: #e21f6d;*/
/*第四种方式：rgba*/
/*最后一位是透明度*/
color: rgba(255, 0, 0, 0.1);
}
.c2 {
font-weight: 900;
}
.c3 {
/*这是文本对齐方式的属性，有居中，左对齐，右对齐，两端对齐*/
/*text-align: center;*/
/*文本样式，可以下划线，上划线，删除线，等等，用的不多*/
text-decoration: underline;
/*这是首行缩进，28像素，因为一个中文字体是14像素*/
text-indent: 28px;
}
a {
/*有的公司会专门把超链接下面的默认的下滑线去掉，就是用这个，这个用的比较多*/
text-decoration: none;
}
对应的html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
<p>这是一个p标签</p>
<p class="c1">c1</p>
<p class="c2">c2</p>
<div class="c3">围城</div>
<a href="http://baidu.com">百度</a>
</body>
</html>
############### CSS背景属性 ################
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--css的背景属性-->
<style>
.c1 {
/*背景颜色*/
background-color: red;
}
.c2 {
width: 800px;
height: 800px;
/*这是填充背景图片*/
/*默认是重复展示，一直铺满*/
background-image: url("http://img3.imgtn.bdimg.com/it/u=3595140452,1077552905&fm=26&gp=0.jpg");
/*这是是否重复*/
/*这是不重复，默认是摆在左上角*/
background-repeat: no-repeat;
/*这是沿着x轴重复*/
/*background-repeat: repeat-x;*/
/*这是沿着y轴重复*/
/*background-repeat: repeat-y;*/
background-position: center;
/*把这个图片固定住*/
background-attachment: fixed;
/*边框的宽度*/
/*border-width: 10px;*/
/*边框的颜色*/
/*border-color: green;*/
/*边框的风格*/
/*border-style: solid;*/
/*这三个可以写到一起,简写*/
border: 10px solid green;
/*还可以专门设置左边的线，右边的线，*/
}
.c3 {
background-color: red;
/*设置不展示这个标签，页面不展示，都是代码是有的*/
/*display: none;*/
/*设置成行内*/
display: inline;
}
.c4 {
/*这是设置成为块*/
/*本身span标签是行内标签，不能设置高度和宽度，但是如果设置成了块级标签，就可以设置了，*/
display: block;
width: 100px;
height: 100px;
border: 10px solid green;
}
ul{
/*这是去掉小圆点*/
list-style-type: none;
}
li{
/*变成行内标签*/
display: inline;
/*这是设置在右侧有一个边框，黑色*/
border-right: solid 1px #666666;
}
li.last{
/*这是设置最后一个右侧没有边框，*/
border-right: none;
}
</style>
</head>
<body>
<div class="c3">div</div>
<div class="c1">围城</div>
<div class="c2"></div>
<span class="c4">span</span>
<ul>
<li>电脑</li>
<li>手机</li>
<li class="last">宝宝</li>
</ul>
</body>
</html>
############### CSS的盒子模型，这个非常的重要 ################
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--盒子模型有四层
1，content，内容,width height 就是设置的内容的宽度，
2，padding，内填充，padding设置，
3，border，边框，border，border-width，border-color，border-style，都是设置的边框，
4，margin，外边距-->，margin设置，
<style>
.c1 {
width: 200px;
height: 300px;
border: 5px solid green;
/*调整两个标签之间的距离，就使用margin调整*/
/*这是margin上下左右都是10像素*/
/*margin: 10px;*/
/*margin-top: 50px;*/
/*margin-left: 100px;*/
/*右侧虽然设置了15，但是div是一个块级标签，在右侧空的地方还是会默认使用外边距进行填充*/
/*margin-right: 15px;*/
/*margin-bottom: 100px;*/
/*可以合到一起写，而且推荐也是合到一起写，按照上右下左的方式*/
/*margin: 5px 10px 15px 20px;*/
/*可以写两个，就是上下，左右*/
margin: 10px 20px;
/*调整内容和边框的距离，使用padding，padding也可以简写*/
padding: 10px;
}
ul {
/*这是去掉小圆点*/
list-style-type: none;
}
li {
/*变成行内标签*/
display: inline;
/*这是设置在右侧有一个边框，黑色*/
/*border-right: solid 1px #666666;*/
/*这样写padding是上下左右都是增加10像素*/
/*padding: 10px;*/
}
li.last {
/*这是设置最后一个右侧没有边框，*/
border-right: none;
}
li > a {
border-right: 1px solid red;
padding-right: 15px;
padding-left: 15px;
}
</style>
</head>
<body>
<div class="c1">12</div>
<ul>
<li><a href="">电脑</a></li>
<li><a href="">手机</a></li>
<li class="last"><a href="">宝宝</a></li>
</ul>
</body>
</html>
############### CSS浮动 ################
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*<!--清除浏览器默认的样式-->*/
* {
margin: 0;
padding: 0;
}
.c1 {
height: 100px;
width: 20%;
background-color: red;
/*浮动：float*/
/*在css中任何元素都可以浮动*/
/*浮动的作用就是在摆不开的时候可以往下自动移动*/
/*任何标签设置浮动之后，都会变成一个块级标签，都可以设置宽度和高度了，*/
/*div是块级标签，默认占据一行，我想要都往左堆积就要使用到浮动*/
/*可以使用浮动来做页面的布局*/
float: left;
}
.c2 {
height: 100px;
width: 80%;
background-color: blue;
float: left;
}
</style>
</head>
<body>
<div>
<div class="c1">12</div>
<div class="c2">12</div>
</div>
</body>
</html>
############### CSS的overflow，实现一个圆形的头像 ################
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1 {
border: 1px solid black;
width: 120px;
height: 120px;
/*<!--如果标签空间小，但是内容多，会有溢出-->*/
/*可以加一个滚动条*/
overflow: auto;
}
/*这种网站头像会用到*/
.c2 {
border: 1px solid black;
width: 120px;
height: 120px;
/*这是显示一个圆的头像*/
border-radius: 100%;
/*这是溢出的隐藏起来*/
overflow: hidden;
}
img{
/*这是适应div大小*/
max-width: 100%;
}
</style>
</head>
<body>
<div class="c1">
fjljaldsjlf
jadslfjlajdslkfj
ajsdlfjladsjlfads
fadsf
adsfadfadsfad
fad
sf
</div>
<div class="c2">
<img src="http://b-ssl.duitang.com/uploads/item/201410/09/20141009224754_AswrQ.jpeg" alt="">
</div>
</body>
</html>
############### CSS清除浮动 ################
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d1 {
border: 1px solid red;
}
.c1 {
width: 50px;
height: 50px;
background-color: blue;
border: 1px solid black;
/*这个时候浮动了，但是父级标签的边框就浮到上面去了，从父标签跑出来，*/
float: left;
}
/*第一种解决方法：加一个空的div，然后让他左边不能有浮动的标签*/
/*.c2{*/
/*!*这是左边不能有浮动的标签*!*/
/*clear: left;*/
/*}*/
/*第二种方法：*/
/*#d1:after{*/
/*content: "";*/
/*clear: both;*/
/*display: block;*/
/*}*/
/*第三种方法，这是常用的方法*/
.clearfix:after{
content: "";
clear: both;
display: block;
}
/*清除浮动的副作用*/
</style>
</head>
<body>
<div id="d1" class="clearfix">
<div class="c1"></div>
<div class="c1"></div>
<div class="c1"></div>
<div class="c1"></div>
<!--<div class="c2"></div>-->
</div>
</body>
</html>
############### CSS定位 ################
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.c1,
.c2,
.c3,
.c4{
width: 100px;
height: 100px;
}
.c1{
background-color: red;
}
.c2{
background-color: blue;
/*这个相对定位是相对于原来的*/
position: relative;
left: 150px;
top: 100px;
}
.c3{
background-color: green;
}
.c4{
background-color: yellow;
/*决定定位，相对于最近的一个祖宗标签*/
position: absolute;
left: 150px;
top: 100px;
}
.fixed-text{
/*这是固定位置*/
position: fixed;
left: 20px;
top: 20px;
background-color: gray;
}
</style>
</head>
<body>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
<div class="c4"></div>
<div class="fixed-text">c4</div>
</body>
</html>
############### css+html-博客首页 ################
html页面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
<!--左侧边栏 开始-->
<div class="left">
<!--头像 开始-->
<div class="header-img">
<img src="http://b-ssl.duitang.com/uploads/item/201410/09/20141009224754_AswrQ.jpeg" alt="">
</div>
<!--头像 结束-->
<div class="blog-name">andy-blog</div>
<div class="blog-info">什么也没有</div>
<!--连接区 开始-->
<div class="blog-links">
<ul>
<li><a href="">关于我</a></li>
<li><a href="">关于我</a></li>
<li><a href="">关于我</a></li>
</ul>
</div>
<!--连接区 结束-->
<!--文章分类 开始-->
<div class="blog-links">
<ul>
<li><a href="">JS</a></li>
<li><a href="">HTML</a></li>
<li><a href="">CSS</a></li>
</ul>
</div>
<!--文章分类 结束-->
</div>
<!--左侧边栏 结束-->
<!--右边栏 开始-->
<div class="right">
<div class="artical-list">
<div class="artical">
<div class="artical-title">
<h1 class="artical-name">海盐</h1>
<span class="artical-date">2019-12-12</span>
</div>
<div class="artical-info">《斗破苍穹》是一本连载于起点中文网的古装玄幻小说，作者是起点白金作家天蚕土豆（李虎），已完结。
这里是属于斗气的世界，没有花俏艳丽的魔法，有的，仅仅是繁衍到巅峰的斗气...</div>
<div class="artical-tag">
#JS #CSS
</div>
</div>
<div class="artical">
<div class="artical-title">
<h1 class="artical-name">海盐</h1>
<span class="artical-date">2019-12-12</span>
</div>
<div class="artical-info">《斗破苍穹》是一本连载于起点中文网的古装玄幻小说，作者是起点白金作家天蚕土豆（李虎），已完结。
这里是属于斗气的世界，没有花俏艳丽的魔法，有的，仅仅是繁衍到巅峰的斗气...</div>
<div class="artical-tag">
#JS #CSS
</div>
</div>
<div class="artical">
<div class="artical-title">
<h1 class="artical-name">海盐</h1>
<span class="artical-date">2019-12-12</span>
</div>
<div class="artical-info">《斗破苍穹》是一本连载于起点中文网的古装玄幻小说，作者是起点白金作家天蚕土豆（李虎），已完结。
这里是属于斗气的世界，没有花俏艳丽的魔法，有的，仅仅是繁衍到巅峰的斗气...</div>
<div class="artical-tag">
#JS #CSS
</div>
</div>
<div class="artical">
<div class="artical-title">
<h1 class="artical-name">海盐</h1>
<span class="artical-date">2019-12-12</span>
</div>
<div class="artical-info">《斗破苍穹》是一本连载于起点中文网的古装玄幻小说，作者是起点白金作家天蚕土豆（李虎），已完结。
这里是属于斗气的世界，没有花俏艳丽的魔法，有的，仅仅是繁衍到巅峰的斗气...</div>
<div class="artical-tag">
#JS #CSS
</div>
</div>
</div>
</div>
<!--右边栏 结束-->
</body>
</html>
对应的css样式：
/*博客页面的相关样式*/
/*公共的样式*/
* {
/*font-family: "微软雅黑";*/
font-size: 14px;
margin: 0px;
padding: 0px;
}
/*去掉超链接的下滑线*/
a {
text-decoration: none;
}
/*左边栏 样式*/
.left {
width: 20%;
height: 100%;
position: fixed;
background-color: rgb(76, 77, 76);
left: 0;
top: 0;
}
.header-img {
height: 128px;
width: 128px;
border: 5px solid white;
/*这是显示一个圆的头像*/
border-radius: 100%;
/*这是溢出的隐藏起来*/
overflow: hidden;
margin: 0 auto;
margin-top: 20px;
}
.header-img > img {
max-width: 100%;
}
/*blog名称*/
.blog-name {
color: white;
font-size: 24px;
font-weight: bold;
text-align: center;
margin-top: 15px;
}
/*blog介绍*/
.blog-info {
color: white;
text-align: center;
border: 2px solid white;
margin: 5px 15px;
}
/*连接组和标签组*/
.blog-links,
.blog-tags {
text-align: center;
margin-top: 20px;
}
.blog-links a,
.blog-tags a {
color: white;
}
/*在标签前面都加上井号*/
.blog-tags a:before {
content: "#";
}
/*右边栏 样式*/
.right {
width: 80%;
height: 1000px;
background-color: rgb(238, 237, 237);
float: right;
}
.artical-list {
margin-left: 30px;
margin-top: 30px;
margin-right: 10%;
}
.artical {
background-color: white;
margin-top: 15px;
}
.artical-title {
padding: 15px;
border-left: red solid 3px;
}
.artical-name {
display: inline-block;
}
/*文章发布时间*/
.artical-date {
float: right;
}
.artical-info {
padding: 15px;
}
.artical-tag {
padding: 15px 0;
margin: 15px;
border-top: 1px solid #eeeeee;
}
############### css浮动做导航条 ################
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
}
.nav {
background-color: black;
padding: 15px 0;
}
.nav-left li {
float: left;
padding: 20px;
}
.nav-right {
float: right;
padding: 20px;
}
/*清除浮动*/
.clearfix:after,
.clearfix:before {
clear: both;
content: "";
display: block;
}
.ss {
width: 80%;
/*上下0，左右自动*/
margin: 0 auto;
}
</style>
</head>
<body>
<!--class里面可以放多个属性的，-->
<div class="nav">
<div class="ss clearfix">
<div class="nav-left">
<ul>
<li><a href="">玉米商城</a></li>
<li><a href="">玉米商城</a></li>
<li><a href="">玉米商城</a></li>
<li><a href="">玉米商城</a></li>
<li><a href="">玉米商城</a></li>
<li><a href="">玉米商城</a></li>
<li><a href="">玉米商城</a></li>
<li><a href="">玉米商城</a></li>
</ul>
</div>
<div class="nav-right">
<a href="">登陆</a>
<a href="">注册</a>
<a href="">购物车</a>
</div>
</div>
</div>
</body>
</html>
############### CSS ################
############### 结束线 ################
来源：https://www.cnblogs.com/andy0816/p/12111669.html