day0820(css概述、css语法分析、选择器、css引入方式)
CSS基础样式表
一、CSS是Cascading Style Sheet的简称，称为“层叠样式表”或者“级联样式表”，是一组格式设置规则，用于控制网页内容的外观，可将页面内容与表现形式分离。
二、1985年5月12日，W3C组织推出了CSS2,使得这项技术在世界范围内得到广泛的应用。
三、CSS3提供了非常多新途径去改善你的设计工作，且做了不少重要的变化。
Css并没有提供功能，只是通过一定的语法格式在页面进行标签的美化，以提升用户体验
CSS优点：
1、样式复用，有效的避免代码臃肿
2、方便网站的后期维护
3、对页面进行精准控制，实现精美、复杂的页面
基本使用方式书写在头标签中 随着文档的加载加载
语法
设置标签{
属性：值;
}
多个CSS样式的集合称为
样式表
有三种方法可以在站点网页上使用样式表：
外部样式（也叫外联式）：将网页链接到外部样式表。
内部样式（也叫嵌入式）：在网页上创建嵌入的样式表。
行内样式（也叫内联式）：应用内嵌样式到各个网页元素。
三种样式的区别在于书写css 的位置，当写在标签内时 行内样式（也叫内联式）只有当前标签可以使用 在当前页中定义的时候 内部样式（也叫嵌入式） 在当前页所有指定标签都可以使用 在外部书写 页面内用过引用的方式使用外部样式（也叫外联式） 只要引用就可以使用
行内样式
语法：
在需要设置样式的标签中使用style属性设置
Style=”属性：值；属性：值；”
正文内容1
正文内容2
正文内容3
只能为当前标签设置样式
内部样式
语法：
书写在style标签中 style标签一般书写在头标签中
设置的标签名（选择器）{属性:值;属性:值；}
可以为指定标签设置样式但如果设置了行内样式则相同属性不会设置
外部样式
语法：
在头标签中使用link引入外部样式
绝对路径：文件由盘符开始至文件的路径(f://cxk.gif)
相对路径：相对于当前代码书写位置的路径(当前代码在F：//test文件夹下 那么访问当前文件夹下的cxk.gif 只需要直接使用文件名即可 如果文件在f下 则使用./cxk.gif)
可以为指定标签设置样式，如果存在设置了相同属性的内部或行内样式则不会显示
CSS简单选择器
标签选择器：
选择指定标签，将当前页面所有标签设置为指定样式
标签名{}
类选择器：
Class选择器，通过为标签设置class，选择设置了指定class值的标签进行样式显示
.类名{}
Id选择器：
通过为标签设置id，选址设置了指定id值的标签进行样式显示，同一个页面中id只能存在一个
#id{}
在进行相同属性设置时，id选择器>类选择器>标签选择器
字体属性
字体、字号：
font（缩写形式）
font-weight（粗细）
font-size（大小）
font-family（字体）
行距、对齐等：
line-height （行高）
text-align （对齐）
letter-spacing （字符间距）
text-decoration （文本修饰 ）
white-space （空白处理 ）
盒子模型
将浏览器当做一个大盒子，中间的内容也是放在各个盒子中，通过设置各个盒子相应属性，对浏览器进行布局
盒子属性
margin（外边距/边界）
border（边框）
padding（内边距/填充 ）
边框属性设置
统一设置
Border: 边框宽度 边框样式 边框颜色
border: 10px double red;
单独边框设置
border-边框位置 ：边框宽度 边框样式 边框颜色
border-bottom: 10px dotted purple;
border-top: 10px dashed pink;
border-left: 10px double yellowgreen;
border-right: 10px solid yellow;
Background背景属性
background-color:#f00; 设置背景颜色
background-image:url(…/images/bg.jpg); 设置背景图片
background-repeat:no-repeat; (repeat-x,repeat-y, repeat)
background-position:1px 3px ;
对应水平位置、垂直位置
数值单位：px 或%
也可以是关键字,水平：left,center,right,垂直：top,center,bottom
background-attachment:fixed;
background: #ff0 url(…/images/bg.jpg) no-repeat fixed 10px 50%;
/* background-position-x: center;
background-position-y: top; */
background-position: 20px 20px;
内边距padding
设置当前块中内容距离边框的距离
上 右 下 左
padding: 1px 2px 3px 4px;
外边距margin
设置当前块距离父块距离
margin: 1px 2px 3px 4px;
根据盒子模型属性边框、内边距、外边距得出，盒子中数据距离浏览器边框的距离
当前盒子内边距+边框+外边距+父标签内边距+父标签边框+父标签外边距
Display属性
设置盒子展示样式
none：此元素不会被显示。
block：此元素将显示为块级元素，此元素前后会带有换行符。
inline：默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block：行内块元素：可设置宽高，但元素前后没有换行符。（CSS2.1 新增的值 ）
浮动float
1、任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。
2、假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行
3、浮动元素会脱离文档流，会压住下一个块元素，但不会压住其内容。
1.浮动原理：浮动在当前行，脱离原来文本，进入到新的一层（浮动层），然后在设定的方向（左右）移动，直到遇到父级盒子的边缘，或者其他浮动块的边缘停止
2.浮动换行：当一行没有足够空间存放所有浮动块时，多出来的盒子会挤到下一行，然后按照设定的方向继续移动，直到遇到父级盒子的边缘或其他浮动块的边缘（也有特殊情况）
3.浮动坍塌：当父级盒子没有设置具体高度，并且子级浮动的情况下，父级的高度会丢失，就是浮动的坍塌。（导致与父级盒子平级的文本会向浮动的盒子下方移动）
4非浮动块特性：
Block：会向上占据浮动块所空出的区域，可以被浮动块遮盖
inline,inline-block，文字
无法出现在浮动块所覆盖的渔区，一般形成环绕效果
5.浮动换行阻挡
一般情况下出现在瀑布流布局当中 如果上一行的浮动块高度不一致，就会导致当前行浮动块在浮动过程中被阻挡，margin也是浮动块停止的边缘。
6：收缩
收缩：一个浮动的元素，如果没有设置width，那么将自动收缩为内容的宽度（这点非常像行内元素）。
清除浮动clear : both;
clear : both;
在进行设置时注意权重
响应式布局页面
页面可以动态的根据客户端分辨率进行页面的调整，不会出现页面过大空缺排版错误等情况
通过获取用户端分辨率对外层盒子进行大小定义