css基础
样式类型
-
行内样式
<div style="color: red; font-size: 200px">追命</div>
-
内部样式
<style> div { color: red ; } </style>
-
外部样式
<link rel="stylesheet" href="a.css" />
-
导入样式（@import）
style type="text/css" > @import url(css文件路径);或 @import "css文件路径"; /* 在此还可以存放其他CSS样式*/ </style>
选择器
- 所有标签选择器 * {}
- 标签选择器 p {} div {}
- ID选择器 #head {}
- 类选择器 .head {}
- 交集选择器 h3.special{} p#one{}
- 并集选择器 div,p{}
- 后代选择器 div a{}
- 子元素选择器 h1 > strong {}
- 属性选择器
- h1[class]{ color:red;}
选择所有拥有class属性的h1标签- p[id="aside"]{color:red;}
根据属性名相等选择- p[class~="a"]{color:rd;}
只要包含属性，就被选择。ie6不支持。- E[att^="val"] { sRules }
E[att$="val"] { sRules }
选择具有att属性且属性值为以val开头（结尾）的字符串的E元素- E[att*="val"] { sRules }
选择具有att属性且属性值为包含val的字符串的E元素
- 伪类选择器
- a:link {color: #FF0000} /* 未访问的链接 /
a:visited {color: #00FF00} / 已访问的链接 /
a:hover {color: #FF00FF} / 当有鼠标悬停在链接上 /
a:active {color: #0000FF} / 被选择的链接 */
最好的顺序 love hate- :focus（向拥有键盘输入焦点的元素添加样式）
- :first-child（向元素的第一个子元素添加样式）
- 伪元素选择器
- :first-letter（向文本的第一个字母添加特殊样式）
- :first-line（向文本的首行添加特殊样式）
- :before（在元素内容之前添加内容）
- :after（在元素内容之后添加内容）
尺寸属性
- width（元素的宽度）
- 不设置width的子块级元素会继承父块级元素的宽度]
- 子盒子设置宽度为100%,那么这个子盒子的宽与父盒子一样宽
- height（元素的高度）
- max-height（元素的最大高度）
- max-width（元素的最大宽度）
- min-height （元素的最小高度）
- min-width（元素的最小宽度）
- 无继承性
内边距属性
- padding（设置所有内边距）
- 上右下左（顺时针）
- 享有背景色
- padding-bottom（下内边距）
- padding-left（左内边距）
设置为负数，那么盒子会向左方向移动
- padding-right（右内边距）
设置为负数，那么盒子会向右移动
- padding-top（上内边距）
- 小盒子的width是继承自大盒子的话，那么设置小盒子的padding-left不会改变小盒子的大小。
- 无继承性
边框属性
- border-width（设置四条边框的宽度）
border-width:15px;
可能的值：thin，medium，thick，length，inherit
- border-style（设置四条边框的样式）
- border-style:dotted solid double dashed;
border-style:solid;
none：无边框
hidden：与 "none" 相同
dotted 定义点状边框。
dashed 定义虚线。
solid 定义实线。
double 定义双线。
- border-color（设置四条边框的颜色）
border-color:red green blue pink;
- border（设置所有的边框属性）
- border:5px solid red;
- 兼容性最好的消除边框方式：border: 0 none;
- border-radius（边框圆角）
大小为内容的宽度或高度的一半时变成圆
- outline（元素的轮廓（类似边框，不占据空间）
outline:#00ff00 dotted thick;
- 无继承性
外边距属性
- margin（设置所有外边距）,上右下左（顺时针）
- margin-bottom（下外边距）
- margin-left（左外边距）
设置为负数，那么将来这个盒子会向左方向移动
- margin-right（右外边距）
- margin-top（上外边距）
- margin：0 auto;（只对块元素居中有效）
- 要给居中的元素一个宽度，否者无效；
- 该元素一定不能浮动，否者无效。
- 如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者。左右的margin是相加
- 对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与块级子元素的上外边距发生合并，合并后的外边距为两者中的较大者
- margin-right:auto;//有宽度块级元素靠左，默认
margin-left:auto;//有宽度块级元素靠右 - 无继承性
表格属性
- border-collapse（是否合并表格边框）
- border-collapse:collapse;//合并表格的边框
- border-spacing（相邻单元格边框之间的距离，仅用于分离模式）
列表属性
- list-style（设置所有的列表属性）
list-style:none;消除列表项的标记
list-style:square inside url('/i/arrow.gif');
list-style-type 设置列表项标记的类型。
list-style-position 设置在何处放置列表项标记。
list-style-image 使用图像来替换列表项的标记。
- list-style-type（列表项标记的类型）
none 无标记。
disc 默认。标记是实心圆。
circle 标记是空心圆。
square 标记是实心方块。
decimal 标记是数字。
- list-style-image（使用图像来替换列表项的标记）
list-style-image:url("/i/arrow.gif");
- list-style-position（在何处放置列表项标记）
list-style-position（在何处放置列表项标记）
- 有继承性
其它
- content（与 :before 以及 :after 伪元素配合使用，来插入生成内容）
- opacity（不透明度）背景文字都透明
- 层叠性
- 继承性
- 优先级
- 行内样式 > 页内样式 > 外部引用样式 > 浏览器默认样式
!important > 内联 > ID > 伪类|属性选择 >类 > 标签 > 伪对象 > 通配符 > 继承 - 权重计算（！important个数，ID选择器个数，类选择器个数，标签选择器个数）
- 浏览器查找元素顺序：从右往左找
- 盒子的总宽度= width+左右内边距之和+左右边框宽度之和
- 计算盒子模型的总高度时，还应考虑上下两个盒子垂直外边距合并的情况。
- 1)body标签默认带有margin: 8px的属性
2)p标签默认带有margin: font-size 0;
3)h标签也默认带有margin-top和margin-bottom
4)ul默认带有上下的margin以及左边的padding - 行内块元素不能转化为行内元素
- CSS内容移除某个区域
- 利用text-index:-2000em;
- 利用padding 挤开盒子 并且overflow 切割。
- 利用margin拉动盒子配合overflow切割
- 消除inline-block中的空隙
- 去除空格，把代码放在一行上
- 使用margin负值
- .给父级添加font-size:0；
- 使用letter-spacing或者 word-spacing
- 使用float的方式
- 图片默认和文字的基线对齐
- 通栏、版心（980px）
网友评论