css
一丶CSS简介
叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML
特点:
1.丰富的样式定义 ,易于使用和修改,多页面应用,页面压缩,层叠
2.使数据和显示分开
3.降低网络流量
4.使整个网站视觉效果一致
5.使开发效率提高了（耦合性降低，一个人负责写html，一个人负责写css）
二丶CSS的引入方式
行内样式
### 在body标签内
<!-- 行内样式:优先级最高-->
<p style="color: darkcyan">唉不穿的覆盖惠健康</p>
内接样式
### 在head标签内
<!-- 内接样式 -->
<style>
div{
color: darkmagenta;
}
</style>
外接样式-链接式
### 在head标签内
<!-- 外接样式 链接式 -->
<link rel="stylesheet" href="commons.css">
外接样式-导入式
<!--外接样式 导入式 -->
<style>
@import url('commons.css');
</style>
三丶CSS的基本选择器
CSS优先级 : id选择器 > 类选择器 > 元素选择器
标签选择器
标签选择器可以选中所有的标签元素，比如div，ul，li ，p等等，不管标签藏的多深，都能选中，选中的是所有的，而不是某一个，所以说 "共性" 而不是 ”特性“
body{
color:gray;
font-size: 12px;
}
/*标签选择器*/
p{
color: red;
font-size: 20px;
}
span{
color: yellow;
}
类选择器
所谓类：就是class . class与id非常相似 任何的标签都可以加类，但是类是可以重复,属于归类的概念。同一个标签中可以携带多个类，用空格隔开
<style>
.lv{
color: green;
}
.big{
font-size: 40px;
}
.line{
text-decoration: underline;
}
</style>
<body>
<!-- 公共类 共有的属性 -->
<div>
<p class="lv big">段落1</p>
<p class="lv line">段落2</p>
<p class="line big">段落3</p>
</div>
</body>
ID选择器
同一个页面中id不能重复。
任何的标签都可以设置id ，id命名规范 要以字母 可以有数字 下划线 - 大小写严格区分 aa和AA是两个不一样的属性值
<style>
#box{
background:green;
}
#s1{
color: red;
}
#s2{
font-size: 30px;
}
</style>
<body>
<div id="box">娃哈哈</div>
<div id="s1">爽歪歪</div>
<div id="s2">QQ星</div>
</body>
通用选择器
<style>
/*通用选择器:
如果标签没有设置属性,会被统一进行操作.比如:上色
所有的标签都会被选中*/
* {
color: yellow;
}
</style>
<body>
<p>段落</p>
<div>div标签</div>
</body>
四丶CSS的高级选择器
后代选择器用法如下:👇
使用 空格 表示后代选择器。顾名思义，父元素的后代（包括儿子，孙子，重孙子）
<style>
/*后代选择器
使用 '空格' 表示后代选择器
*/
div span {
color: peachpuff;
}
</style>
<body>
<!--后代选择器
使用 空格 表示后代选择器。顾名思义，父元素的后代（包括儿子，孙子，重孙子）
-->
<div>父选择器
<span>子代选择器</span>
<div>
<p>
<span>重孙代选择器</span>
</p>
<span>孙代选择器</span>
</div>
</div>
</body>
子代选择器用法如下:👇
使用 > 表示子代选择器。比如div>p,仅仅表示的是当前div元素选中的子代(不包含孙子....)元素p。
<style>
/*子代选择器
> 号, 只找子代div标签的span儿子标签
*/
div>span{
color: darkorange;
}
</style>
<body>
<!--子代选择器
> 号,找到div下的所有的子标签
-->
<div>
<span>div-->span 子标签</span>
<p>
<span>span 子标签</span>
</p>
<div>
<span>div-->span 子标签</span>
</div>
</div>
</body>
毗邻(兄弟)选择器用法如下:👇
<style>
/* 毗邻(兄弟)选择器
+ 相连 ,所有的邻居应用样式
*/
span+a{
color: aqua;
}
</style>
<body>
<!--邻居选择器
+ 号相连, span标签的 a标签应用样式
-->
<div>
<a href="#">第一个a标签</a>
<span>span 标签 </span>
<div>
<span>span标签</span>
<a href="#">第二个a标签</a>
</div>
<div><a href="#">第三个a标签</a></div>
<a href="#">第四个a标签</a>
<span >span 标签 </span>
<a href="#">第五个a标签</a>
</div>
</body>
弟弟选择器用法如下:👇
<style>
/* 弟弟选择器
~ 相连,在div之下的都是弟弟标签,都应用样式,嵌套必须重新定义div,否则无效
*/
div~span{
color: darkturquoise;
}
</style>
<body>
<!--
弟弟选择器
~ 号 ,只找所有的弟弟,在其之下的都是弟弟标签
-->
<div>
哥哥1
<div>
<span>这是孙代标签</span>
</div>
<span>这是嵌套的弟弟</span>
</div>
<hr>
<span>这是离得近的弟弟标签</span>
<span>这是离得近的弟弟标签</span>
<span>这是离得近的弟弟标签</span>
<hr>
<div>哥哥2</div>
<a href="#">123</a>
<label>这是邻居</label>
<br>
<span>这是离得远的弟弟标签</span>
</body>
并集选择器(组合选择器)用法如下:👇
多个选择器之间使用逗号隔开.表示选中的页面中的多个标签.一些共性的元素,可以使用并集选择器
<style>
/* 并集选择器
逗号分隔,所有的标签都应用样式
*/
ul,ol,span{
background-color: darkturquoise;
}
</style>
<body>
<!--并集选择器(组合选择器)
逗号分隔 , 所有的标签都应用样式
-->
<ul>
<li>u-li1</li>
<ul>
<li>u-li2</li>
</ul>
</ul>
<ol>
<li>o-li</li>
</ol>
<div>
<div> <span>span标签</span></div>
</div>
<span>123
<br>
<span>span标签</span></span>
</body>
交集选择器用法如下:👇
使用 . 表示交集选择器。第一个标签必须是标签选择器，第二个标签必须是类选择器 语法：div.active
比如有一个<h4 class='active'></h4>这样的标签。那么它表示两者选中之后元素共有的特性。
<style>
/*交集选择器*/
div.box1.box2{
background-color: red;
width: 200px;
height: 200px;
}
div.box1{
background-color: green;
width: 200px;
height: 200px;
}
</style>
<body>
<!--交集选择器
点( . ) , 应用符合div标签的类选择器的标签
-->
<div class="box1 box2">box1box2</div>
<div class="box2">box1</div>
<div>aaa
<div class="box1">这是嵌套的div</div>
</div>
<span class="box1 ">span标签</span>
</body>
伪类选择器用法如下:👇
伪类选择器一般会用在超链接a标签中，使用a标签的伪类选择器，我们一定要遵循"爱恨准则" LoVe HAte
<style>
a:link{
/* 没有浏览过,应用此颜色 */
color: cornflowerblue;
}
a:visited{
/* 浏览过后,应用此颜色*/
color: chartreuse;
}
a:active{
/* 鼠标点击事件 */
color: rebeccapurple;
}
a:hover{
/* 鼠标悬浮事件*/
color: firebrick;
}
input:focus{
/* 点击聚焦事件*/
background-color: fuchsia;
}
div{
width: 100px;
height: 100px;
background-color: lightgray;
}
div:hover{
/* div标签 鼠标悬浮事件 */
background-color: pink;
}
</style>
<body>
<!--#### 伪类选择器
a : link visited active
input: focus
通用: hover
-->
<a href="http://www.xiaohuar.com">这是应用了伪类选择器</a>
<input type="text">
<div></div>
</body>
伪元素选择器用法如下:👇
<style>
/* 伪元素选择器 */
p:first-letter{
/* 在文本的最开头用于第一个字 */
color: greenyellow;
}
div:before{
/* 在文本的最开头添加content 内容,并应用样式 */
content: '$$$';
color: pink;
}
span:after{
/* 在文本的最末尾添加content 内容,并应用样式 */
content: 'abc';
color: aqua;
}
</style>
<body>
<!--#### 伪元素选择器
标签:first-letter 在文本的最开头用于第一个字
标签:before 在文本的最开头添加content 内容,并应用样式
标签:after 在文本的最末尾添加content 内容,并应用样式
-->
<p>你好啊~~,今天吃了吗1</p>
<div>你好啊~~,今天吃了吗2</div>
<span>你好啊~~,今天吃了吗3</span>
</body>
属性选择器用法如下:👇
属性选择器，字面意思就是根据标签中的属性，选中当前的标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 属性选择器
语法:属性选择器 [属性]/[属性='值']
# 单个属性 : input[type='text']
# 多个属性 : input[type='password'][id='in']
*/
input[type='text']{
background-color: mediumspringgreen;
}
input[type='password'][id='in']{
background-color: gold;
}
</style>
</head>
<body>
<div>
<input type="text">
<input type="password" id="in">
</div>
</body>
</html>
一丶HTML块级标签
排版标签
p 标签: 段落标签,会自动在段落上下加上空白来分开
p标签是一个文本标签,本身是一个块级标签不能再嵌套块标签
div 标签: 没有样式的标签 ,最常用
列表
1.无序列表 常用
2.有序列表
3.标题列表
# 无序列表 circle:空心圆, disc:默认实心圆,square:实心方片
<ul type='circle'>
<li>1</li>
<li>2</li>
</ul>
<ul type='square'>
<li>1</li>
<li>2</li>
</ul>
<ul>
<li>1</li>
<li>2</li>
</ul>
# 有序列表 ol ,type:阿拉伯数字和英文字母. start :从第几个开始
<ol type='1' start='2'>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
# 标题列表
<dl>
<dt>标题</dt> <!-- dt 表示标题 -->
<dd>1</dd> <!-- dd 内容 -->
<dd>2</dd>
<dd>3</dd>
</dl>
表格
table 表格:
thead :表头
tr: 一行
th: 一列 , 加粗的单元格。相当于<td> + <b>
<caption>：表格的标题。使用时和tr标签并列
tbody: 表身
tr:一行
td:一列
表格属性:
width : 宽度
height: 高度
bordercolor: 边框颜色
border : 边框
align :表格的水平对齐方式
bgcolor : 背景颜色
background : 背景图片
cellspacing :单元格和单元格之间的距离（外边距），像素为单位。默认情况下的值为0
cellpadding :单元格内容到边的距离，像素为单位。默认情况下，文字是紧挨着左边那条线的，即默认情况下的值为0。注意:注意不是单元格内容到四条边的距离哈，而是到一条边的距离，默认是与左边那条线的距离。如果设置属性dir="rtl"，那就指的是内容到右边那条线的距离。
合并单元格:
colspan：横向合并。例如colspan="2"表示当前单元格在水平方向上要占据两个单元格的位置。
rowspan：纵向合并。例如rowspan="2"表示当前单元格在垂直方向上
tr属性:
dir：公有属性，设置这一行单元格内容的排列方式。可以取值：ltr：从左到右（left to right，默认），rtl：从右到左（right to left）
bgcolor：设置这一行的单元格的背景色。
height：一行的高度
align="center"：一行的内容水平居中显示，取值：left、center、right
valign="center"：一行的内容垂直居中，取值：top、middle、bottom
td属性:
align：内容的横向对齐方式。属性值可以填：left right center。
valign：内容的纵向对齐方式。属性值可以填：top middle bottom
width：绝对值或者相对值(%)
height：单元格的高度
bgcolor：设置这个单元格的背景色。
background：设置这个单元格的背景图片。
具体代码如下:👇