############### CSS简介 ################
# CSS # HTML是骨架 # CSS是样式 # JS是动作 # css和html是分成两个文件编写的，这也是体现了文档内容和样式的解耦， # CSS：层叠样式表(英文全称：Cascading Style Sheets)
############### 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>Titletitle>
<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>Titletitle>
<link rel="stylesheet" href="test.css">
head>
<body>
<p id="p1">andyp>
<p id="p2">xiaomeip>
<p class="c1">xiaomeip>
<p class="c1">xiaomeip>
<p class="c1">xiaomeip>
<p class="c1">xiaomeip>
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>Titletitle>
<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>000p>
<hr>
<div>111div>
<p>222p>
<p>333p>
body>
html>
############### CSS属性选择器 ################
/*属性标签*/ /*这是把属性是s9的标签，颜色变成红色*/ [s9]{ color: red; } /*第二种方式*/ [s9="1"]{ color: green; }
对应的html文件：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<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>Titletitle>
<link rel="stylesheet" href="test.css">
head>
<body>
<div id="d1">这是一个divdiv>
<p>这是一个p标签p>
body>
html>
############### CSS伪类选择器 ################
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<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">baidua>
<a href="http://www.sohu.com">sohua>
<input type="text">
body>
html>
############### CSS伪元素选择器 ################
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<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>Titletitle>
<link rel="stylesheet" href="test.css">
head>
<body>
<p>这是一个p标签p>
<p class="c1">c1p>
<p class="c2">c2p>
<div class="c3">围城div>
<a href="http://baidu.com">百度a>
body>
html>
############### CSS背景属性 ################
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<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">divdiv>
<div class="c1">围城div>
<div class="c2">div>
<span class="c4">spanspan>
<ul>
<li>电脑li>
<li>手机li>
<li class="last">宝宝li>
ul>
body>
html>
############### CSS的盒子模型，这个非常的重要 ################
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<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">12div>
<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>Titletitle>
<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">12div>
<div class="c2">12div>
div>
body>
html>
############### CSS的overflow，实现一个圆形的头像 ################
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<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>Titletitle>
<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>
body>
html>
############### CSS定位 ################
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<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">c4div>
body>
html>
############### css+html-博客首页 ################
html页面：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<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-blogdiv>
<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="">JSa>li>
<li><a href="">HTMLa>li>
<li><a href="">CSSa>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-12span>
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-12span>
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-12span>
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-12span>
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>Titletitle>
<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>
<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 ################
############### 结束线 ################