CSS

CSS概述

css层叠样式表—cascading style sheet

作用：用来定义网页的显示效果。

 

CSS与HTML的结合方式

1、行内结合方式。

在标签内加一个style属性。

例：

<p style="background-color:red">内容</p>


2、内嵌方式

<style type="text/css"> code</style>

3、链接方式（外部样式引入）

<link rel="stylesheet" typle="text/css" href="xxxx.css"></link>

4、导入方式

 <style>
    @import url(xxx.css);
    </style>
注：分号一定要。

4种方式优先级：就近原则；后三种放在头文件中；

 

CSS选择器

html标签选择器

使用html标签名

class选择器

使用标签中的class属性，用.定义

id选择器

使用标签中的id属性，用#定义

 扩展选择器

关联选择器:标签允许嵌套

组合选择器：用逗号隔开，可一次写多个标签

伪元素选择器：a:link || a:visited || a:hover || a:active

                    超链接未点击||被访问||光标移到超链接||点击后的超链接

注：visited中只有color属性有用。

超链接伪元素选择器

 


CSS属性

font

font-style:normal || italic 正常，斜体

font-weight:bold; 粗体

font-size:10px;

font-family:“宋体”;

text

text-indent:10px; 文本缩进

text-decoration:none || underline || blink || overline || line-through

                       无装饰，下划线，闪烁，上划线，贯穿线

text-align:left || right || center || justify 两端对齐

background

background-image:url(“1.jpg”);

background-position:30px 30px;背景图片的位置

background-repeat:no-repeat;背景图片没有重复

background-color:red；

list

list-style:none || square.. || url(“1.jpg”) 列表前编号

list-style-image:url(“1.jpg”) 设置或检索作为对象的列表项标记的图像

其他常用属性

line-height:字体最底端与字体内部顶端之间的距离

float:left || right 向左右浮动配合可clear:none || left || right || both

                      允许两边都可以有浮动对象，不允许左边，不允许右边，不允许两边有

marget-left:设置对象四边的外补丁

posted @ 2014-04-16 23:09  Mio酱  阅读(116)  评论(0)    收藏  举报