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;}
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-blocklist-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增加一些新的特性如下: