CSS小结

CSS的使用方法有四种：

1.行内样式（例如：<body style="font-size:28px">）

 

2.内嵌样式（例如：在head标签之间，使用<style type="text/css"></style>）

<html>
<head>
<title>一个简单网页</title>
<style type="text/css">
<!--
Body {font-size:28px;}
-->
</style>
</head>
<body>
你好!HTML!(内部样式表)
</body>
</html>

    在style标签内部，有一个属性type=“text/css”，同时，在开始和结尾分别有<!- -和-- >这样的字符。这样做的目的是为了兼容那些早期的（比如低版本的IE3）、不支持CSS的浏览器也能够显示出网页的内容，而<!--、-->这一对特殊符号则是HTML中很重要的注释符号。

 

3.链接样式

在head标签中，添加"<link href="1.css"  type="text/css"  rel="stylesheet">"

rel:指定链接到样式表

type：样式表类型为CSS样式表

href:路径

 

4.导入样式

在<style>标签中，选择下列几种形式的任意一种使用。

@import urll(sheet1.css);

@import url("sheet1.css");

@import url('sheet1.css');

@import sheet1.css;

@import "sheet1.css";

@import 'sheet1.css';

<html>
<head>
<title>页面标题</title>
<style type ="text/css">
<!-- 
   @import url(1.css);
   @import url(2.css);
-->
</head>

<body>
  <h2>CSS标题1</h2>
  <h2>CSS标题2</h2>  
</body>
</html>


以上的四种方式，调用的先后顺序： 行内样式 > 链接式 > 内嵌式 > 导入式

 

CSS常用选择器

1.标签选择器

<style>
h1{
   color:red;
   font-size:25px;
}
</style>

 

2.类选择器
命名时用.rd，用点开始，然后跟上类功能及效果的简写。

使用时在标签中加 class="rd"

<html>

<head>
<title>class选择器</title>
<style type="text/css">
<!-- 
    .one{
           color:red;            /*红色*/
           font-size:18px;    /*文字大小*/
 }
-->
</head>

<body>
    <p class="one">class选择器</p>
</body>
</html>

 

3.ID选择器

用#号加上id号，针对特点的属性设置属性值

<html>
<head>
<title>ID选择器<title>
<style type="text/css">
<!--
    #one{
            font-weight:bold;  /*粗体*/
 }
-->

</style>
</head>

<body>
   <p id="one">ID选择器</p>

</body>

</html>

注：类选择器和ID选择器的区别，类选择器可以给任意数量的标签定义，而ID选择器在页面只能使用一次。如果ID都相同，会导致使用JavaScript的getElementById()时，查找ID错误。所以要保证ID唯一性。类选择器和ID选择器优先级：ID>class

4.全局选择器

使用*号，对所有的HTML元素起作用

 

5.群组选择器

当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔。如： 


p, td, li { 
line-height:20px; 
color:#c00; 
} 

 

6.后代选择器

后代选择器也叫派生选择器。可以使用后代选择器给一个元素里的子元素定义样式，例如这样： 

li strong { 
font-style:italic; 
font-weight:800; 
color:#f00; 
} 
#main p { 
color:#000; 
line-height:26px; 
} 

 

一些常用属性设置

margin: 设置外边距 （四个值时表示：上、右、下、左 ； 两个值时表示：（上下）、（右左）；三个值时表示：上、（右左）、下）

padding:设置内边距 （四个值时表示：上、右、下、左 ； 两个值时表示：（上下）、（右左）；三个值时表示：上、（右左）、下）

border: 设置所有边框属性

　　border-width:

　　border-style:

　　border-color:

display:规定元素应该生成的框的类型  (display:box/*标准声明，盒子显示*/)

text-align:元素中文本的水平对齐方式    vertial-align:垂直对齐方式

line-height:属性设置行间的距离（行高）

work-warp:控制换行

text-decoration:文字修饰符（none; underline下划线; overline上划线; line-through删除线; blink闪烁）

box-orient:盒子元素显示顺序（horizontal:从左到右；vertical:从上到下）

background-repeat:是否以及如何重复背景图像 （no-repeat; 水平位置0 从左开始 ; 50%表示垂直居中）

 

　　

posted @ 2013-10-07 21:26  Tiny_v  阅读(182)  评论(0)    收藏  举报