CSS入门
CSS
CSS基本语法
CSS定义方法是：
选择器{属性：值；属性：值；属性：值}
选择器是将样式和页面元素关联起来的名称
属性是希望设置的样式属性，每一个属性都有一个或者多个值
属性之间用冒号链接
一个属性和值与下一个属性和值之间用分号，最后一个分号可以省略
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
<!--h1{}:选择器-->
h1 {
<!--color:属性；red:值-->
color: red;
font-size: 30px;
}
</style>
</head>
<body>
<h1>呵呵哒</h1>
</body>
</html>
CSS引入方式
1. 内联式：通过标签的style属性，在标签上直接书写
<div style="width:100px; height:100px; background:red ">......</div>
2. 嵌入式：通过style标签，在网页上创建嵌入的样式表
<style>
<!--h1{}:选择器-->
h1 {
<!--color:属性；red:值-->
color: red;
font-size: 30px;
}
</style>
3. 外链式：在<head></head>中通过link标签，链接外部样式文件到页面中
<link rel="stylesheet" type="text/css" href="css/main.css">
CSS选择器
1、标签选择器（元素选择器）
文档的元素就是最基本的选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
<!--标签选择器-->
h1 {
color: deeppink;
}
<!--标签选择器-->
p {
color: blueviolet;
}
</style>
</head>
<body>
<h1>呵呵哒</h1>
<p>呵呵哒</p>
</body>
</html>
2、类选择器
允许以一种独立于文档元素的方式来制定样式
可以单独使用，也可以混合使用
只有在标签中后方可使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/*类选择器*/
.red {
color: red;
}
/*类选择器*/
.blue {
color: blue;
}
</style>
</head>
<body>
<!--标记标签，class固定写法，value随意-->
<h1 class="red">呵呵哒</h1>
<h1 class="blue">呵呵哒</h1>
</body>
</html>
3、层级选择器（后代选择器\上下文选择器）
创建规则，使这些规则在某些文档结构中起作用，而在另外一些结构中不起作用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* 层级选择器*/
div h1 {
color: red;
}
/* 层级选择器*/
div p {
color: deeppink;
}
</style>
</head>
<body>
<div>
<h1>DIV里的hi标签</h1>
<p>DIV里的p标签</p>
</div>
</body>
</html>
相对地址与绝对地址
网页上引入或链接到外部文件，需要定义文件的地址，常见引入或链接外部文件包括以下几种：
<!-- 引入外部图片 -->
<img src="images/001.jpg" alt="图片" />
<!-- 链接到另外一个网页 -->
<a href="002.html">链接到网页2</a>
<!-- 外链一个css文件 -->
<link rel="stylesheet" type="text/css" href="css/main.css" />
<!-- 外链一个js文件 -->
<script type="text/javascript" src="js/jquery.js"></script>
相对地址
相对于引用文件本身去定位被引用的文件地址，以上的例子都是相对地址，相对地址的定义技巧：
“ ./ ” 表示当前文件所在目录下，比如：“./pic.jpg” 表示当前目录下的pic.jpg的图片，这个使用时可以省略。
“ ../ ” 表示当前文件所在目录下的上一级目录，比如：“../images/pic.jpg” 表示当前目录下的上一级目录下的images文件夹中的pic.jpg的图片。
绝对地址
相对于磁盘的位置去定位文件的地址，比如：<img src="C:\course5\03day\images\001.jpg" alt="图片" /> 绝对地址在整体文件迁移时会因为磁盘和顶层目录的改变而找不到文件，相对地址就没有这个问题。
列表标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
ul {
/*list-style: none;列表前的 . 取消*/
list-style: none;
}
ol li a {
/*取消下划线*/
text-decoration: none;
}
</style>
</head>
<body>
<!--
列表标签 无序列表
square：设置前面的标志为块状图形
circle：设置前面的标志为空心圆
disc：默认实心圆
-->
<ul type="square">
<li>娃哈哈</li>
<li>爽歪歪</li>
<li>呵呵哒</li>
</ul>
<!--
有序列表
type='1' 123
a abc
A ABC
start="2" 表示起始位置
-->
<ol type="1" start="2">
<li>
<a href="https://www.baidu.com">百度</a>
</li>
<li>
<a href="https://www.sina.com">新浪</a>
</li>
<li>
<a href="https://www.163.com">网易</a>
</li>
</ol>
</body>
</html>
CSS属性
布局样式常用属性
width 设置元素(标签)的宽度，如：width:100px;
height 设置元素(标签)的高度，如：height:200px;
background 设置元素背景色或者背景图片，如：background:gold; 设置元素背景色为金色
padding 设置元素包含的内容和元素边框的距离，也叫内边距，如padding:20px;padding是同时设置4个边的，也可以像border一样拆分成分别设置四个边:padding-top、padding-left、padding-right、padding-bottom。
margin 设置元素和外界的距离，也叫外边距，如margin:20px;margin是同时设置4个边的，也可以像border一样拆分成分别设置四个边:margin-top、margin-left、margin-right、margin-bottom。
float 设置元素浮动，浮动可以让块元素排列在一行，浮动分为左浮动：float:left; 右浮动：float:right;
border 设置元素四周的边框，如：border:1px solid black; 设置元素四周边框是1像素宽的黑色实线
以上也可以拆分成四个边的写法，分别设置四个边的：
border-top 设置顶边边框，如：border-top:10px solid red;
border-left 设置左边边框，如：border-left:10px solid blue;
border-right 设置右边边框，如：border-right:10px solid green;
border-bottom 设置底边边框，如：border-bottom:10px solid pink;
文本常用样式属性
color 设置文字的颜色，如： color:red;
font-size 设置文字的大小，如：font-size:12px;
font-family 设置文字的字体，如：font-family:'微软雅黑';为了避免中文字不兼容，一般写成：font-family:'Microsoft Yahei';
font-weight 设置文字是否加粗，如：font-weight:bold; 设置加粗 font-weight:normal 设置不加粗
line-height 设置文字的行高，如：line-height:24px;表示文字高度加上文字上下的间距是24px，也就是每一行占有的高度是24px
text-decoration 设置文字的下划线，如：text-decoration:none; 将文字下划线去掉
text-align 设置文字水平对齐方式，如text-align:center 设置文字水平居中
text-indent 设置文字首行缩进，如：text-indent:24px; 设置文字首行缩进24px
<p></p>在使用时，系统会默认增加几个像素间距，如果不想使用系统默认的可以自己设定，如：margin=0px
表单
文本框
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--label:显示文字-->
<label>用户名：</label>
<!--input type="text"表示输入框-->
<input type="text" />
<br>
<label>密码：</label>
<!--password：密码框-->
<input type="password" />
</body>
</html>
单选按钮、复选按钮
<label>性别</label>
<!--radio 单选按钮-->
<!--checked 默认选择 -->
<!--name属性需要设置成一个组-->
<input type="radio" name="sex" checked/>男
<input type="radio" name="sex" />女
<br />
<label>兴趣爱好</label>
<!--多选框-->
<input type="checkbox" />篮球
<input type="checkbox" />台球
<input type="checkbox" />足球
选择文件上传
<label>上传图像</label>
<input type="file" />
大号输入框
<label>自我介绍</label>
<textarea ></textarea>
下拉框
<label>请选择城市</label>
<select >
<option >北京</option>
<option >上海</option>
<option >深圳</option>
</select>
提交按钮
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
from：设置表单
action：表示动作：设置url地址
method：请求方式
name：当前端的数据在提交到后台的时候，需要把name属性一起提交过去
-->
<form action="http://www.baidu.com" method="get">
用户名：<input type="text" value="user" /> 密码：
<input type="password" value="pwd" />
<input type="submit" value="提交" />
</form>
</body>
</html>
普通按钮
<input type="button" value="按钮" />
重置按钮
<input type="reset" value="重置" />
表单总结
表单用于搜集不同类型的用户输入，表单由不同类型的标签组成，相关标签及属性用法如下：
1、<form>标签 定义整体的表单区域
action属性 定义表单数据提交地址
method属性 定义表单提交的方式，一般有“get”方式和“post”方式
2、<label>标签 为表单元素定义文字标注
3、<input>标签 定义通用的表单元素
type属性
type="text" 定义单行文本输入框
type="password" 定义密码输入框
type="radio" 定义单选框
type="checkbox" 定义复选框
type="file" 定义上传文件
type="submit" 定义提交按钮
type="reset" 定义重置按钮
type="button" 定义一个普通按钮
value属性 定义表单元素的值
name属性 定义表单元素的名称，此名称是提交数据时的键名
4、<textarea>标签 定义多行文本输入框
5、<select>标签 定义下拉表单元素
6、<option>标签 与<select>标签配合，定义下拉表单元素中的选项
outline 设置input框获得焦点时，是否显示凸显的框线，一般设置为没有,比如：outline:none;
placeholder 设置input输入框的默认提示文字。
选择器
ID选择器
通过id名来选择元素，元素的id名称不能重复，所以一个样式设置项只能对应于
页面上一个元素，不能复用，id名一般给程序使用，所以不推荐使用id作为选择器。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*查找id选择器使用#*/
#red {
width: 200px;
height: 200px;
background: deeppink;
}
</style>
</head>
<body>
<!--id:表示唯一的属性-->
<div id="red"></div>
</body>
</html>
组选择器
多个选择器，如果有同样的样式设置，可以使用组选择器。
.box1,.box2,.box3{width:100px;height:100px}
.box1{background:red}
.box2{background:pink}
.box2{background:gold}
<div class="box1">....</div>
<div class="box2">....</div>
<div class="box3">....</div>
伪类选择器
常用的伪类选择器有hover，表示鼠标悬浮在元素上时的状态。<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*hover：表示当鼠标移动到a标签身上或者离开a标签调用的样式*/
a:hover {
color: green;
background: lawngreen;
font-size: 50px;
}
</style>
</head>
<body>
<!--
伪类选择器，一般设置在a标签上
剩余两个为：span laber 行内标签
-->
<a href="#">百度</a>
</body>
</html>
全局选择器
*表示所有标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
color: red;
}
</style>
</head>
<body>
<h1>a</h1>
<h2>b</h2>
<span>c</span>
</body>
</html>
属性转换
display属性是用来设置元素的类型及隐藏的，常用的属性有：
1、none 元素隐藏且不占位置
2、inline 元素以行内元素显示
3、block 元素以块元素显示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
a {
/*display: block;:把行内标签转换成块标签*/
display: block;
width: 300px;
height: 200px;
background: deeppink;
}
div {
width: 300px;
height: 200px;
background: black;
/*把块标签转换成行内标签*/
display: inline;
}
</style>
</head>
<body>
<a href="#">98k</a>
<div>haha</div>
</body>
</html>
返回顶部
<body>
<p id="top">1</p>
<p>1111</p>
<p>---</p>
<p>1111</p>
<a href="#top">返回顶部</a>
</body>
元素溢出
当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来设置。
overflow的设置项：
1、visible 默认值。内容不会被修剪，会呈现在元素框之外。
2、hidden 内容会被修剪，并且其余内容是不可见的。
3、scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
4、auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
表格标签
1、<table>标签：声明一个表格
2、<tr>标签：定义表格中的一行
3、<td>和<th>标签：定义一行中的一个单元格，td代表普通单元格，th表示表头单元格
border-collapse 设置表格的边线合并，如：border-collapse:collapse;
rowspan='':单元格竖着合并 colspan=''：单元格横着合并
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*大边框*/
body {
border: 1px solid black;
width: 1000px;
height: 500px;
margin: 0 auto;
/*文字居中*/
text-align: center;
/*合并边框*/
border-collapse: collapse;
}
/*小边框*/
table th,
td {
border: 1px solid black;
}
.bg {
background: powderblue;
}
</style>
</head>
<body>
<!--
声明一个表格
<tr>:表示一行数据
<td>:表示一列数据
-->
<!--cellspacing="0":间距设置为0-->
<table cellspacing="0">
<tr class="bg">
<!--th：表头，加粗-->
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<!--此td与上方td对应-->
<tr>
<td>柳岩</td>
<td>18</td>
<td>女</td>
</tr>
<tr class="bg">
<td>柳岩</td>
<td>18</td>
<td>女</td>
</tr>
<tr>
<td>柳岩</td>
<td>18</td>
<td>女</td>
</tr>
</table>
</body>
</html>
定位
我们可以使用css的position属性来设置元素的定位类型，postion的设置项如下：
relative 生成相对定位元素，一般是将父级设置相对定位，子级设置绝对定位，子级就以父级作为参照来定位，否则子级相对于body来定位。
absolute 生成绝对定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于上一个设置了定位的父级元素来进行定位，如果找不到，则相对于body元素进行定位。
fixed 生成固定定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于浏览器窗口进行定位。
定位元素的偏移
定位的元素还需要用left、right、top或者bottom来设置相对于参照元素的偏移值。
定位元素层级
定位元素是浮动的正常的文档流之上的，可以用z-index属性来设置元素的层级
相对定位
相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。
如果将 top 设置为 20px，那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像素，那么会在元素左边创建 30 像素的空间，也就是将元素向右移动。
#box_relative {
position: relative;
left: 30px;
top: 20px;
}
注意，在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。
绝对定位
绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。
普通流中其它元素的布局就像绝对定位的元素不存在一样：
#box_relative {
position: absolute;
left: 30px;
top: 20px;
}
绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。
浮动
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
权重
CSS权重指的是样式的优先级，有两条或多条样式作用于一个元素，权重高的那条样式对元素起作用,权重相同的，后写的样式会覆盖前面写的样式。
权重的等级
可以把样式的应用方式分为几个等级，按照等级来计算权重
1、内联样式，如：style=””，权重值为1000
2、ID选择器，如：#content，权重值为100
3、类，伪类，如：.content、:hover 权重值为10
4、标签选择器，如：div、p 权重值为1
1、如果类选择器和标签选择器在一起，类选择器的优先级高于标签选择器
<style>
h1 {
color: red;
}
.blue {
color: blue;
}
</style>
</head>
<body>
<h1 class="blue">呵呵哒</h1>
</body>
输出结果为蓝色
2、如果类选择器和id选择器在一起，那么id选择器优先级高于类选择器
<style>
#app {
color: red;
}
.blue {
color: blue;
}
</style>
</head>
<body>
<h1 class="blue" id="app">呵呵哒</h1>
</body>
结果为红色
3、如果内联选择器和id选择器在一起，那么内联选择器的优先级高于id选择器
<style>
#app {
color: red;
}
</style>
</head>
<body>
<h1 style="color: blue;" id="app">呵呵哒</h1>
</body>
结果为蓝色
4、如果两个相同的选择器同时操作一个元素，那么使用就近原则
<style>
h1 {
color: red;
}
h1 {
color: blue;
}
</style>
</head>
<body>
<h1>呵呵哒</h1>
</body>
结果为蓝色
5、后代选择器高于标签选择器
<style>
div h1 {
color: red;
}
h1 {
color: blue;
}
</style>
</head>
<body>
<div>
<h1>呵呵哒</h1>
</div>
</body>
输出结果为红色
6、z-index ：1； 数字越大，级别越大
