Xuanmo Blog

css伪类

锚伪类

a:link{color:#f00},未访问的链接  

a:visited{color:#f00},已访问的链接

a:hover{color:#f00},鼠标移动到链接上

a:active{color:#f00},选定的链接

点我尝试一下

 重点：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。

 重点：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

背景属性

background:  背景属性简写；

background-attachment:  固定背景，不随其他元素滚动,{(scroll 默认)（fixed 固定定位）}

background-color:  背景颜色；（可用英语单词、rgb(0,0,0)、十六进制颜色）

background-image：背景图片，{ url("图片地址") }

background-repeat:  背景图片重复，（no-repeat 不重复、repeat-x x轴重复、y轴重复、repeat 重复）

background-position:  背景图片定位，{（top bottom、left right、center）(100% 100%)(100px 100px)}

background-position实例

background-size:  背景图片大小，{（cover contain 不可用于background后，单独设置）（100% 100% 相对于其父元素的宽高度）(100px 100px)}
background-attachment实例

定位

position:  static(默认值)，静态定位，元素处于普通文档流（画板）

position:  raletive(相对定位)元素框相对于其正常为位置定位，仍然处于普通文档流中（画板） 其所占空间依然存在

position:  absolute(绝对定位)，元素框从文档流删除，漂浮起来了，原来所占据的空间删除了，并相对于除了static定位以外的第一父元素定位 （临近原则）

知识点:  相对定位和绝对定位通常是配合使用的。

position:  fixed(固定定位)元素框从文档流删除，漂浮起来了，原来所占据的空间删除了，相对于浏览器窗口定位

z-index:  层级，absolute 与fixed才有的属性 谁层级越高就优先显示谁

clip:  裁剪absolute绝对定位元素的边框,(上 下 左 右)

控制文本

text-indent:  px  em(首行缩进)

text-decoration:  none(没有样式)

text-decoration:  underline(下划线)

text-decoration:  overline(上划线)

text-decoration:  line-through(中间线)

word-spacing:  词间距，后跟单位（+ px、- px）

letter-spaning:  字间距，后跟单位（+ px、- px）

text-transform:  capitalize(首字母大写)

text-transform:  uppercase(大写)

text-transform:  lowercase(小写)

text-transform:  none(默认)

控制字体

color:  字体颜色 三种 第一种：red blue green （测试用）、 第二种：rgb();（不常用）、 第三种：十六进制（常用）

font-family:  "Microsoft Yahei"(字体)

font-weight:  字体加粗（100-900）

font-weight:  normal 默认值=500

font-weight:  bold 加粗=700

font-weight:  bolder 更粗

font-weight:  linghter 更细

font-size:  文字的大小,单位偶数（14px、2em、%基于父元素的字体的尺寸）

smaller:  设置为比父元素更小一级 2px

largter :  设置为比父元素更大一级 2px

font-style:  normal(默认值)

italic 文本字体倾斜 对文字、单词的正常结构有一定的倾斜改变

oblique 文本倾斜显示 仅仅是让文本正常的情况变倾斜而已

line-height:  px、百分比%

font:  设置的顺序(font-style、font-variant:small-caps 显示小型大写字母、font-weight、font-size/line-height 常用、font-family)

border/outline

border:  宽度 类型 颜色

border-width:  medium(默认的)

border-width:  thin(细的)

border-width:  thinkv(粗的)

border-style:  cnonev(=hidden,用于解决表格边框起冲突)

border-style:  solid(实线型)

border-style:  dotted(点状线)

border-style:  dashed(虚线)

border-style:  double(双线)

border-color:  颜色,后跟(十六进制、颜色、)

border-color:  transparent(边框透明)

border-top:  上边框

border-right:  右边框

border-bottom:  下边框

border-left:  左边框

margin/padding

margin:  上 右 下 左,后跟单位(像素px、百分比%、相对单位em、英寸in、毫米mm)

margin-top:  上外边距

margin-right:  右外边距

margin-bottom:  下外边距

margin-left:  左外边距

margin:  10px上下左右外边距为10px

margin:  10px 20px上下10px、左右20px

margin:  10px 20px 30px上外边距10px、左右外边距20px、下外边距为30px

margin:  10px 20px 30px 40px上、右、下、左

知识点：

1、行内元素设置上下左右内外边距没用

margin:  浏览器默认为没设置

padding:  设置但不起效果

2、外边距合并

a、当一个元素出现在另一个元素上边时，第一个的下外边距和第二个的上外边距会产生合并，两个盒子之间上下边距为大的值

b、当一个子元素包含在另外一个父元素（假设没有内边距 没有边框）中时，他们的的上外边距会发生合并，去数值大的

列表样式

list-style-type:  none没有  disc 默认值 实心圆   circle空心圆点  square实心方块

list-style-image:  url(路劲)

list-style-position:  设置前面的图标的位置  outside 默认值 在内容外面  inside 在内容里