（2）内嵌样式：在网页里面任意位置（head/body标签之内去写 <style type="text/css"> </style> 其中type=“text/css”` 可以省略不写。 内嵌样式的写法： ele{ } 编译之后格式：
* { 当前页面多少行代码 border: 1px solid red; }（3）外部样式表 ：css写在外部的css文件里面，网页直接调用使用。样式分为：单属性/复合属性样式。如下： A.background复合属性：background: red url(’./image/0.jpg’) no-repeat 0 0; （复合上面不写size）
*background-color: #f9fdff; background-image:url('./image/0.jpg'); background-size: cover; background-repeat: no-repeat; background-position:50px; background-position-x: 50px; background-position-y: 50px;*B.border边框复合样式：border:1px solid red;
border-left:1px solid red; border-left-width: 10px; border-left-style: dashed; border-left-color: blue;以此类推：
border-top:1px solid blue; border-bottom: 1px solid orange; border-right: 1px solid pink;C. 字体样式：
font-size: 14px; 浏览器默认字体是14px, 这个用css默认的值 font-family: serif; 设置字体的 ,css默认的有几个字体,也可以子集自定义字体。需要自己导入字体文件：@font-face
9.组合选择器: （1）子父关系选择器是空格选择
ul li{ color: red; }备注：空格选择器 指匹配当前元素里面的所有后代元素 （2）>选择
#menu>li{ border: 1px solid red; }备注：>选择器指匹配当前元素里面的直接子元素，写的时候也可以根据元素区分class和id
button.navinfo{ border: 1px solid blue; color: red; } ul#menu{ }（3）相邻元素选择器 +(匹配当前元素之后紧跟的元素)
.p1+p{ color: red; }``（4）~（匹配当前元素之后的所有元素） 指的是同级元素匹配
.p1~p{ color: red; }10.子集选择器(css2里面的伪类选择器)：里面的数字是按照序号数
.box>p:nth-child(1){ }下面这两个选择器直接找的是子集里面的第一个或者最后一个
.box>p:first-child{ color: red; }（第一个） .box>p:last-child{ color: red; }（最后一个）上面这三个伪类选择器 可以直接写元素匹配
p:first-child{ color: red; } p:last-child{ color: red; } p:nth-child(3){ color: red; }11.属性选择器：根据元素的属性去匹配元素的。写法： 匹配器[属性]{}
button[type]{ color: red; }（1）多个属性匹配
button[type][class]{ color: red; }（2)根据属性值来匹配
button[class=info][type=button]{ color: red; }(3) 根据属性值来匹配 值是以谁开头 或者 以谁结尾 包含那个字母
button[class^=a]{ color: red; } button[class$=m]{ color: red; } button[class*=f]{ color: red; }(4)???遗漏的选择器 分组选择器
button,p,span{ color: red; } /* .btn,#id,button{ }*/ div>#menu,ul>li.info{ }外部样式使用:在外部建立css文件,引入到网页里面,引入位置在heade或者body里面都可以,外部样式的写法和内嵌样式的写法一致（都是选择器）
引入方式： rel=“stylesheet” type=“text/css” 可以省略不写
<link rel="stylesheet" href="./css/index.css" type="text/css"/>13.css三大样式之间的优先级：若三大样式之间如果存在冲突则为行内样式>内嵌样式>外部样式（行内样式>外部样式>内嵌样式），这与加载css的顺序就有关若三大样式之间 如果样式不冲突 则叠加
14.选择器之间的优先级（内嵌与外部样式存在）： 四个基本选择器之间的优先级 ： d>class>ele>*
15.组合选择器里面的优先级：同匹配方案 牵扯到父级（父级的优先级高）
16.提高样式优先级：！important 提高的比行内样式优先级还高
17.css里面的盒子模型：用来设计和布局的时候使用，包括边距、边框、填充、实际内容一个简单的元素就可以构成盒子模型 浏览器给网页body元素默认一个margin外间距值 8px 一般加入：
*{ margin: 0; padding: 0; }外间距属性：
margin-left: 50px; margin-top: 50px; margin-right: 50px; margin-bottom: 50px; margin: 0 10px 20px 30px; margin: 0px 10px 20px; margin: 0px 10px; margin:0;内监局属性：
padding-left: 20px; padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding: 0 10px 20px 30px; padding: 0px 10px 20px; padding: 0px 10px; padding:0;css样式属性值里面inherit（当前元素的这个属性值继承父元素的这个属性值）
.box>span{ display: inherit; }18.css里面块级元素和行级元素相互转化的问题：使用的使用是 display:block;（转化块级）display:inline-block;(转化行级快) display:inline;（转化行级）。需要注意的是： 两个盒子上下放置，设置外间距； 两个容器间的间距不会叠加，而是取两个里面间距的最大值； 两个行级快之间的外间距会叠加
19.BFC：是指元素相对独立，自身的结构和位置不会影响周边元素。只要元素满足下面任一条件即可触发 BFC 特性：
A. body 根元素 B.浮动元素：float 除 none 以外的值 C.绝对定位元素：position (absolute、fixed) D.display 为 inline-block、table-cells、flex E.overflow 除了 visible 以外的值 (hidden、auto、scroll) 普通流的BFC： 块元素上下结构如果属域同一个BFC，这两个元素之间的外间距会重叠 ,如果将另一个元素用其他元素包裹设置父元素样式 overflow: hidden; 会构建为另一个BFC,这样的两个上下元素之间的间距会叠加 不会重叠21.css里面的伪类：
:hover 悬停伪类 :active 激活伪类 :checked 选择伪类 主要使用 radio checkbox :focus 获得焦点伪类 input表单元素 :after 给元素的内容之后追加内容 :before 给元素的内容之前追加内容下面这两是可用和不可用的伪类(表单元素添加disabled 为不可用 不添加可用)
input:disabled{ color: blue; } input:enabled{ color: green; } .fontbox:after{ content: ""; } .fontbox:before{ content: ""; }22.css里面的尺寸：width height max-width min-width max-height min-height line-height。 line-height: 100px; 属性设置一行的高度 23…css里面的文本对齐方式：text-align: inherit; left center right inherit
24.css里面的像素单位：
（1） px(固定单位像素) rem em %（百分比 相对父容器走百分比） （2）rem 相对根节点 如果给html设置字体大小16px 1rem =16px; （3） em 相对像素 如果父元素没有设置字体大小，相对浏览器走默认像素 ； 如果父容器设置字体大小， 相对父容的字体大小25.input表单元素的轮廓
input { outline: none; /*outline-color: red; outline-width: 2px; outline-style: dashed; outline-offset: 10px;*/ }