css常用样式笔记

css样式全称为Cascading Style Sheets，“层叠样式表”，简称样式表。（层叠的意思就是“权重”、“覆盖”、“继承”，通过良好的层级命名更好的实现效果，以更少的代码实现更多的功能）

引入样式的三种方式：
1. 内部样式：在head内部应用
格式：<style type=”text/css”>选择器 { 属性：属性值； }</style>
2. 外部样式：
新建一个css后缀的文件并保存到网站对应目录
将style中的内容，全部剪切到css文件中；
将新建的css文件与html文件关联起来，右键-css样式-附加样式表。（注意检查图片路径）
3. 行内样式（内联样式）：
<div style=”属性：属性值”></div>

常规样式预设：
body,p,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,input,textarea{padding:0;margin:0;}
body{font-family: Arial,”Microsoft YaHei”,”宋体”}
ul,ol,li{list-style:none;}
table { border-collapse:collapse; border-spacing:0;}
h1,h2,h3,h4,h5,h6{font-weight:normal;}
a{text-decoration:none;cursor: pointer;}
img,input{border:none;}
i{font-style:normal;}
strong{font-weight: normal;}
.fl{float:left;}（样式追加）
.fr{float:right;}
.clear{clear:both;}

常规样式属性和特点：
1、 width : 数值px； 宽度
2、 height : 数值px； 高度
3、 浮动 float:left | 右浮动 right | 取消浮动 none
原理：
1） 做水平布局时所有元素都需要设置浮动
2） 元素设置浮动后，本身是不会占位了，需要给父级盒子固定高度，这样下面的元素就不会往上跑了
3） 拥有浮动元素的宽度之和不能大于父级盒子宽度，否则最后一个盒子就是会挤下去。
4） 盒子加上浮动属性后，宽度会从100%变为自适应。
4、 外边框线：border:1px solid #333；
格式：border：线的粗细 线条类型 颜色值；
线条类型：solid实线 | dashed虚线 | dotted点状线 | double双线（3px）
5、 背景色：background-color:#色值； 也可以直接指定颜色单词
6、 文字颜色：color:#色值； 也可以直接指定颜色单词
7、 外间距：margin
元素实现居中的条件：给盒子一个固定宽度值，同时写上margin:0 auto;
8、 背景图片：background-image：url(路径地址)； 保存时命名不能是中文，否则引用时就是乱码。
a) 背景图不会占位，所有背景图片需要给高度；
b) 默认会在盒子整个范围内水平和垂直方向重复平铺；
c) 背景图是写在样式中的，只是起到了修饰的作用。（复合样式：background）
9、 文本对齐方式：text-align: center; (只会对文字与图片生效)
left左对齐 | center居中对齐 | right右对齐
10、背景图重复：background-repeat：
repeat-x水平方向平铺 | repeat-y垂直方向平铺 | no-repeat不重复平铺
11、背景图定位：background-position: 水平方向 垂直方向；
水平方向X轴：left左 | center中 | right右 | 绝对像素值
垂直方向Y轴：top上 | center中 | bottom下 | 绝对像素值
12、 外间距：margin – 盒子边框与盒子边框之间的距离
当给一个值时：指的是四个方向；
当给两个值时：指的是上下 左右；
当给三个值时：指的是 上 左右 下；
当给四个值时：指的是上 右 下 左；
简写的同时也可以单独定义：
margin-top:上间距
margin-righ:右间距
margin-bottom:下间距
margin-left:左间距
13、内填充: padding –盒子边框与内容之间的距离
当给一个值时：指的是四个方向；
当给两个值时：指的是上下 左右；
当给三个值时：指的是 上 左右 下；
当给四个值时：指的是上 右 下 左；
简写的同时也可以单独定义：
padding-top:上填充
padding-righ:右填充
padding -bottom:下填充
padding -left:左填充
注意点：如果盒子有固定尺寸应用padding后，需要减去padding值，因为padding值会使自身变大。
经验：当margin和padding同时生效时，优先使用padding。
14、line-height: 20px; 文字行高；
作用：盒子设置行高后，文字会在行高的范围内垂直方向居中。
15、字母转换：text-transform
capitalize 首字母大写 | uppercase全部大写 | lowercase全部小写
16、字号大小：font-size:14px;
17、字体加粗：font-weight:bold;
normal 不加粗 | bolder 加粗 | bold 加粗
18、字体斜体：font-style:normal;
normal 正常 | italic 斜体 ｜oblique 倾斜
19、字体族：
网页安全字：中文：宋体，微软雅黑，黑体；
英文：arial，其他罗马字
Font-family : arial,”微软雅黑”；
a) 多个字体之间用逗号隔开，后面字体属于备用字体；
b) 中间有空格的英文字体或中文字体，需要加引号；
c) 中英文混排时，一般英文字体放在前面。
20、文本装饰线：text-decoration:none;
Underline下划线 | line-through删除线 | overline上划线
21、显示为（转换）display:block;
block块级元素 | inline 行级元素 |
22、css3属性，兼容IE9+以上
background-color:rgba(0,0,0,0.5) 网页的三原色
r – red 红；g – green 绿；b – blue 蓝
a – alpha 透明度，取值范围0（完全透明）- 1（完全不透明）
23、position定位：应用场景当网页出现内容覆盖时，使用定位技术
absolute 绝对定位
特点：
1、 元素设置绝对定位后，盒子宽度会变成自适应，并且没有占位。
2、 默认以游览器的四个角为坐标原点，通过left，right，top，bottom来定位的。
relative相对定位
特点：
1、 元素设置相对定位后盒子依然是占位的
2、 绝对定位盒子会以定位的盒子作为参照进行精确定位
fixed固定定位
1、 元素设置固定定位后，盒子宽度会变成自适应，并且没有占位；
2、 默认以游览器的四个角为坐标原点，通过left，right，top，bottom来定位的。
3、不会随着页面内容而滚动。
层级关系：z-index 设置定位元素的层叠关系
1、 只对定位元素生效
2、 值越大，元素的级别就越高，可以为（如：-2）负值
3、 注意这里数值不需要加单位。
23、盒阴影
box-shadow：X轴偏移量 Y轴偏移量 阴影的羽化值 阴影的扩展值 颜色 内阴影（inset）；