CSS入门学习

1.css简介
层叠样式表
层叠:一层一层的
样式表:很多的属性和属性值
CSS3.0完全参考手册
***使页面的显示效果更加好,提高了显示功能;
2.CSS和HTML的四种结合方式
*在每个html的标签上面都有一个属性 style 把css和html结合在一起
*在head部分使用style;
*引用CSS文件:<style type="text/css">
@import url(*.css);
</style>
*使用头标签Link引入css文件
//一般使用第四种引入方式。


3.CSS的优先级(一般情况)
样式优先级:从上到下,从外到内,优先级由低变高;
后加载的优先级高;


代码规范:
选择器的名称(属性名:属性值;属性名:属性值;)


4.css的选择器(三种):
**要对哪个标签进行操作
(1)标签选择器
*使用标签名作为选择器的名称
(2)类选择器class选择器
*每个html标签里都有一个属性 class
<div class="*"></div>
.class
(3)id选择器
*每个html标签里都有一个属性 id
<div id="*"></div>
#....{}
******优先级 style>id>class>div
5.css的扩展选择器
(1)关联选择器
<div><p>*******</p></div>
设置div标签里的p标签样式,嵌套标签里面的样式
div p{};
(2)组合选择器
<div>aaa</div>
<p>bbbb</p>
把div和P标签设置成相同样式,把不同的标签设置成相同的样式。
div,p{}
(3)伪元素选择器
*CSS里面定义好的样式,可以直接拿来使用;
*比如超链接,**超链接的状态 原始状态 点击状态 鼠标移动上去状态 点击之后的状态
:link  :active  :hover          :visited


6.CSS的盒子模型  上 top 下 bottom 左 left 右 right
(1)边框 border 
(2)内边距 padding
(3)外边距 margin 


7.CSS的布局漂浮 float
  CSS的布局定位 position
    **属性值 
  absolute:将对象从文档流中拖出
  可以用top left等属性对其定位
  relative:对象不可层叠,不会把对象从文档流中拖出
  可以用属性对其定位


8.案例 图文混排 图片和文字一起显示

猜你喜欢

转载自blog.csdn.net/qq_18725165/article/details/80371151