　　这里零散的总结一下观看css权威指南书的知识。生命中的诸多告别，比不辞而别更让人难过的，是说一句再见，就再也没见过。

一、首字母与首行的伪类

<dvi>

    <p>I love you.<br>Hello World</p>

    <p>I love you.</p>

</dvi>

css的代码如下：

p:first-letter {

    color: red;

}

p:first-line {

    color: blue;

}

运行的效果如下：

二、选择器的特殊性

选择器的特殊性由选择器本身的组件确定，表述为4个部分，如：,,,。

、对于选择器中给定各个ID属性值，加0,,,。

、对于选择器中给定的各个类属性值、属性选择或伪类，加0,,,。

、对于选择器中给定的各个元素和伪元素，加0,,,。

、结合符和通配选择器对特殊性没有任何贡献。

这个可以参考博客：http://www.cnblogs.com/xyzhanjiang/p/3653128.html

三、伪类after和before的使用

这个具体参考博客： http://www.cnblogs.com/laden666666/p/6089880.html

对于颜色中的#F00，如果只有三位的话。浏览器会取每一位，并将其复制成两位。如#F01等价于#FF0011。

四、css中长度单位

绝对长度单位：in、cm、mm、pt、pc
相对长度单位：em、ex、px。

在css中，1em定义为一种给定字体的font-size值。如果一个元素的font-size为14px，那么对于该元素，1em就等于14px。

<h1 style="font-size: 24px;">Hello World H1</h1>

<h2 style="font-size: 16px;">World Hello H2</h2>

<p style="font-size: 8px;">Hello World P</p>

添加css的样式如下：

h1, h2, p {

    margin-left: 1em;

}

运行的效果如下：h1，h2，p的左边距分别为24px，16px，8px。

一般来说，px不用来设置字体，设置图像的大小和边框或定位用px比较合适。

五、div中的文字居中

html的代码如下

<div class="radius">Hello World</div>

css的代码如下：line-height和height设置成一样。

.radius {

    background-color: orange;

    border-radius: 5px;

    height: 100px;

    width: 200px;

    text-align: center;

    line-height: 100px;

}

运行的效果如下：使用border-radius，即使是方形的图片也可以显示为圆角的效果。

六、根据子元素条件设置父元素css是不可行的

　　比如，现在有这样的需求：我想让p标签下面的图片居中显示，这样比较好看。我的第一反应是否根据img标签是p标签的子元素而设置p标签的css样式：text-align='center'。目前好像这种方式css好像还不支持。如果可行的话，感觉也会很多问题。浏览器顺序渲染的话，读取到img的时候，还要重新追溯前面的是否p标签。这样页面又要重新渲染一次，很影响效率。直接给p标签定义class就行了。

<p class="img_center">

    <img src="http://images2017.cnblogs.com/blog/****.png" alt="">　　

    <img src="http://images2017.cnblogs.com/blog/****.png" alt="">

</p>

巴特西

css基础---->学习html(一)

一、首字母与首行的伪类

二、选择器的特殊性

三、伪类after和before的使用

四、css中长度单位

五、div中的文字居中

六、根据子元素条件设置父元素css是不可行的

友情链接

最新文章

热门文章