首页 > 代码库 > css之基础及布局属性
css之基础及布局属性
css之基础及布局属性
1.CSS三种关联方式
行间样式
如<p style=”color:#f00” >divcss8</p>
内联表方式
(1):先在<head></head>之间加上<style>*********样式***********</style>
(2):html里面采用选择器 调用所有的样式;
<head>
<style>
div{color:red font-weight:hold}
</style>
</head>
<div></div>
外联表方式
- 外联表的原则：结构（html）与表现（css）进行分离
- 在css文件夹里新建文件，写样式,在原html文件中写<link href=http://www.mamicode.com/“css/css.css”rel=“stylesheet” type=“text/css”> (放在head里面)
2.常用样式选择器
<div>
<p>文本</p>
<div class=“body”></div>
<div id=“top”></div>
</div>
- html标记符选择器：选择原页面上的元素；在css样式中 div{color:red; border:1px solid #000; width:200px;height:200px;}
- 有上下文关系的定义：div p{color:blue；}
- 选择定义类（class）选择器：.body{color:yellow}
- id选择器：只能唯一存在；#top{color:pink}
盒子四大元素：content(内容)，margin(外边距)，padding(内填充)，border(边框)
--------------------------选择器( css有就近原则)-------------------------------
选择器名称 在css表的形态 在html中的调用
- html标记符选择器： p,a,img,div,span.... 不用另外加任何东西
- 具有上下关系的选择器: div span a (中间是空格) 不用另外加任何东西
- 类（class）选择器： . ( 比如: .header) <div class="header "></div>
- id选择器 （一般不用id，留给js来操作） # ( 比如: #text ) <div id="text "></div>
- 群组选择器 (优化代码) .left , .right , p , ul , li
- 伪类选择器 （选择器上加上：hover） a:hover{color:#ccc}
选择器的优先级: 行间 > id选择器 > class选择器 > 标记符选择器
3.盒子模型之外边距（margin)
框边界属性
1、margin-bottom:底边距 margin-left:左边距 margin-right:右边距 margin-top:上边距
---------------------margin(外边距)-------------------------
margin:1数字------上右下左 margin:10px;
2数字------上下 左右 margin:10px 10px;
3数字------上 左右 下 margin:10px 10px 10px;
4数字------上 右 下 左 margin:10px 10px 10px 10px;
这四个属性用来设置元素与其相邻元素间的距离。
2、margin功能：简写属性，
用于设置元素的所有边界。这是用于描述元素的内容的边缘到框边缘的距离的。
4.盒子模型之内填充（padding）
框填充属性
1、padding-bottom padding-left padding-top padding-right
功能：毎个容器都有边框，这些属性设置边框与框內元素间的距离
用法同margin.
---------------------padding(内边距/内填充)------------------------- padding:缩写与外边距一样;
注意:使用了padding之后,要减去宽高的值;
5.盒子模型之边框（border）
框边框属性
1、border-top border-bottom border-right border-left
功能：这四个属性都是简写属性，分别设置上，下，右，左的边框属性。缺少情况下，边框没有样式设置。
包含的数值：共有三个边框属性：border{1px solid red;} border:宽度 线的样式 颜色;----------属性没写完敲空格;
2、border-color:功能：简写属性，设置四个边框的颜色值。
数值：可以用颜色名或RGB值。
如果指定单个颜色，则四个边框都显示为这个颜色；
如果指定两个颜色，则顺序为上下，左右；
如果指定三种颜色，则顺序为上，左右，下；
如果指定四种颜色，则顺序为上，右，下，左。
3、border-width:边框的宽度指定长度。
功能：简写属性，可同时设置四个边框的 宽度。
数值：thin -细边框。 medium -中等线宽。 thick -粗线。
长度 -用相对或绝对单位设置边框宽度
border-top-width border-bottom-width border-right-width border-left-width功能：分别设置各个边框的厚度。
4、border-style:设置用于修饰边框的底纹。可以设置下列样式：
none -不显示边框，为缺省值 dotted -点线
dashed -虛线
solid -实线
double -双线
groove - 3D陷入线
ridge - 3D山脊狀线
inset -使页面有沉入感
outset -使页面有浮出感
6.浮动（float）
功能：用于在普通元素流布置规则以外放上元素。
数值： none -无改动。
left -将其它元素内容放到浮动元素右边。
right -将其它元素内容放到浮动元素左边
---------------------float(浮动)-------------------------
为什么要 清除浮动????
浮动带来的负面影响:会使父级对象的高度消失,导致背景图片,边框不能正常显示,margin,padding设置值不能正确显示（特别是上下边的padding和margin不能正确显示）;
清除浮动的三种方式:( 1 ):直接给父级确定的高度; (项目中的扩展,不现实 )
( 2 ):在父级的css里直接加上 overflow:hidden; 但是不能和height同时出现; overflow:hidden;和height同时出现(功能:超出部分被隐藏; )
( 3 ):a:在css里面 .***{ clear:both;} b:在父级结束之前新添 <div class="***"></div>
<div>
<div class="***"></div>
</div>
css之基础及布局属性