您的位置：首页 > Web前端 > CSS

Css

2015-07-24 20:23 465 查看
CSS概念

Cascading Style Sheet

CSS版本:CSS1，CSS2，CSS2.1,CSS3.0

CSS功能

控制HTML页面的显示效果

CSS语法

选择器 {

CSS属性:值;

CSS属性:值;

}

CSS引入页面的方式
1.内联样式
通过HTML的元素的style属性引入CSS
<h1 style="color:red;">Web主页</h1>
无选择器，只针对当前的元素。

2.内嵌样式CSS
在HTML页面中使用<style>引入。
一般放置在<head>内。
<style type="text/css">

h1{color:red;}
div {

}
</style>

3.外联样式
将CSS代码存放在单独的CSS文件中。
<link rel="stylesheet" type="text/css" href="../css/main.css">


CSS选择器(selectors)
选择要作用的HTML元素
1.标记选择器
标记名 {   }
h1{color:red;}
div { }
body { color:blue;}

2.ID选择器
#id {}
<div id="top">
#top {}

3.类选择器
<div id="left" class="navline">

</div>
语法：  .classname {}
案例：
.navline {}

4.所有元素选择器
* {      }

5.组合选择器
选择器选择器 { }
div.navline {}
div#top {}

5.子元素选择器
语法：选择器 选择器 选择器 {}
案例
div ul li a  {}

6.平行选择器
语法：
选择器,选择器,选择器{  }
满足任何一个选择器均可
案例：
div#top,div.navline {}
7.直接子元素选择器
选择器>选择器>选择器 {}

div>ul>li>a {}
8.属性选择器
语法: [属性名] {}
[属性名="值"] {}
[属性名^="值"] {} 以值开头的属性
[属性名$="值"] {}  以值结尾的属性
[属性名*="值"] {}  包含值的属性

案例：
[class] {}
div[class] {}
input[type="radio"] {}
a[href^="http://"] {}
a[href*="#"] {}

9.常用的伪类选择器
文字伪类：
:first-letter
:first-line
元素伪类：
:first-child
超链接伪类：
a:link
a:visited
a:hover
a:active:
表单元素伪类：
:focus
案例：input[type="text"]:focus {}


CSS属性分类

1.文字样式属性

2.块（box）元素的样式属性

3.布局样式

4.位置样式属性

5.列表的样式属性

6.超链接的样式属性

文字样式属性
1.color 文本属性
取值：单词 red，blue等
#999 #999999 十六进制颜色编码
rgb(100,100,200); 红，绿，蓝编码，每个0-255.
如: h1 { color:red;}
h2 {color:#999;}
h3 {color:rgb(10,20,20);}
2.font-size 字体大小
取值：Small，medium，large…或直接指定字体大小

3. font-family 字体 如宋体，仿宋等
Arial，serif，宋体
4. text-align 文字的横向位置
取值:left, right, center, justify
div#top {text-align:center;}

5.font-style 字体的样式，如标准，斜体等
取值：normal, italic…

6.font-weight 字体的粗细
取值：normal, bold, lighter, 100, 200…

7. text-decoration 文本的修饰
取值:
none, blink, underline, overline, line-through
8. text-transform 文本的转换
取值：none, capitalize, uppercase, lowercase
9. vertical-align 纵向位置
取值：baseline, super, sub, top, text-top, middle-bottom, text-bottom

10. word-spacing 单词的间距大小
取值：度量， 如10px, 1.5em.
11. letter-spacing 字符的间距大小吗，取值px点阵或比例em.
度量


HTML元素的显示模型（Box Mode）

1.HTML元素的显示特性：

(1)块元素：Block Element: 在新的一行显示。

body, div，h1，h6，ul，li，p，table

(2)行元素：不在新的一行显示

a, span, b ,i

2.块元素按盒模型进行站位和显示

(1) 外边距（margin）：

(2)边框（border）

(3)内边距(padding)

(4) 内容的长度和高度

块元素样式属性
1.控制外边界的属性
margin:10px;
margin-left:5px;
margin-right:1px;
margin-bottom:2px;
margin-top: 4px;
margin:1px 2px 3px 4px;
2. 控制内边距：
padding:10px;
padding-left:5px;
padding-right:1px;
padding-bottom:2px;
padding-top: 4px;
padding:1px 2px 3px 4px;
3.控制边框属性
border:solid 20px red;
border-style: solid;
border-width:5px;
border-color:#aaa;
border-left-style:
border-right-style:

4.控制块元素内容样式属性：
width 控制宽度，height:控制高度
width:60px; 50%,
height:200px

5.背景颜色
background-color:颜色;

6.背景图片
(1)设置背景图片：
background-image:url(images/tu1.jpg);

div#main {
}
(2)设置背景是否平铺：
background-repeat:repeat;
取值：repeat, repeat-x, repeat-y, no-repeat
(3)设置背景图片的位置
background-position:x y;
x取值：left,center,right,%, px
y取值：top,center,bottom,%,px


列表样式属性
list-style-type: square
取值:circle,none.
list-style:none;


布局属性
1.float: 块元素浮动属性
取值：left,right,none
案例：div#left {float:left;}

2.clear: 清除float
取值：left，right，both。
案例: div#footer { clear:both}

3.display: 块元素和行元素的转换属性
取值:
inline: 块元素按行元素显示
block: 将行元素按块元素显示。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航