CSS基础笔记
1、CSS的相关知识点：
①发展史
css1. 0
css2.0 DIV+CSS，HTML和CSS结构分离思想，网页变得更简单
css2.1 浮动，定位
css3.0 圆角，阴影，动画.....浏览器兼容性.......
②CSS的基本语法：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Title</title>
<!--规范，<Style> 标签可以编写CSS代码，每一个声明最好使用分号隔开
语法：
选择器{
声明1;
声明2;
声明3;
}
例子：
<style>
h1{
color: red;
}
</style>
-->
</head>
<body>
<h1>我是H1</h1>
</body>
</html>
③外部引入CSS的方法：
<link rel="stylesheet" href="css/style.css"/>
<!--使用<link>即可引入CSS，<link>标签最好写在<head>标签的内部-->
④使用CSS的优势：
1、CSS2.0后，HTML和CSS的都可以分成独立的文件，HTML文件只有html，网页变得更简单的！(即内容和表现分离！)
2、网页结构表现统一的话，可以实现复用。
3、样式十分丰富。
4、利用SEO（搜索引擎优化），容易被搜索引擎收录！
⑤使用CSS的三种方式：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Title</title>
<!--第二种方式(内部样式)：在 <Style> 标签中编写CSS代码-->
<style>
h1{
color: red;
}
</style>
<!--第三种方式(外部样式)：通过 <link> 标签连接到外部的CSS文件-->
<link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<!--第一种方式(行内样式)：在标签元素中编写一个 Style 属性，编写样式即可！-->
<h1 style="color: red">我是H1</h1>
</body>
</html>
注意点：
如果这三种方式全部作用于一个位置，他们的应用优先级为：就近原则(即哪种方式离标签越近，标签就会使用哪种方式的 CSS 样式)
⑥拓展：外部样式的两种写法：
1、链接式：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style.css"/> <!--链接式写法，CSS3.0中出现的写法-->
</head>
<body>
<h1>我是H1</h1>
</body>
</html>
2、导入式：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Title</title>
<style>
@import url("css/style.css")
/*导入式写法，CSS2.1中出现的写法。现已废弃*/
</style>
</head>
<body>
<h1>我是H1</h1>
</body>
</html>
区别：
1、属性不同：
link是html提供的标签，不仅可以加载css文件，还能定义 RSS、rel 连接属性等。而
@import是css中的语法规则
2、加载顺序不同：
页面打开时，link引用的css文件被加载。而@import引用的CSS等页面加载完后最后加载。
3、兼容性：
@import是css2.1后提出的，而link是不存在兼容问题。
4、DOM控制性：
js操作DOM，可以使用link改变样式，无法使用@import的方式使用样式。
2、选择器
2.1、基本选择器：
1、标签选择器 选择一类标签。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>我的第一个页面</title>
<style>
/*
格式：标签名{}
例子：
h1{
color: red;
}
选中所有h1标签，并将它们的颜色设为红色！
*/
</style>
</head>
<body>
<h1>我是H1</h1>
<h1>我是H2</h1>
<h1>我是H3</h1>
</body>
</html>
2、类选择器 选择所以 class 属性相同的标签，可以跨标签使用。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>我的第一个页面</title>
<style>
/*
格式：.类名{}
例子：
.linlang{
color: red;
}
选中所有class属性为 linlang 标签，并将它们的颜色设为红色！ 类选择器可以跨标签使用！
*/
</style>
</head>
<body>
<h1 class="linlang">我是H1</h1>
<h2 class="linlang">我是H2</h2>
<p class="linlang">我是H3</p>
</body>
</html>
3、ID选择器 全局唯一！
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>我的第一个页面</title>
<style>
/*格式：#ID名{}
例子：
#linlang{
color: red;
}
选中 ID 为 linlang 标签，并将它们的颜色设为红色！ ID选择器全局唯一！*/
</style>
</head>
<body>
<h1 id="linlang">我是H1</h1>
</body>
</html>
选择器的优先级：不遵循就近原则，ID选择器 > 类选择器 > 标签选择器
2.2、层次选择器：
1、后代选择器 后代选择器选择一个元素的所有后代。
2、子选择器 子选择器只选择元素的直接后来，即后代的后代不会受影响。
3、相邻兄弟选择器 相邻兄弟选择器可以选择同一个父元素下自身所在位置向下一个兄弟元素（对下不对上）
4、兄弟选择器 兄弟选择器可以选择同一个父元素下自身所在位置向下的所有兄弟元素（对下不对上）
2.3、结构伪类选择器
伪类可以理解为过滤的意思
伪类选择器以 ：开头
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>我的第一个页面</title>
<style>
/*要求：选中<ul>下面的第一个<li>标签,定位到li1*/
ul li:first-child{
color: red;
}
/*要求：选中<ul>下面的最后一个<li>标签，定位到li3*/
ul li:last-child{
color: green;
}
/*要求：选中<body>下面的第一个<p>标签，定位到p1*/
p:nth-child(2){ /*释义：找到<P>元素的父级元素的所有子元素，按照顺序数第2个子元素*/
color: blue; /*nth-child是按照顺序来的*/
}
/*要求：选中<body>下面的第一个<p>标签，定位到p1*/
p:nth-of-type(1){ /*释义：找到<P>元素的父级元素的同类型所有子元素<P>，按照顺序数第1个子元素*/
color: yellow; /*nth-of-type是按照同类型的顺序的来的*/
}
</style>
</head>
<body>
<h1>h1</h1>
<p>p1</p>
<h1>h2</h1>
<p>p2</p>
<p>p3</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
</body>
</html>
2.4、属性选择器
相当于ID选择器+class选择器的结合(配合正则表达式食用，效果更佳哦！)
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
a{
height: 50px;
width: 50px;
border-radius: 10px;
background-color: #000000;
color: #ffffff;
text-align: center;
font-weight: bold ;
line-height: 50px;
display: block;
text-decoration: none;
margin-right: 5px;
float: left;
}
/*
= 表示：绝对等于
*= 表示：包含这个元素
^= 表示：以这个元素开头
$= 表示：以这个元素结尾
语法规则：选择到的元素 [属性过滤]{声明1;声明2;声明3;}
a[class$=bbb]{
background-color: red; 释义：通过标签选择器 选择所有的a标签 ，[class$=bbb]表示class属性中以bbb结尾的a标签
}
a[href*="css/1.jpg"]{ 释义：通过标签选择器 选择所有的a标签 ，[href*="css/1.jpg"]表示href属性中包含css/1.jpg的a标签
background-color: red;
}
*/
</style>
</head>
<body>
<a href="www.huawei.com" class="aaa bbb xxx">1</a>
<a href="css/1.jpg" class="aaa bbb xxx">2</a>
<a href="css/1.jpg" class="aaa bbb xxx">3</a>
<a href="css/1.jpg" class="aaa bbb">4</a>
<a href="css/1.jpg" class="aaa bbb">5</a>
<a href="css/1.jpg" class="aaa bbb">6</a>
<a href="css/1.jpg" class="aaa bbb xxx">7</a>
<a href="css/1.jpg" class="bbb xxx">8</a>
<a href="css/1.jpg" class="bbb xxx">9</a>
<a href="css/1.doc" class="aaa bbb xxx">10</a>
</body>
</html>
3、相关的属性
text-align:文本对齐方式 center居中、right右边、left左边
text-indent:首行缩进 单位推荐em 一般2em就行
line-height:行高 这个行高指该元素的高度，如果行高等于盒子高度，则居中！
text-decoration：下划线 none无、underline有、line-through删除线、overline上划线
text-shadow:阴影 相关参数：1、阴影颜色 2、水平偏移 3、垂直偏移 4、阴影半径
4、伪类链接
a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */
5、列表
/*
list-style:
none 去掉圆点
decimal 数字
circle 空心圆
square 正方行
*/
ul li{
list-style:none;
}
6、背景图片
div{
bgckground-image:url("images/1.jpg");
bgckground-repeat：no-repeat;
bgckground-position:20px 30px;
}
/*
背景图片默认是铺满整个屏幕的，我们需要添加
bgckground-repeat：no-repeat 取消平铺
改变图片的位置，我们需要添加
bgckground-position:参数1(以左上角原点为中心，
左右（x轴）的偏移量) 参数2(以左上角原点为中心，上下（y轴）的偏移量)
*/
简写：
div{
/* 颜色、图片地址 图片的位置 平铺方式*/
bgckground:blue url("images/1.jpg") 20px 30px no-repeat;
}
7、display
div{
display:none;
}
/*
display的相关属性值：
none---》隐藏该元素
block---》将该元素变为块元素
inline---》将该元素变为行内元素
inline-block---》块元素和行内元素的结合，是块元素，也可以在一行！
*/
8、浮动(float)
div{
float:left; /* 向左浮动 */
float:right; /* 向右浮动 */
}
9、父级边框塌陷问题
由于浮动后，内容脱离标准文档流。会造成父级边框塌陷！
4种解决方案：
1、增加父级边框的高度
2、在漂浮的元素后面增加一个空的 div ，并清除该 div 的左右浮动！
<div class="clear"></div>
.class{
clear:both
margin:0px;
padding:0px;
}
/*
clear的相关属性值：
clear：right; 右侧不允许有浮动元素
clear：left; 左侧不允许有浮动元素
clear：both; 两侧不允许有浮动元素
clear：none;
3、overflow
/*
在浮动元素的父级中添加overflow：hidden属性。
*/
<div id="father">
<div> div1 </div>
<div> div2 </div>
<div> div3 </div>
</div>
#father{
overflow:hidden 自动隐藏
}
/*
overflow的相关属性，
overflow：hidden 内容超出部分自动隐藏
overflow：scroll 内容超出部分以滚动条出现并查看
*/
4、父类元素添加一个伪类：after,并添加以下相关属性
#father:after{
content:''
display:block
clear:both
}
对比display和float
display：让内容排成一排，缺点：放置的方向不可控。
float：让内容排成一排，缺点：要解决父级边框塌陷的问题，推荐第4种解决方案。
10 、定位
10.1、相对定位
/*相对定位：*/ position: relative;
相对于自身的位置，进行偏移。相对定位的话，它并没有脱离标准文档流，所以原来的位置会被保留！
10.2、绝对定位
/*绝对定位*/ position: absolute;
相对于父级元素或浏览器的位置，进行偏移。绝对定位的话，它脱离了标准文档流，所以原来的位置不会被保留！
注意点：
1、父级元素没有使用定位的话，是相对于浏览器位置进行偏移的！
2、父级元素存在定位的话，是相对于父级元素的位置进行偏移的！
10.3、固定定位
/*固定定位：*/ position: fixed;
10.4、Z-index
z-index: 22; /*可以用来提升定位后，重叠元素的层级！*/
10.5、背景透明度属性
/*背景透明度*/ opacity:0.5;
