【CSS详解】一文掌握CSS基础用法

CSS基础

前言
一、CSS的概念
- 1.什么是CSS
- 2.CSS的发展史
- 3.CSS的优势
二、CSS的导入方式
- 1.行内样式
- 2.内部样式
- 3.外部样式
三、CSS的选择器
- 1.基本选择器
- 2.层次选择器
- 3.结构伪类选择器
- 4.属性选择器
四、美化网页元素
- 1.为什么要美化网页
- 2.字体样式
- 3.文本样式
- 4.阴影
- 5.超链接伪类
- 6.列表
- 7.背景
- 8.渐变
五、盒子模型
- 1.什么是盒子模型
- 2.边框
- 3.内外边距
- 4.圆角边框
- 5.阴影
六、浮动
- 1.标准文档流
- 2.display
- 3.float
- 4.父级边框塌陷问题
七、定位
- 1.相对定位
- 2.相对定位
- 3.固定定位
- 4.z-index
八、动画

前言

本文为CSS基础知识与语法介绍，Java全栈学习路线可参考：【Java全栈学习路线】最全的Java学习路线及知识清单，Java自学方向指引，内含最全Java全栈学习技术清单~

一、CSS的概念

1.什么是CSS

CSS：Cascading Style Sheet 层叠样式表。
CSS：表现（美化网页）。
字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动。

2.CSS的发展史

CSS 1.0
CSS 2.0 DIV(块)+CSS，HTML与CSS结构分离的思想，网页简单，SEO
CSS 2.1 浮动，定位
CSS 3.0 圆角，阴影，动画…浏览器兼容性~

3.CSS的优势

内容与表现分离
网页结构表现统一，可以实现复用
样式十分丰富

二、CSS的导入方式

1.行内样式

 <!--行内样式:在标签元素中，编写一个style属性，编写样式即可-->
<h1 style="color: aquamarine">CSS3测试</h1>复制

2.内部样式

 <!--内部样式-->
<style>
    h1{
        color: yellow;
    }
</style>复制

3.外部样式

链接式

 <!--外部样式——链接式-->
<link rel="stylesheet" href="css/style.css">复制

导入式

 <!--外部样式——导入式-->
<!--CSS2.1-->
<style>
    @import url("css/style.css");
</style>复制

三、CSS的选择器

1.基本选择器

标签选择器：选择一类标签标签{}

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<style>
    /*标签选择器会选择页面上所有的对应标签*/
    h1{
        color: #c134b5;
        background: black;
    }
</style>
<style>
    p{
        background: aquamarine;
        color: red;
        font-size: 80px;
    }
</style>
    <h1>王小姐</h1>
    <h1>夏先生</h1>
    <p>蜗牛小姐</p>
</body>
</html>复制

类选择器 class：选择所有class属性一致的表情，跨标签.类名{}

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--类选择器格式：.class的名称{}
    好处：可以选择一组类，类名一致
    -->
<style>
    .girl{
        color: #c134b5;
    }
</style>
<style>
    .boy{
        color: blue;
    }
</style>
<h1 class="girl">王小姐</h1>
<h1 class="boy">夏先生</h1>
<h2 class="girl">蜗牛小姐</h2>
<p class="girl">王苡辰</p>
</body>
</html>复制

ID选择器：全局唯一！ #id名{}

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--id选择器 : id必须保证全局唯一
    #id 名称{}
    不遵循就近 原则，固定的
    优先级： id选择器 > class选择器 > 标签选择器
    -->
<style>
    #girl{
        color: #c134b5;
    }
</style>
<style>
    #boy{
        color: blue;
    }
</style>
<h1 id="girl">王小姐</h1>
<h1 id="boy">夏先生</h1>
<h2 class="girl">蜗牛小姐</h2>
<p class="girl">王苡辰</p>
</body>
</html>复制

2.层次选择器

后代选择器：在某个元素的后面

 /*后代选择器*/
body p{
    background: #c134b5;
}复制

子选择器一代面

 /*子选择器*/
body>p{
    background: #c134b5;
}复制

相邻兄弟选择器（对下不对上）

 /*兄弟选择器： 只有一个，向下*/
.active +p{
    background: #c134b5;
}复制

通用选择器

 /*通用兄弟选择器， 当前选中元素的向下所有的兄弟元素*/
.active~p{
    background: #c134b5;
}复制

3.结构伪类选择器

伪类：条件

 /*ul的第一个子元素*/
ul li:first-child{
    background: #24ff33;
}
/*ul的最后一个子元素*/
ul li:last-child{
    background: red;
}
/*选中p1: 定位到父元素，选择当前的第一个元素
  选择当前p元素的父级元素，选中父级元素的第一个
  并且是当前元素才生效！
  */
p:nth-child(2){
    background: #67e4ff;
}
/*选中父元素下的p元素的第二个，类型 */
p:nth-of-type(2){
    background: yellow;
}复制

4.属性选择器

id + class 结合

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
    <style>
        .demo a{
            float: left;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            background: aquamarine;
            text-align: center;
            color: gray;
            text-decoration: none;
            margin-right: 5px;
            line-height:50px;
            font: bold 20px/50px Arial;
        }
        /*
        属性名,属性名 = 属性值（正则）
              = 表示绝对等于
             *= 表示包含
             ^= 表示以...开头
             $= 表示以...结尾
             存在id属性的元素
                a[]{}
         */
        a[id]{
            background: deeppink;
        }
        a[id=first]{
            /*
            id=first的元素
            */
            background: greenyellow;
        }
        a[class*="links"]{
            /*
            class 中有links的元素
            */
            background: green;
        }
        a[href^=http]{
            /*
            选中href中以http开头的元素
            */
            background: aquamarine;
        }
        a[href$=pdf]{
            /*
            选中href中以http开头的元素
            */
            background: aquamarine;
        }
    </style>
</head>
<body>
<p class="demo">
    <a href="https://www.taobao.com/" class="links item first" id="first">淘宝</a>
    <a href="" class="links item active" target="_blank " title="test">链接</a>
    <a href="img/hello.html" class="links item">网页</a>
    <a href="img/str1.png" class="links item">png</a>
    <a href="img/str2.jpg" class="links item">jpg</a>
    <a href="abc" class="links item">链2</a>
    <a href="/fy.pdf" class="links item">pdf</a>
    <a href="/quit.pdf" class="links item">pdf2</a>
    <a href="dump.doc" class="links item">doc</a>
    <a href="kiko.doc" class="links item last">doc2</a>
</p>
</body>
</html>复制

四、美化网页元素

1.为什么要美化网页

有效的传递页面信息
美化网页，页面漂亮才能吸引客户
凸显页面的主题
提高用户的体验

 /*
 span标签：重点要突出的字，使用span标签套起来
 */
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>美化网页</title>
   <style>
       #title{
           font-size: 25px;
       }
   </style>
</head>
<body>
编程语言:<span id="title">Java</span>
</body>
</html>复制

2.字体样式

font-family：字体
font-size：字体大小
font-weight：字体粗细
color：字体颜色

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            font-family: "Arial Black";
            color: dodgerblue;
        }
        h1{
            font-size: 25px;
        }
        .p1{
            font-weight: 600;
            color: chocolate;
        }
    </style>
</head>
<body>
<h1>标题</h1>
<p>正文6699</p>
<p class="p1">正文4444444</p>
<p>Study English and Computer</p>
</body>
</html>复制

3.文本样式

颜色：color:agb / rgba()
文本对齐方式：text-align：center
首行缩进：text-indent：2em
行高：line-height：300px
下划线：text-decoration

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1{
            color: rgba(0,255,255,0.9);
            text-align: center;
        }
        .p1{
            text-indent:2em;
        }
        .p3{
            line-height:300px;
            background: mediumaquamarine;
            height: 300px;
        }
        /*下划线*/
        .l1{
            text-decoration: underline;
        }
        /*中划线*/
        .l2{
            text-decoration: line-through;
        }
        /*上划线*/
        .l3{
            text-decoration: overline;
        }
        /*超链接去下划线*/
        a{
            text-decoration: none;
        }
    </style>
</head>
<body>
<a href="">4399-7k7k</a>
<p class="l1">123123123</p>
<p class="l2">123123123</p>
<p class="l3">123123123</p>
<h1>概述</h1>
<p class="p1">
    夸克一词是盖尔曼取自詹姆斯·乔伊斯的小说《芬尼根的守灵夜》的词句“向麦克老人三呼夸克（Three quarks for Muster Mark）”。无非是指一个质子中有三个夸克。另外夸克在该书中具有多种含义，其
    中之一是一种海鸟的叫声。他认为，这适合他最初认为“基本粒子不基本、基本电荷非整数”的奇特想法，同时他也指出这只是一个笑话，这是对矫饰的科学语言的反抗。另外，也可能是出于他对鸟类的喜爱。 [7]
    盖尔曼原本想用鸭的叫声来命名夸克。开始时他并不太确定自己这个新词的实际拼法，直到他在詹姆斯·乔伊斯小说《芬尼根守灵夜》里面找到“夸克”这个词
</p>
<p>
    在1963年，我把核子的基本构成命名为“夸克”（quark），我先有的是声音，而没有拼法，所以当时也可以写成“郭克”（kwork）。不久之后，在我偶尔翻阅詹姆斯·乔伊斯所著的《芬尼根守灵夜》时，我在“向麦克老大三呼夸克”这句中看到夸克这个词。由于“夸克”（字面上意为海鸥的叫声）很明显是要跟“麦克”及其他这样的词押韵，所以我要找个借口让它读起来像“郭克”。但是书中代表的是酒馆老板伊厄威克的梦，词源多是同时有好几种。书中的词很多时候是酒馆点酒用的词。所以我认为或许“向麦克老大三呼夸克”源头可能是“敬麦克老大三个夸脱”，那么我要它读“郭克”也不是完全没根据。再怎么样，字句里的三跟自然中夸克的性质完全不谋而合。
</p>
<p class="p3">
    茨威格则用“埃斯”（Ace）来称呼他所理论化的粒子，但是在夸克模型被广泛接纳时，盖尔曼的用词就变得很有名。很多中国物理学家则称夸克为“层子”，在台湾地区亦曾翻译“亏子”，但并不普遍使用。
</p>
</body>
</html>复制

4.阴影

 /*阴影的颜色，水平偏移，垂直偏移，阴影半径*/
#price{
    text-shadow: deepskyblue 10px 10px 2px;
}
 复制

5.超链接伪类

 /*默认的颜色*/
a{
    text-decoration: none;
    color: #000000;
}
/*鼠标悬浮的状态（只需要记住）*/
a:hover{
    color: orange;
    font-size: 50px;
}复制

6.列表

 /*ul li*/
/*circle 空心圆
  decimal 数字
  square 正方形*/
/*ul li*/
ul {
    background: grey;
}
ul li{
    height: 30px; /*行高*/
    list-style: none; /*去掉圆点*/
    text-indent: 1em;
}复制

7.背景

背景颜色：background

 background-image:url(""); /* 默认是全部平铺的 */
background-repeat:repeat-x; /* 水平平铺 */
background-repeat:repeat-y; /* 垂直平铺 */
background-repeat:no-repeat; /* 不平铺 */复制

背景图片

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 1000px;
            height: 700px;
            border: 1px solid red;
            background-image: url("images/ceshi.jpeg");
            /*默认是全部平铺的*/
        }
        .div1{
            background-repeat: repeat-x;
        }
        .div2{
            background-repeat: repeat-y;
        }
        .div3{
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>复制

8.渐变

渐变背景网址：https://www.grabient.com
径向渐变、圆形渐变

 body{
     background-color: #0cd7f3;
     background-image: linear-gradient(43deg, #0093E9 0%, #80D0C7 46%, #23F549 100%);
}复制

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景</title>
    <style>
       body{
            background-color: #08AEEA;
            background-image: linear-gradient(0deg, #08AEEA 0%, #2AF598 100%);
        }
        div{
            width: 500px;
            height: 200px;
            border: 1px solid mediumaquamarine;
            background-image: url("img/str.png");
            /* 默认是全部平铺的 */
        }
        /*水平平铺*/
        .div1{
            background-repeat: repeat-x;
        }
        /*垂直平铺*/
        .div2{
            background-repeat: repeat-y;
        }
        /*不平铺*/
        .div3{
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>复制

五、盒子模型

1.什么是盒子模型

margin：外边距
padding：内边距
border：边框

2.边框

边框的粗细
边框的样式
边框的颜色

 /* 边框大小 边框样式 边框颜色 */
border: 1px solid #000000;复制

3.内外边距

margin：外边距
padding：内边距

 /*
    当margin/padding
    有一个参数，上下左右，都有边距
    有二个参数，上下，左右，表示
    四个参数时，上，右，下，左，表示
*/
 margin：0 1px 2px 3px;复制

盒子的计算方式：元素到底多大？

margin+border+padding+内容宽度

4.圆角边框

4个角

 div{
    width: 100px;
    height: 50px;
    margin: 30px;
    border: 2px solid red;
    border-radius: 50px 50px 0px 0px; /* 和边距的参数一样，左上，右上，右下，左下 */
}复制

5.阴影

 /*
h-shadow    必需。水平阴影的位置。允许负值。
v-shadow    必需。垂直阴影的位置。允许负值。
blur    可选。模糊的距离。
color    可选。阴影的颜色。
*/
text-shadow: h-shadow v-shadow blur color;复制

六、浮动

1.标准文档流

块级元素：独占一行

 <!-- h1-h6 p div ... -->复制

行内元素：不独占一行

 <!-- span a img strong ... -->复制

注意：块级元素可以存在行内元素。

2.display

block：块元素；
inline：行内元素；
inline-block：是块元素，但是可以内联，在一行；
这也是一种实现行内元素排列的方式，但是我们很多情况用float。

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dispaly</title>
    <style>
        /*
        block: 块元素
        inline: 行内元素
        inline-block: 块元素，但是可以内联
        none: 隐藏
        */
        div{
            width: 100px;
            height: 100px;
            border: 1px solid darkorange;
            display: inline-block;
        }
        span{
            width: 100px;
            height: 100px;
            border: 1px solid darkorange;
            display: inline-block;
        }
    </style>
</head>
<body>
<div>div块元素</div>
<span>span行内元素</span>
</body>
</html>复制

3.float

左右浮动
浮动的元素会脱离标准流

 div{
    float: right;/*向右浮动*/
}复制

4.父级边框塌陷问题

 /*
clear: right; 右侧不允许有浮动元素
clear: left;  左侧不允许有浮动元素
clear: both;  两侧不允许有浮动元素
clear: none;  不允许有浮动元素
*/
.text{
    clear:both;
}复制

解决父级边框塌陷问题：

增加父级元素高度

 #body{
    border: 1px #000 solid;
    height: 800px;
}复制

增加一个空的div标签，清除浮动

 <div class="clear"></div>
.clear{
    clear: both;
    margin: 0;
    padding: 0;
}复制

父类添加一个伪类：after

 #body:after{
    content: '';
    display: block;
    clear: both;
}复制

七、定位

1.相对定位

相对定位：positon：relstive；
相对于原来的位置，进行指定的偏移，相对定位的话，它仍然在标准文档流中！原来的位置会被保留。

 top:-20px; /* 向上偏移20px */
left:20px; /* 向右偏移20px */
bottom:10px; /* 向上偏移10px */
right:20px; /* 向左偏移20px */复制

2.相对定位

定位：基于xxx定位，上下左右
没有父级元素定位的前提下，相对于游览器定位
假设父级元素村咋i定位，我们通常会相对于父级元素进行便宜
在父级元素范围内移动
相对于父级或者游览器的位置，进行指定的偏移，绝对定位后，它仍然在标准文档流中，原来的位置不会被保留

 div{
  position: absolute;/*绝对定位*/
  top: -20px;/*相对当前的位置 向上移动，负值相反方向*/
  left: 20px;/*相对当前的位置 向右移动*/
}复制

3.固定定位

固定定位使元素的位置相对于浏览器窗口来定位
即使窗口是滚动的它也不会移动

 div{
    position: fixed;/*固定定位*/
    right: 0;
    bottom: 0;
}复制

4.z-index

图层，用定位的时候会产生会和其他元素重叠
相当于上一层盖住了下一层的内容

 div{
    z-index:2;
}复制

八、动画

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<style> 
div{
    width:100px;
    height:100px;
    background:red;
    animation:myfirst 5s; /* 动画执行时间 */
}
@keyframes myfirst{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}
</style>
</head>
<body>
    <div></div>
</body>
</html>复制

	<!--行内样式:在标签元素中，编写一个style属性，编写样式即可-->
	<h1 style="color: aquamarine">CSS3测试</h1>

	<!--外部样式——链接式-->
	<link rel="stylesheet" href="css/style.css">

	<!--外部样式——导入式-->
	<!--CSS2.1-->
	<style>
	@import url("css/style.css");
	</style>

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Title</title>
	</head>
	<body>
	<style>
	/标签选择器会选择页面上所有的对应标签/
	h1{
	color: #c134b5;
	background: black;
	}
	</style>
	<style>
	p{
	background: aquamarine;
	color: red;
	font-size: 80px;
	}
	</style>
	<h1>王小姐</h1>
	<h1>夏先生</h1>
	<p>蜗牛小姐</p>
	</body>
	</html>

	/兄弟选择器：只有一个，向下/
	.active +p{
	background: #c134b5;
	}

	/通用兄弟选择器，当前选中元素的向下所有的兄弟元素/
	.active~p{
	background: #c134b5;
	}

	/ul的第一个子元素/
	ul li:first-child{
	background: #24ff33;
	}
	/ul的最后一个子元素/
	ul li:last-child{
	background: red;
	}
	/*选中p1: 定位到父元素，选择当前的第一个元素
	选择当前p元素的父级元素，选中父级元素的第一个
	并且是当前元素才生效！
	*/
	p:nth-child(2){
	background: #67e4ff;
	}
	/选中父元素下的p元素的第二个，类型 /
	p:nth-of-type(2){
	background: yellow;
	}

	/*
	span标签：重点要突出的字，使用span标签套起来
	*/
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>美化网页</title>
	<style>
	#title{
	font-size: 25px;
	}
	</style>
	</head>
	<body>
	编程语言:<span id="title">Java</span>
	</body>
	</html>

	/阴影的颜色，水平偏移，垂直偏移，阴影半径/
	#price{
	text-shadow: deepskyblue 10px 10px 2px;
	}

	/默认的颜色/
	a{
	text-decoration: none;
	color: #000000;
	}
	/鼠标悬浮的状态（只需要记住）/
	a:hover{
	color: orange;
	font-size: 50px;
	}

	/ul li/
	/*circle 空心圆
	decimal 数字
	square 正方形*/
	/ul li/
	ul {
	background: grey;
	}
	ul li{
	height: 30px; /行高/
	list-style: none; /去掉圆点/
	text-indent: 1em;
	}

	background-image:url(""); /* 默认是全部平铺的 */
	background-repeat:repeat-x; /* 水平平铺 */
	background-repeat:repeat-y; /* 垂直平铺 */
	background-repeat:no-repeat; /* 不平铺 */

	body{
	background-color: #0cd7f3;
	background-image: linear-gradient(43deg, #0093E9 0%, #80D0C7 46%, #23F549 100%);
	}

	/* 边框大小边框样式边框颜色 */
	border: 1px solid #000000;

	/*
	当margin/padding
	有一个参数，上下左右，都有边距
	有二个参数，上下，左右，表示
	四个参数时，上，右，下，左，表示
	*/
	margin：0 1px 2px 3px;

	div{
	width: 100px;
	height: 50px;
	margin: 30px;
	border: 2px solid red;
	border-radius: 50px 50px 0px 0px; /* 和边距的参数一样，左上，右上，右下，左下 */
	}

	/*
	h-shadow 必需。水平阴影的位置。允许负值。
	v-shadow 必需。垂直阴影的位置。允许负值。
	blur 可选。模糊的距离。
	color 可选。阴影的颜色。
	*/
	text-shadow: h-shadow v-shadow blur color;

	/*
	clear: right; 右侧不允许有浮动元素
	clear: left; 左侧不允许有浮动元素
	clear: both; 两侧不允许有浮动元素
	clear: none; 不允许有浮动元素
	*/
	.text{
	clear:both;
	}

	<div class="clear"></div>
	.clear{
	clear: both;
	margin: 0;
	padding: 0;
	}

	top:-20px; /* 向上偏移20px */
	left:20px; /* 向右偏移20px */
	bottom:10px; /* 向上偏移10px */
	right:20px; /* 向左偏移20px */

【CSS详解】一文掌握CSS基础用法

CSS基础

前言

一、CSS的概念

1.什么是CSS

2.CSS的发展史

3.CSS的优势

二、CSS的导入方式

1.行内样式

2.内部样式

3.外部样式

三、CSS的选择器

1.基本选择器

2.层次选择器

3.结构伪类选择器

4.属性选择器

四、美化网页元素

1.为什么要美化网页

2.字体样式

3.文本样式

4.阴影

5.超链接伪类

6.列表

7.背景

8.渐变

五、盒子模型

1.什么是盒子模型

2.边框

3.内外边距

4.圆角边框

5.阴影

六、浮动

1.标准文档流

2.display

3.float

4.父级边框塌陷问题

七、定位

1.相对定位

2.相对定位

3.固定定位

4.z-index

八、动画

微信扫一扫：分享

	div{
	position: absolute;/绝对定位/
	top: -20px;/相对当前的位置向上移动，负值相反方向/
	left: 20px;/相对当前的位置向右移动/
	}