div+css学习笔记 import padding margin

来源:互联网 发布:华为手机连接电脑软件 编辑:程序博客网 时间:2024/05/12 05:40
@import url("/css/global.css");
链接样式是以@import url标记所链接的外部样式表,它一般常用在另一个样式表内部。如layout.css为主页所用样式,那么我们可以把全局都需要用的公共样式放到一个global.css的文件中,然后在layout.css中以@import url("/css/global.css")的形式链接全局样式,这样就使代码达到很好的重用性。



5)css优先级
id优先级高于class 
后面的样式覆盖前面的 
指定的高于继承 
行内样式高于内部或外部样式 
总结:单一的(id)高于共用的(class),有指定的用指定的,无指定则继承离它最近的 

margin

  • 如果规定一个值,比如 div {margin: 50px} - 所有的外边距都是 50 px
  • 如果规定两个值,比如 div {margin: 50px 10px} - 上下外边距是 50px,左右外边距是 10 px。
  • 如果规定三个值,比如 div {margin: 50px 10px 20px}- 上外边距是 50 px,而左右外边距是 10 px,下外边距是 20 px。
  • 如果规定四个值,比如 div {margin: 50px 10px 20px 30px} - 上外边距是 50 px,右外边距是 10 px,下外边距是 20 px,左外边距是 30 px。

CSS float

值描述left元素向左浮动。right元素向右浮动。none默认值。元素不浮动,并会显示在其在文本中出现的位置。inherit规定应该从父元素继承 float 属性的值。

块级元素:就是一个方块,像段落一样,默认占据一行出现;


内联元素:又叫行内元素,顾名思义,只能放在行内,就像一个单词,不会造成前后换行,起辅助作用。


一般的块级元素诸如段落<p>、标题<h1><h2>...、列表,<ul><ol><li> 、表格<table>、表单<form>、DIV<div>和BODY<body>等元素。而内联元素则如:表单元素<input>、超级链接<a>、图像<img>、<span> ........ 块级无素的显著特点是:每个块级元素都是从一个新行开始显示,而且其后的无素也需另起一行进行显示。


可以用css的display:inline将块级元素改变为内联元素,也可以用display:block将内联元素改变为块元素。



padding 内边距

如果规定一个值  padding:10px; 所有的内边距都是10px

如果规定两个值 padding :10px 5px; 上下边距是10px 右左边距是5px;

如果规定三个值 padding:10px 5px 15px; 上边据是10px 右和左是5px  下边距是15px


//清除默认样式重定义

body, ul, li, h1, h2, h3, h4, h5, h6, p, form, dl, dt, dd { margin: 0px; padding: 0px; font-size: 12px; font-weight: normal; }
ul { list-style: none; }
img { border-style: none; }



0 0
原创粉丝点击