CSS

来源:互联网 发布:淘宝客店铺软件哪个好 编辑:程序博客网 时间:2024/06/06 02:01
css 层叠样式表
用于定义HTML元素的显示形式
添加方式
1,内联式:直接在元素中加入style属性,只能用网页中的一个元素
<div style="border:1px  solid #000; width:300px;height:200px"></div>
2,嵌入式:书写style标签,在标签中指明样式.可以用于网页的不同元素
<style>
        div{
            width: 300px;
            height: 200px;
            background: #fff76e;
        }
    </style>
3,将样式规则书写道文件中 ,可以用于不同的网页,重用度最好 
<link rel="stylesheet" href="test.css">
含义
如果有多个规则来买哦书同一个元素,那么会根据优先级来决定最终显示是什么样式
优先级顺序: 内嵌式>嵌入式>外联式
css选择器
类选择器
利用元素的class属性来引入类选择器的样式.可以用于多种元素.同一种元素也可以选择使用
.borders{
            border :2px solid red;
        }
<div class="borders"></div> 该div用border类来定义样式
ID选择器
让指定拥有该ID属性的元素采用该样式
<p id="p1">OK</p>  #p1{}   id号为p1的元素采用该样式
元素选择器
:利用元素的标签名称作用选择范围. div{}表示多有div元素采用该样式
包含选择器
元素中子元素采用该样式
<div id="n">
    <P>df </P>
    <span>dsf </span>
</div>
#n p{
            color: aqua;
        }
id号为n的元素所有的p标签采用该样式
通配符
*
表示所有的元素采用该样式
伪类选择器
执行完某个动作的元素采用该样式
#data tr:hover{} 表示鼠标悬停在id为data下的tr元素时,采用该样式
CSS盒模型
内容 content
外边距 Margin
边框 Border
内边距 Padding
盒子之间的关系
标准文档流
概念
指在不使用其他与排列和定位相关的特殊CSS规则时,各种元素的排列规则
1, 文本元素按照从上到下,从左到右的格局布局
2, 块级元素按照从上到下布局
display:none 和 visibility:hidden 的区别
两个式样都可以隐藏元素 ,display:none 不占位置 visibility元素会占位置
内嵌元素和块级元素相互转换
内嵌元素转块级元素 display:block
块级元素转内嵌元素 float:left
css优先级
!important>id>class>element>伪类>*
0 0