css基础（一）

2017-03-08 本文已影响0人 mao_orz

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）

css基础（一）

css基础

样式类型

选择器

尺寸属性

内边距属性

边框属性

外边距属性

表格属性

列表属性

其它

猜你喜欢

热点阅读