php学习第三天-----css样式之二-----第三天

今天还接着昨天的接着写,废话少说,直接上知识点

首先先对昨天的知识进行下补充

1.css选择器的优先级问题

important > 内联>id > class

注:important是用来设置最终的样式表的

2.border

今天在刷题的时候突然看到border的一个比较有意思的点:

border-radius:50%;

可以将图片设置成圆形环绕

然后就是今天的了

3.分组

扫描二维码关注公众号,回复: 2677820 查看本文章

在对元素进行布局时可以对多个选择器进行设置,每两个选择器/标签之间用逗号隔开

例子:h1,h2{font-size:16px; color:red;}

4.嵌套

p .name{text-align:center; text-decoration:none;}

5.定位(重点)

position属性值:

relative:相对于本身发生偏移

例子:

.one{
            position:relative;
            padding:5px;
            width:100px;
            border:1px solid red;
            top:5px;
            left:10px;
            }

相对于原来的位置向下移动了5像素 向左移动了10px

absolute:相对于父类发生的偏移,如果没有父类那么就是相当于html。

例子:

<div class="one">
            <ul class="son">
                <li>这是一个子类</li>
            </ul>
            看这里!
        </div>

在style中进行定义:

.son{
            position:absolute;
            top:20px;
            left:30px;
            }

结果就是相对于div盒子距离页面左侧30px 距离页面上边20px

fixed

是默认值,相对于原来位置不发生变化。

6.流动

float

可以进行左右浮动,改变原来的布局

可以用overflow进行清除浮动

7.一些基本的布局总结

字体居中:text-align:center

图片居中:margin:auto;

垂直对齐:padding

8.盒子模型:重点

这个比较重要,所以准备单独再开一章。

9.display

inline:改变页面布局,可以将块元素当做内联元素使用,让页面更加协调。

block:改变页面布局,可以将内联元素当做块元素使用,让页面更加协调。

none:对元素进行隐藏,位置也分给其他元素。

注:与之相类似的元素还有visibility,不过visibility仅仅对元素进行隐藏,位置不让给其他元素。

10.overflow

auto:如果内容被修剪,则会以滚动条的形式显示出来其余的部分。

scroll:内容会被修剪,但会以滚动条的形式进行显示。

hidden:内容会被修剪,且不会以滚动条的形式进行显示。

11.RGB调色原理:

RGB调色原理:red  green  blue(由6个16进制的数组成)

常见的色块代码:

red #ff0000

green #00ff00

blue #0000ff

白色 #ffffff

黑色 #000000

灰色 #808080

总结:到这里,css的样式就差不多复习完了,至于其他的准备先把PHP语法学完之后再结合项目进行提高,因为毕竟学习PHP才是最终的目的,哈哈。

猜你喜欢

转载自blog.csdn.net/sinat_35161044/article/details/81540969
今日推荐