本文章分享的是本人学习CSS的过程及对CSS的认识,因篇幅和时间原因,这里只列出学习CSS基础重点,以供学习CSS的朋友参考!也请大牛们指点相关的错误及不足!
一、CSS概述
CSS : Cascading Style Sheet 层叠样式表
作用:定义了网页的行为,简单的说就是将网页的内容和显示样式分离,从而提高显示的多样性和显示的功能。(就好比html定义的是网页的骨架,css就是为网页穿上外衣)
特点:样式定义灵活多样且丰富多彩,可以设置任意的字体及大小。等等
二、CSS基本语法 *
选择器{
样式属性 a:属性值;
... ...
样式属性n:属性值;
}
例:
p{
color:red;
}
三、CSS的四种使用样式
1、行内样式
例:<p style="color:red;font-size:12em">行内样式</p>
2、嵌入式样式
例:<style type="text/css">
p{
color:red;
font-size:30em;a
}
</style>
3.1、外部样式 (导入式)
例:<style>
@import url(test/mycss.css);
p{
color:red;
font-size:30em;
}
</style>
3.2、外部样式 (链接式)
例:<link href="test/mycss.css" rel="stylesheet" type="text/css"></link>
rel属性是定义当前文档和链接文件的关系
四、样式优先级
样式的优先级遵循就近原则,出现重复的样式定义时,最近的定义样式优先级别最高
五、CSS的常用选择器
1、标签选择器
语法: 标签名称{... ...}
例: p{color:red;}
2、id选择器
语法: #id名称{... ...}
例: #p{color:red;}
3、类选择器
语法: .类名{... ...}
例: .p{color:red;}
4、包含选择器
语法: 选择器1 选择器2{... ...}
解释:选择所有被选择器1包含的选择器2
例: div p{color:red;}
5、选择器分组
语法: 选择器1,选择器2{... ...}
解释:选择所有选择器1和选择器2
例: div,p{color:red;}
6、伪类选择器
语法: 标签名称:选择器{... ...}
例:a:link{color: red} /* unvisited links */
a:visited{color:blue} /* visited links */
a:hover{color: yellow } /* user hovers */
a:active{color: lime} /* active links */
六、CSS常用属性
1、字体设置
font-size color 简写样式
(不难,建议查询帮助文档)
2、文本设置
例:p{
text-decoration:underline; /*设置文本装饰*/
}
3、背景设置
例:div{
width:70em; /*设置标签宽度*/
height:35em; /*设置标签高度*/
background-color:red;/*设置背景颜色*/
background-image:url('***.jpg') /*设置背景图片*/
background-repeat:no-repeat; /*设置背景平铺*/
}
简写:div{
width:70em;
height:35em;
background:red url('***.jpg') no-repeat;
}
4、列表设置
例:ol li{
list-style-type:none; /*设置与选项的预选标记*/
}
5、display属性
解释:display设置如何显示
例:ol li{
display:inline;
}
6、float属性
解释:设置元素脱离正常的文档流(由上而下,由左到右)显示
例:#d1{
float:right;
}
#d2{
float:right;
}
#d3{
float:right;
}
七、盒子模型 **
盒子模型是css的基石之一,网页上的每一个元素都被看成是装了东西的矩形盒子。这个盒子由元素的内容、padding(填充/内边距)、border(边框)和margin(边界/外边距)组成。在默认情况下盒子的没有边框,背景色是透明,所以在默认情况下我们是看不到盒子的
CSS的基础部分就分享到这里了!当然有很多都没有点到,如果真的是专门学习CSS的朋友,或开发人员还是要多多查询帮助文档的!也请资深人士指点错误及不足!