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




评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值