今天还接着昨天的接着写,废话少说,直接上知识点
首先先对昨天的知识进行下补充
1.css选择器的优先级问题
important > 内联>id > class
注:important是用来设置最终的样式表的
2.border
今天在刷题的时候突然看到border的一个比较有意思的点:
border-radius:50%;
可以将图片设置成圆形环绕
然后就是今天的了
3.分组
在对元素进行布局时可以对多个选择器进行设置,每两个选择器/标签之间用逗号隔开
例子: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才是最终的目的,哈哈。