css快速入门（上）
一、什么是CSS
1、什么是CSS
- Cascading Style Sheet 层叠样式表。
- CSS：表现（美化网页）。
- 字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动。
2、CSS发展史
- CSS 1.0：1994年 10月提出；
- CSS 2.0：DIV（块）+CSS，HTML与CSS结构分离的思想，网页变得简单，SEO；
- CSS 2.1：浮动，定位；
- CSS 3.0：圆角、阴影、动画…浏览器兼容性。
练习格式：
3、快速入门
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
规范，<sytle>可以编写css的代码，每一个声明最好以“;”结尾
语法：
选择器{
声明1;
声明2;
声明3;
}
-->
<style>
h1{
color: red;
}
</style>
</head>
<body>
<h1>CSS测试</h1>
</body>
</html>
- 建议使用这种规范（单独写一个css文件，用link标签引入css文件效果）
4、CSS优势
- 内容和表现分离；
- 网页结构表现统一，可以实现复用
- 样式十分的丰富
- 建议使用独立于html的css文件
- 利用SEO，容易被搜索引擎收录！
5、CSS的3种导入方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--内部样式-->
<style>
h1{
color: green;
}
</style>
<!--外部样式-->
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<!--优先级：就近原则-->
<!--行内样式：在标签元素中，编写一个style属性，编写样式即可-->
<h1 style="color: red">这是标签</h1>
</body>
</html>
-
拓展：外部样式两种方法
- 链接式 html
<!--外部样式--> <link rel="stylesheet" href="css/style.css" />- 导入式 @import是CSS2.1特有的！
<!--导入式--> <style> @import url("css/style.css"); </style>
二、基本选择器
作用：选择页面上的某一个后者某一类元素
1、标签选择器
选择一类标签 标签{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h1{
color: orange;
background: blue;
border-radius: 10px;
}
</style>
</head>
<body>
<h1>标签选择器</h1>
</body>
</html>
2、类选择器
选择所有class一致的标签，跨标签，格式：.类名{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*类选择器的格式 .class的名称{}
好处：可以多个标签归类，是同一个class，可以复用
*/
.demo1{
color: blue;
}
.demo2{
color: red;
}
.demo3{
color: aqua;
}
</style>
</head>
<body>
<h1 class="demo1">类选择器：demo1</h1>
<h1 class="demo2">类选择器：demo2</h1>
<h1 class="demo3">类选择器：demo3</h1>
</body>
</html>
3、id选择器
全局唯一，格式：#id名{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*id选择器：id必须保证全局唯一
#id名称{}
不遵循就近原则，优先级是固定的
id选择器 > 类选择器 > 标签选择器
*/
#demo1{
color: aqua;
}
.demo2{
color: red;
}
#demo2{
color: orange;
}
h1{
color: blue;
}
</style>
</head>
<body>
<h1 id="demo1">id选择器：demo1</h1>
<h1 class="demo2" id ="demo2">id选择器：demo2</h1>
<h1 class="demo2">id选择器：demo3</h1>
<h1>id选择器：demo4</h1>
<h1>id选择器：demo5</h1>
</body>
</html>
优先级：id > class > 标签
三、层次选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*后代选择器*/
body p{
background: deeppink;
}
/*子选择器*/
body>p{
background: olive;
}
/*相邻兄弟选择器:只选择一个,相邻向下*/
.active+p{
background: blueviolet;
}
/*通用兄弟选择器，当前选中元素的向下的所有兄弟元素*/
.active2~p{
background: dodgerblue;
}
</style>
</head>
<body>
<p>后代选择器p1</p>
<p class="active">子选择器p2</p>
<p>相邻兄弟选择器p3</p>
<p class="active">通用兄弟选择器p4</p>
<p>通用兄弟选择器p5</p>
</body>
</html>
1、后代选择器
在某个元素的后面
/*后代选择器*/
<style>
body p{
background:red;
}
</style>
2、子选择器
一代
/*子选择器*/
<style>
body>p{
background:orange;
}
</style>
3、相邻的兄弟选择器
同辈 只选择一个，相邻向下
/*相邻兄弟选择器：只有一个，相邻（向下）*/
<style>
.active+p{
background: red
}
</style>
<body>
<p class="active">p1<p>
<p>p2</p>
</body>
4、通用选择器
当前选中元素的向下的所有兄弟元素
<style>
/*通用兄弟选择器，当前选中元素的向下的所有兄弟元素*/
.active~p{
background:red;
}
</style>
<body>
<p class="active">p1<p>
<p>p2</p>
</body>
四、结构伪类选择器
伪类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪类选择器</title>
<style>
ul li:first-child{
/*ul的第一个子元素*/
background: mediumaquamarine;
}
ul li:last-child{
/*ul的最后一个子元素*/
background: lightpink;
}
/*
选中p1:定位到父元素,选择当前的第一个元素
选择当前P元素的父级元素，选中父级元素的第一个，并且是当前元素才生效！
*/
p:nth-child(1){
background: greenyellow;
}
p:nth-of-type(2){
/*选中父元素下的第二个p元素*/
background: lightseagreen;
}
a:hover{
color: red;
}
</style>
</head>
<body>
<a href="">鼠标移过来我变红色</a>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>li01</li>
<li>li02</li>
<li>li03</li>
</ul>
</body>
</html>
五、属性选择器
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: #ffffff;
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: #1643b1;
}
a[href^=http]{
/*选中href中以http开头的元素*/
background: aquamarine;
}
a[href$=pdf]{
/*选中href中以http开头的元素*/
background: aquamarine;
}
</style>
</head>
<body>
<p class="demo">
<a href="https://www.baidu.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</title>
<style>
#title1{
font-size: 50px;
}
</style>
</head>
<body>
学习<span id="title1">CSS</span>
</body>
</html>
font-family：字体
font-size：字体大小
font-weight：字体粗细
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
font-family: 楷体;
color: red;
}
h3{
font-size: 50px;
}
.p1{
font-weight: bold;
}
</style>
</head>
<body>
<h3>学习CSS</h3>
<p class="p1">P</p>
</body>
</html>
常用写法
/* 也可以填px，但不能超过900,相当于bloder */
font-weight:bolder;
/*常用写法：*/
font:oblique bloder 12px "楷体"
2、文本样式
-
颜色–>color
-
文本对齐方式–>text-align：center
-
首行缩进–>text-indent：2em
-
行高–>line-height：300px；
-
下划线–>text-decoration
text-decoration:underline/*下划线*/
text-decoration:line-through/*中划线*/
text-decoration:overline/*上划线*/
text-decoration:none/*超链接去下划线*/
- 图片、文字水平对齐
img,span{vetical-align:middle}
3、超链接伪类
<style>
a{/*超链接有默认的颜色*/
text-decoration:none;
color:#000000;
}
a:hover{/*鼠标悬浮的状态*/
color:orange;
}
a:active{/*鼠标按住未释放的状态*/
color:green
}
a:visited{/*点击之后的状态*/
color:red
}
</style>
4、阴影
/* 第一个参数：表示水平偏移
第二个参数：表示垂直偏移
第三个参数：表示模糊半径
第四个参数：表示颜色
*/
text-shadow:5px 5px 5px 颜色
5、列表ul li
/*list-style{
none:去掉原点
circle：空心圆
decimal：数字
square：正方形
}*/
ul li{
height:30px;
list-style:none;
text-indent:1em;
}
a{
text-decoration:none;
font-size:14px;
color:#000;
}
a:hover{
color:orange;
text-decoration:underline
}
/*放在div中，作为导航栏*/
<div id="nav"></div>
#nav{
width:300px;
}
6、背景
-
背景颜色：background
-
背景图片
background-image:url("");/*默认是全部平铺的*/
background-repeat:repeat-x/*水平平铺*/
background-repeat:repeat-y/*垂直平铺*/
background-repeat:no-repeat/*不平铺*/
- 综合使用
background:red url("图片相对路径") 270px 10px no-repeat
background-position：/*定位：背景位置*/
7、渐变
- 渐变背景网址：https://www.grabient.com
- 径向渐变、圆形渐变。
body{
background-color: #0cd7f3;
background-image: linear-gradient(43deg, #0093E9 0%, #80D0C7 46%, #23F549 100%);
}