一.css的引入方法
1.行内式 2.内嵌式 3.外链式 4.导入式
1. 行内样式
行内样式是在标签里面加上style属性（style="text/css"）
2. 内嵌样式
样式写在style标签里面，注意，style标签要写在head标签内
3. 外链样式
新建一个txt，将其后缀改为.css，专门写css样式，然后在.html的文件里将link标签写入head标签内，再用link 里href属性检索css文件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导入css</title>
</head>
<body>
<h2 style="color:pink;>这是一个一个一个啊啊啊啊啊</h2>
</body>
</html>二. 选择器
(1).基本选择器：
1、标签选择器（直接在style上写标签名，如div）
2、ID选择器（#t1）
3、类（calss）选择器（.t1）
4、通用选择器(忘了)
基本选择器的优先级： id > 类 > 标签 > 通配符
(2). 包含选择器:
1、子代选择器 获取的某个标签的第一级子标签(如"div>div"意思是div的第一级子标签div)
2、后代选择器 获取某个标签内的所有子标签（如"div div"意思是div的所有子标签以及多级子标签里的div）
3、分组选择器 可以给多个标签加上样式，通过"，"隔开
(3) 属性选择器
div[title]{color: red;}(选中某个标签的某个属性)
input[type="t1"]{background: red;}(确切的等于)
input[type*="t1"]{background: pink;}(某个属性含有某个值)
input[type^="t3"]{background: yellow;}(某个属性以什么开始)
input[type$="t4"]{background: blue;}(某个属性以什么结束)
.msg + {color: red;}(表示下一个标签)
[title="这是一个一个一个啊啊啊啊啊"]{color: yellow;}(属性名称等于某个值)
(4) 伪类选择器
同一个标签，根据不同的状态，有不同的样式即"伪类"，使用的是冒号":"表示的
:link 超链接点击之前的样式
:visited 链接被访问之后（<del>访问码语者</del>）
:hover 鼠标悬停到标签上的样式
:active 被激活的时候，鼠标点击的时候，（不松手）
:focus 某个标签获得焦点的时候
超链接的四种状态的顺序是一定的,不可以改变，顺序 :link :visited :hover :active
(5) 伪元素选择器
:after :before （css2） ::after ::before（css3） 如果需要使用，要加上content属性（如p::before{content: "1145141919810"; color: pink; }）
三.css样式
(ps:css样式特点：1.继承性(子标签受影响) 2.层叠性(优先级高的会覆盖优先级低的))
1.控制字体:
字号 font-size:14px
颜色 color:#bbkkbb
字体 font-family:"微软雅黑"
行高 line-height:150% 1.5em(倍数)
字体的粗细 font-weight:normal blod(粗体)
2. 控制文本
设置文本的缩进 text-indent：2em (可以取负值)
文本对齐方式 text-align : left center right
空白部分的处理 white-space:normal pre nowrap
文本大小写的改变 ： text-transform:none (原文本大小写显示)
capitalize(单词首字母大写)
uppercase(小写转大写)
lowercase(大写转小写)
vertical-align
四. 布局
1.盒子布局：如图
配合"border","padding","margin"进行布局设置
border(边框)：
dotted(点状边框) dashed(虚线框) soli(普通的实线框)
ddouble(双实线框，线的距离用border-width改变)
2.元素分类
块级元素：独占一行，可以设置宽和高，如"div" "p" "hn" 等
内联元素：不会自动换行，设置宽和高的时候是不起作用的，如"span" "a"等
块级元素和内联元素可以进行相互转换：
display: none(元素不显示),block(转换为块级标签),inline(显示为内联标签，默认值)
css隐藏元素的方式:
{display:none;
width:0 height:0
}3.浮动布局(实现块级标签的同行存在，比如一行存在两个div)
通过设置float属性进行布局
none 不浮动
left 目标向左浮动，而后面的内容会流向对象的右侧
right 目标向右浮动，而后面的内容会流向对象的左侧
清除浮动：clear
4.定位布局
属性:position 定位方式
static : 默认值
absolute: 绝对定位，会将对象从文档流中分离出来，通过设置Left right top bottom 四个方向上的
值相较于父级元素的绝对定位，如果不存在这样的父级元素，相较于body
relative: 相对定位，不会将对象从文档流中分离出来，通过设置Left right top bottom 四个方向上
的值进行相对定位
fixed：生成绝对定位的元表，相对于浏览器窗口进行定位，元素的位詈通过"left","top", "right”以及"bottom”属性进行规定。
5.其他的属性
overflow：
visible：默认值。内容不会被修剪，会呈现在元素框之外。
hidden：内容会被修剪，并且其余内容是不可见的。
scroll如：果内容被修剪，则浏览器会显示滚动条以便查看具余的内容。
auto：如果内容被修剪，则浏览器会显示滚动条以便查看具余的内容。
zoom:
单位em或者%，对图片进行放大和缩小的一个属性，一般取1em或者100%的时候是按照原比例显示的
6.css3弹性盒子
在css中写入display:flex; 即弹性盒子
属性：
flex-direction:弹性盒子中子元素的排列方式
flex-wrap:子元素超过父元素后的换行设置
flex-flow:flex-direction和flex-wrap的缩写
align-items：让弹性盒子在纵轴上如何对齐
justify-content:让弹性盒子在横轴上如何对齐
flex-direction
flex-wrap
flex-flow
align-items
align-content
justify-content
128
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
