码迷,mamicode.com
首页 > Web开发 > 详细

CSS

时间:2017-05-09 12:36:13      阅读:214      评论:0      收藏:0      [点我收藏+]

标签:遵从   路径   链接   div   outside   访问   scroll   through   float   

CSS的语法
位置
<head>
<style type="text/css">
//CSS代码
</style>

语法
选择器{
属性名1:属性值1;
属性名2:属性2;
}
列:
h1{z
font-size; --字体大小
color: blue; --字体颜色
}
注意:多个属性用分号分隔

 

类选择器
语法:
.Class属性值{
。。。。。
}
步骤:
第一步:给指定的html标签加上class属性
第二步:在style中写
.class属性值{
。。。。。
}

 

ID选择器
语法:
#ID属性值{
XXXXX
}

步骤:
第一步:给指定的html标签加上ID属性
第二步:在style中写
#ID属性值{
XXXXXXX
}

 

行内样式
使用style属性引入样式。
列:<h1 style="font-size:10PX;color:red">XXX</h1>

内部样式
在html中写style
列h1{
XXXXX
}

外部样式表表
把CSS代码保存在以CSS结尾的文件中(层叠样式文件)
把CSS文件引入html中;

引入方式两种:
第一种:链接方式
<iink rel="stylesheet" href="文件路径" type="text/css">

第二钟:导入方式
<style>
@import url("文件路径");
</style>

优先级
行内样式>内部样式>外部样式(就近原则)
ID选择器>class选择器>标签选择器

 

高级选择器

后代选择器
父标签 子标签{
xxxxx
}

交集选择器
标签选择器(class选择器或者ID选择器){
XXXX
}

并集选择器
选择器1,选择器2,选择器3,。。。选择器n{
XXXXXXXXXXXXX
}

字体样式
font-family:字体类型
font-size:字体大小
font-weight:字体的粗细(bold)
font-style:字体的倾斜(italic)
font:倾斜 粗细 大小 类型

文本样式
color:颜色
text-align:文本水平对齐方式(left丨center丨right)
text-indent:首行缩进
line-height:行高
text-decoration:修饰线(underline丨overline丨line-through)
vertical-align:垂直对齐方式(top丨middle丨bottom)
注意:vertical-align:用于td中。

超链接伪类
a:link:表示没有访问
a:visited:表示被访问后
a:hover:鼠标悬浮
a:active:鼠标按下未松开

编写顺序:link>visite>hpver>active

背景样式
background-color:背景颜色
background-image:url(图片地址)背景图片
background-repeat:图片平铺方式(no-repeat,repeat,repeat-X,repeat-Y)
background-position:图片的位置(X,Y丨X%,Y%丨center,left,right丨top,center,bottom)
简单写法:background:颜色,图片,位置,平铺方式

列表样式
list-stype-type:列表样式
list-stype-image:url(图片样式)
list-stype-position:位置(inside丨outside)
简单写法:list-stype:图片样式 位置

盒子模型
width:宽
height:宽
border:边框
padding:内边框
margin:外边距 

 

边框
border:简写
border-color:颜色
border-width:边框宽度
border-style:边框的风格
注意:边框分为上右下左,可以分别设置值
border-color:red blue green yellow;

 

外边距
margin:外边距
margin-top:上外边距
margin-left:左外边距
margin-right:右外边距
margin-bottom:底外边距

 

内边距
padding:内边距
padding-top:上内边距
padding-left:左内边距
padding-right:右内边距
padding-bottom:底内边距

display属性
display:none;表示的隐藏元素
display:block;块级元素(显示)
display:inline;内联元素(显示)

 

浮动
float:left,right,none;
注意:a.浮动元素会把当前的块级元素变成内联元素
b.不在标准文档流中.(不会按普通元素排版)

清除浮动
clear:both(清除左右浮动);
left(清除左浮动);
right(清除右浮动);

溢出处理
overflow:none(默认)
hidden(隐藏)
scroll(滚动)
auto(自动滚动)
注意:可以通过overflow:hidden设置浮动元素的父元素的高度,使它包裹整个浮动元

元素定位(position)
static:默认
relative:相对定位
absolute:绝对定位
fixed:固定定位(建议不要使用 部分浏览器不兼容)

注意:a.相对布局的和决定布局如果它的直接父标签是body,那么相对位置和绝对位置
的起始点不相同,如果他们的直接父标签的div,那么他们的起始点都在父标签的左上角。

注意:b.绝对布局都是从父标签的左上角开始,相对布局遵从标准文档流格式。

注意:c.绝对布局一定要设置top或者left才会生效。

 

重叠关系(z-index)
默认值为0,
值可以是任何数,
值越大,位置在越前面。

透明度
opacity:0-1 值越小越透明

 

CSS

标签:遵从   路径   链接   div   outside   访问   scroll   through   float   

原文地址:http://www.cnblogs.com/LunWeiFeng/p/6829889.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!