CSS
css基本语法
选择器{
属性：值
属性：值
}
选择器：选中页面中的标签。
属性：设置标签的特性，特征。
值：与属性相对应的值。
三种形式
行内样式
在HTML标签上，使用style的属性设置css样式
<标签名 style="属性:值;属性:值;"></标签名>
内部样式
style写在head标签的后面,可以实现共享
<head>
<style>
h1{
color:red;
}
</style>
</head>
外部样式
写在独立的css文件内，以css后缀结尾
在使用css的html的页面，要使用内链,到title后面
/*index.css*/
h2{
border:10px solid blue;
}
<head>
<meta charset="utf-8">
<title></title>
<!-- 内联形式 -->
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
一般用外部样式，高内聚，低耦合，代码复用性强
优先级
采用就近原则 行内>内部和外部，内外部看link与style位置
选择器
标签选择器(范围大)
标签名{
}
ID选择器(精度高)
html标签都可以定义一个id属性,作为该标签在页面中的唯一标识，更加准确
<标签名 id=“值”>
ID选择器的语法
#ID值{
属性:值;
}
Class选择器
HTML都可以设置class属性值。允许一个页面多个标签设置为相同class值，一个标签也可以有多个class值，最常用
<标签名 class="值1 值2 值3">
.值1{
color:red;
}
属性选择器
[属性名='属性值']{
}
层次选择器
祖孙选择器
先选祖先元素，从中查找后代，在祖先选择器内部选择元素，（限定范围）
祖先选择器 后代选择器{
}
父子选择器
只能往下查找一代子孙，不会一直向下挖
父选择器>子选择器{
}
兄弟选择器
选择相同父选择器下元素
兄选择器+弟选择器{
}
兄选择器~弟选择器{
}
常用属性
尺寸
width :min-width,max-width
height:min-height,max-height
单位：像素，百分比
注意：对于display属性为inline的元素，尺寸设置不起作用
针对不同分辨率的屏幕
字体
color:设置字体颜色
font-size：设置字体大小，单位是像素px；
font-weight：bold 100~800,一般400
font-family：(字体类型)
font-align：对齐方式，left,right,center
text-decoration：装饰线,none
背景
background:背景颜色和图片
background-color:颜色
颜色名：red/grean,十六进制：#RGB，#RRGGBB，#RGBA，6位16场子
制函数：rgb(255,255,255), rgba(255,255,255,1);
backgrounf-img ：图片 (url地址) 存在平铺，小图片重复出现，用到repeat
background-repeat：图片是否重复
background-position：图片位置
盒子模型
html元素，在页面中都占有一个矩形区域
红色是蓝色的内容，白色margi，绿色border，蓝色padding
边框
border：宽度，类型，颜色
border-radios：圆角
外边距 margin
元素边框到外部其他元素的距离
左右方向的外边距不会超出父元素，也不重合
上下方向的外边距可以超出父元素外面去，也可能重合（可以通过设置其他元素来保证不出界，比如border）
内边距 padding
元素的边框到他的内容之间的距离
浮动
HTML标准文档流（DOM流）
所以html标签中，有两种排列方式
1）行内元素：从左向右排序，一行无法显示才换行
分两类：行内，行内块
<a> <img> <b> <strong> <i> <em> <sup> <sub> <span> <td> <th> <input> <select> <textarea> <button>
2）块级元素：默认从上往下排列，每个元素独占一行
<h1>~<h6> <p> <ul> <ol> <dl> <li> <dt> <dd> <table> <tr> <form> <div>
display属性：html标签的显示属性，block（块），inline(行内 不可设置宽度高度), inline-block（行内块 可以设置）, none(不显示)。
虽然display是可以改变元素的显示方式的，但是一般不建议
如果一个inline需要该，可以变成inline-block
什么是浮动
通过一个float属性，让元素脱离HTML的标准文档流。将元素的排列方式变成从左向右或者从右向左
超脱但不完全
清除浮动
把消失的空间找回来
1）父元素设置固定高度
2）在浮动元素的后面添加一个块级元素
3）伪元素(推荐) 设置一个浮动元素的父元素的伪元素
::before在头部添加伪元素
::after 尾部
定位
脱离标准文档流，到html的上面 css（层叠样式表）
能让元素重叠的唯一方式
相对定位
1）相对定位的元素，在dom流中的位置不会消失（其他元素位置不变）
2）相对于原始位置的变化
position:relative;
top：100px;
相对原来的元素向top的反方向移动100px
绝对定位
1）原来dom中的元素也会消失
2）相对于离他最近的已经定位的父元素进行偏移，如果父标签都无定位，那么相对于标签(根标签 自左上到右下 )进行偏移
position:absolute;
top:100px; //无定位情况下，表示距离html上部100px;
固定定位
1）原来dom中的元素也会消失
2)相对于浏览器的窗口进行偏移
position:fixed;
固定与绝对定位会脱离浏览器控制，变得自由，将会自动适应，只将子元素显示出来就停止。
伪类样式
选择器:伪类样式 选择器:nth-child(下标)
first-child
选择器:nth-child(下标)
在选取的元素中，再根据下标的顺序查找元素，从1开始
主要键对超链接有四种状态
1.未访问链接
:linked
2.已访问链接
:visited
3.鼠标移上
:hover
4.鼠标移下
HTML+CSS布局
1）先从上往下分成多个块
2）再自左向右分成多个块
3）CSS填充每一个细节
风尚堂规划框架
导航栏
banner
主体
页脚
阿贾克斯懒加载
京东图片懒加载
493
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
