继续学习css（2）

今天继续学习css！

首先是伪元素选择器：

1.如果我希望以更加简单的办法来将web界面的段落的首字母大写，可以使用以下方法：

p:first-letter{

font-size:50px;

}

2.如果我希望能通过class来在某些文字段落的开头或结尾统一加入某些符号，可以使用以下方法：

.class:before{

content:"[2]";

color:blue;

}

.class:after{

content:"[3]";

color:blue;

}

这样界面中会显示双引号中的内容。

3.如若我希望能特别选中某个元素中的后代选择器(比如在div元素中有若干个p的子元素)，可以使用以下方法：

div p:first-child{

color:blue;

}

div p:last-child{

color:blue;

}

div p:nth-child(2){

color:blue;

}

最后一种方法可以选定任意编号的后代。双冒号可用于伪元素选择器。

然后我学习了不同选择器的权重大小：

从大到小依次是：style属性（内联样式1000）；

                ID选择器（0100）；

                类选择器，伪类选择器，属性选择器（0010）；

                元素选择器（0001）；

其优先级可以依次叠加。

我还学习了一些css字体属性：

font-family:serif,"微软雅黑","Microsoft Yahei";//设置字体，名称是中文或者英文带空格用引号括起来，在显示时，从最左边字体开始查找，如果没有则向右找直到找到存在的字体或者到最后使用默认字体。

font-size:设置字体的大小；

font-weight:字体加粗可直接写bold，值在100~900之间，从细到粗；

还有一些关于文字属性的小知识：

1.比如在p标签中，我们希望文字能够按照我们的想法对齐，可以使用

p{

text-align:left/right/center/justify;

}

justify向两边对齐。

2.设置行高：

line-height:2;

表示2倍于字体的行高，如果后面加上px则可以直接用像素表示。

3.设置文字装饰：

text-decoration:underline/overline/line-through;

同理，可以用这个属性来去掉a标签上的下划线：text-decoration:none;

另外就是display的属性。

1.块级元素：

可以设置一个类：

.block{

display:block;

}

默认的块级元素是与浏览器界面同宽的，也可以自行调整宽度width:100px; 注意，尽管可见宽度减小，但是会自动生成相应的margin，占据整行。div元素默认的显示方式就是block。

2.行内元素：

.inline{

display:inline;

}

它可以插入行内，不会占据整行空间。

3.行内块元素：

.inline-block{

display:inline-block;

}

与行内元素的区别在于它可以显示上下边距的变化，而行内元素只能显示左右边距的变化。

如果display的值为none，则会直接忽略这个元素，不再显示。

我还了解了一些关于边框的知识，从内到外依次是content，padding，border，margin，分别是内容，内边距，边框，外边距。其中内容的大小可以直接使用width，height来界定，border，padding和margin可以直接设置其大小。