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

　　这里零散的总结一下观看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个部分，如：0,0,0,0。
1、对于选择器中给定各个ID属性值，加0,1,0,0。
2、对于选择器中给定的各个类属性值、属性选择或伪类，加0,0,1,0。
3、对于选择器中给定的各个元素和伪元素，加0,0,0,1。
4、结合符和通配选择器对特殊性没有任何贡献。

这个可以参考博客：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>

友情链接