css笔记

第一部分：基础
1.css
-是一种分层设计的思想，把颜色大小等属性放在<style>中，html主要提供内容
-注释：/*这里写注释*/

selector{property:value}
选择器{属性：值}

-在<style>标签内写选择器：

<style>
	table{background-color: antiquewhite;}
</style>

-直接给元素标签加style属性：<table style="background-color: red;" >
代码：

运行结果：

2.选择器（三种）
-元素选择器：通过标签名选择元素
标签名{ }
-id选择器：通过id选择元素（一个元素的id是唯一的，另一个元素不能重复使用）

#id名{   }

-类选择器：需要多个元素都使用同样的css

  .类名{   }

-优先级
-内联样式 > id 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器。
代码：

运行结果：

3.尺寸
-百分比设置：选择器{width:**% height：**%}
-像素设置：选择器{width:**px height：**px}

4.背景
-设置背景颜色：选择器{ background-color:颜色}
-设置图片为背景：选择器{background-image:url(图片路径);}

-背景图片重复：选择器{background-repeat: 属性值}
–属性值有四个：
repeat 水平垂直都重复
no-repeat 不重复
repeat-x 水平重复
repeat-y 垂直重复

-背景图片平铺（会有失真）：选择器{background-size:contain }
代码：

运行结果：

5.文本
-文字颜色：选择器{color: 颜色}
-对齐方式：选择器{text-align: left/center/right}
-首行缩进{text-indent:***em}
-文本修饰：{text-decoration: ***; }
–上划线{text-decoration: overline}
–删除效果{text-decoration: line-through}
–下划线{text-decoration: underline}
–没有下划线的超链接{text-decoration: none}
-行间距：{line-height: 数字或百分比; }
-字符间距：{letter-spacing: 数字; }
-单词间距：{word-spacing: 数字; }
-大小写：{text-transform:属性; }
*-uppercase 全部大写
-capitalize 首字母大写
-lowercase 全部小写 *
-空白格：{white-space: ***; }
-normal 默认，多个空格换行被合并成一个
-pre 显示所有空格 但是长度超过父容器不会换行
-pre-wrap 显示所有空格 但是长度超过父容器会换行
-nowrap 一直不换行直到有br

6.字体
-尺寸：{font-size: 数字px或百分比; }
-风格：{font-style: ***; }
-normal 标准字体
-italic 斜体
-粗细：{font-weight:***; }
-normal 标准粗细
-bold 粗体
-字库：{font-family: ***; }
-宋体 楷体 微软雅黑…
-声明在一起：把上面的所有写在一行（粗体斜体写在前面）
-选择器{font:风格 粗细 字库 尺寸;}
-text-transform:capitalize是首字母大写
text-transfrom:lowercase是全部字母为小写
text-transfrom:uppercase是全部字母为大写
font-weight: bold;字体为粗体

代码：

运行结果：

7.鼠标样式(鼠标悬停时的样式)
-选择器{cursor:***}
-crosshair/help…
-pointer 鼠标移上变成手指

8.表格布局
-选择器{table-layout:***}
-automatic 单元格大小由内容长度决定
-fixed 单元格大小由td设置的width决定

9.边框
-边框线条：选择器{border-style: ***; }
-solid 实线
-dotted 点线
-dashed 虚线
-double 双线
-边框颜色：选择器{border-color: ***; }
-边框线条宽度：选择器{border-width: 数字px; }
-以上综合在一起：选择器{border: 边框线条 颜色 宽度px; }
-每个方向的边框：选择器{border-top/bottom/left/right-style/color/width: ***;}

10.块级元素和内联元素的边框区别
-块级元素（div p h）边框占用的是100%的宽度
-内联元素（span）边框宽度由内容宽度决定 width height都不会生效

-去掉点击后表单边框周围的光效：outline:0

代码：

运行结果：

10.内边距
-元素内容与边框之间的距离
-选择器{padding-left/right/top/bottom:数字px;}
-以上综合在一起： 选择器{padding:上px 右px 下px 左px;}

11.外边距
-元素边框和元素边框之间的距离
-选择器{margin-left/right/top/bottom:数字px;}
代码：

运行结果：

12.超链接状态
-超链接状态有四种
-link初始状态
-visited访问过
-hover鼠标悬停在链接上方
-active鼠标点下去还没弹起

a:状态{color:***;}

-link和@import的区别：
-link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
-link可以加载CSS，Javascript；@import只能加载CSS。
-link加载的内容是与页面同时加载；@import需要页面网页完全载入以后加载。
-link的写法：<link rel="stylesheet" href="index.css">
-import的写法：

<style type="text/css">@import url("index.css");</style>

13.隐藏
选择器{display:none;}：隐藏这个元素，并且不再占有原空间设置。导致浏览器的重排而不会重绘
选择器{visibility:hidden;}：隐藏这个元素，并且继续占有原空间。元素只会导致浏览器重绘而不会重排
opacity=0：指的是元素不可见但存在，保留空间，不影响结构，并且，如果该元素已经绑定一些事件，如click事件，那么点击该区域，也能触发点击事件的

14.html引用css文件

-<link rel=”stylesheet” type=”text/css” href=”css文件地址”/>

15.优先级
-<style>标签和外部css文件都对元素有选择器修饰：优先使用最后出现的
-<style>标签和<style>属性：优先使用属性
-样式中有!important 优先级最高
代码：

运行结果：

16. BFC
-块级格式化上下文
-创建了 BFC的元素就是一个独立的盒子，布局不受外部影响，也不会影响到外面的元素
-内部的Box会在垂直方向，从顶部开始一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生叠加
每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
BFC的区域不会与float box叠加。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。
计算BFC的高度时，浮动元素也参与计算。