2017_7_13 CSS核心属性

零零碎碎

权重

0（!important、内联样式）0（id选择器）0（类选择器）0（标签选择器）

 

伪类选择器

a:link{

color:yellow;

}

 

link未访问时的颜色，visited访问后的颜色，hover鼠标悬停时显示的颜色，可用于其他标签如p标签，actives鼠标点击时的样式，也可用于其他标签。

Link,visited,hover,active（lv ha）书写时顺序不能改变。

Css核心属性

1字体font

1.1font-size

font-size默认为16px；单位em以当前字体大小为基准，若当前元素没有字体大小，则以祖辈元素的字体大小为基准单位。

body{

font-size:20px;

}

     P{

      font-size:56px;

  font-size:1em;

}

最终p标签显示字体为20px，因为首先下面“font-size:1em；”覆盖了 “font-size:56px；

”；然后p标签从祖辈body标签里继承了“font-size:20px;”，所有此时1em=20px。

1.2color

十六进制表示颜色，由0-9、a、b、c、d、e、f十六个数字组成。

#0b(r) ef(g) 98(b)

1.3font-family

font-family:”仿宋”/”Times New Roman”;用引号的原因是让浏览器明白这是一个整体。

font-family:”lemon”,”仿宋”,”宋体”;   以防字体不存在时，可以用其他字体显示内容，其中lemon优先级最高，宋体优先级最低。

1.4font-weight

font-weight:bold/normal/100-500/600-900;

1.5font-style

  font-style:normal/italic;

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

2文本text

2.1text-align

文本水平对齐方式。

text-align:left/right/center;

注意，文本对齐与最近的容器中，而非整个浏览器中；只能是文字，多用于单行文本，多行文本中只有最后一行对齐。

2.2vertical-align

垂直对齐方式，多用于行内元素，不能用于块级元素。

vertical-align:bottom/baseline/middle/top;

将该元素的某一条线与参考文本基线对齐。

每一个文字都有4条线，bottom底线、baseline基线、middle中线、top顶线

想让两个高度不同的行内元素垂直于中线居中，则都添加vertical-align:middle;。

2.3text-decoration

文本修饰。如a标签默认text-decoration:underline;。

text-decoration:underline下线/overline上线/line-through中线/none无线;

2.4text-indent

首行缩进，text-indent:32px/2em;

也可设置为负值，设置为负值是用来隐藏不想被看到但又不得不写的文本，如h1标签

2.5line-height

letter-spacing表示字间距，word-spacing表示词间距。

line-height表示文本每一行的行高，想让文字在容器中垂直居中，可将line-height设置为容器的height值。

3列表list

3.1list-style-type

lisy-style-type:disc/circle/square/none;

3.2list-style-img

list-style-img:url(“”);

3.3list-style-position

list-sytle-position:inside/outside;

 

 

简写：list-style:type/img position;

4边框border

4.1border-width

边框宽

4.2border-sytle

边框样式，属性值有solid  dashed  dotted  double.

4.3border-color

简写 border:width style color;    border-left-color:red;   border-right:width style color;

 

5背景background

5.1background-color

5.2background-img

background-img：url(“”);

当背景图片的尺寸等于容器大小时，背景图完全被显示；背景图片的尺寸小于容器尺寸时，则默认平铺；背景图片的尺寸大于容器尺寸时，图片不能完全显示。

background:repeat/no-repeat; 是否平铺；background:repeat-x/repeat-y;水平平铺、垂直平铺。

5.3background-position

背景图片在容器中的位置。

background-positon:right/left top/bottom; 在容器的四个角显示；

background-positon：Xpx Ypx;表示从（x,y）这个点开始摆放，可取负值。

背景图的固定background-attachment:fixed/scroll;固定、滚动。

简写background:url(“”) no-repeat 100px(Xpx) 100px(Ypx);