css学习总结

1.css在html中被引用的方式有三种：

外部样式表：

<link rel="stylesheet" type="text/css" href="mystyle.css" />

外部样式表：

<style type="text/css">  hr {color: sienna;}</style>

内联样式表：

<p style="color: yellow; margin-left: 20px">This is a paragraph</p>

2.css格式:选择器{属性：值}

 id: #intro{}或者div#intro{}

<div id="intro">This is a test!</div>

class: .important{}  p.important{}

<h1 class="important">This heading is very important.</h1>

<p class="important">This paragraph is very important.</p>

标签:p{}

分组:boby,a,tr,p,h{}

子选择器:#ul li{}

伪类：

a:link {color: #FF0000}/* 未访问的链接 */a:visited {color: #00FF00}/* 已访问的链接 */a:hover {color: #FF00FF}/* 鼠标移动到链接上 */a:active {color: #0000FF}/* 选定的链接 */

3.css模型

 外边距（外边界)：

margin: top right bottom left 可以是像素、英寸、毫米或 em，用%表示则相对于它的父元素

margin:1em 2em;  margin:auto 2em; margin:0.5em 2em 1em;

margin-left: 20px;//margin-right|top|bottom

边框:边框样式、边框宽度、边框颜色

p.aside {border-style: solid dotted dashed double;} {border-style:outset;}
border-top-style
border-right-style
border-bottom-style
border-left-style

 solid dotted dashed double inset outs//实线 点 虚线 双线 向内突出 向外突出 

p {border-style: solid; border-width: 15px 5px 15px 5px;}

p {  border-style: solid;  border-top-width: 15px;  border-right-width: 5px;  border-bottom-width: 15px;  border-left-width: 5px;  }

a:link, a:visited {  border-style: solid;  border-width: 5px;  border-color: transparent;//透明 blue蓝色  }

内边距(填充)padding 与margin一样

内容:里面的内容可以是直接的内容（文本、图片)如果是块元素，则内容可以包含其他行内元素

<div>文本<p>行内元素</p></div>

外边距合并：在垂直上的两个元素外边距会发生合并，最后合并大小为较大的那个。

4 定位

元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。

，通过将 display 属性设置为 block，可以让行内元素（比如 <a> 元素）表现得像块级元素一样。还可以通过把 display 设置为 none，让生成的元素根本没有框。这样的话，该框及其所有内容就不再显示，不占用文档中的空间。

相对定位:元素移动位置时，还占用原来的文档空间，后面还发生移动时按原来的位置定位。

h2.pos_left
{
position:relative;
left:-20px
}
h2.pos_right
{
position:relative;
left:20px
}

绝对定位：移动元素时，原来的文档空间被删除，并重新生成新的块框，相对于浏览器。

.pos_abs
{
position:absolute;
left:100px;
top:150px
}

浮动:当设置为浮动时，它不占用文档空间，在它下层的元素会被隐藏，同时浮动的元素浮动时，遇到会停止，不隐藏不覆盖。父元素与子元素之间用浮动时不用both:clear防止代码标志过多，可以在父元素设置浮动，再处理子元素

.news {  background-color: gray;  border: solid 1px black;  float: left;  }.news img {  float: left;  }.news p {  float: right;  }<div class="news"><img src="news-pic.jpg" /><p>some text</p></div>

固定位置：相对浏览器来说，它的位置不发生变化。

{
position:fixed;
top:30px;
right:5px;
}

5 常用的属性

*{margin:0;padding:0;border:0;}

                font-family:'微软雅黑';font-size:14px;color:#000;font-weight:800;font-weight:bold;加粗 font-style:normal;

normal - 文本正常显示italic - 文本斜体显示oblique - 文本倾斜显示

text-align:right;

line-height: 150%;
vertical-align:baseline;

display: block;|inline-block
list-style:none;
list-style-type:none;
white-space:nowrap;
background-image: url('/i/compatible_ie.gif');
background-color:#F88E8B;

text-indent: -9999px;
text-decoration: none;underline

html { min-width: 966px;background: #f9f9f9;overflow:scroll;hidden|auto|overflow-x:hidden;}

#searchui label{margin:0 0 0 2px;text-transform:uppercase;letter-spacing:2px;font-size:11px;}

        transition:.2s ease-out;cursor:pointer;white-space:nowrap;box-shadow:0px 1px 3px rgba(0,0,0,0.12), 0px 1px 2px rgba(0,0,0,0.24);

还有css增加一些新的特性如下：

• 边框
• 背景
• 文本效果
• 字体
• 2D 转换
• 3D 转换
• 过渡
• 动画
•  多列
•  用户界面