CSS总结

1:概述

•层叠样式表

•标记语言 

•命名规范:一般命名为style.csscss.css

 

2:语法

2.1基础

选择器 +声明(属性:值)

CSS声明总是以分号(;)结束,声明组以大括号({})括起来:

例:p {color:red;text-align:center;}

 

2.2选择器

2.2.1类型选择符

类型选择符就是以DOM作为选择符,即选择某个HTML标签为对象。

格式:

E

{

/*CSS代码*/

}

例:

div{                 

border:3px double#f00;  /*边框为3px红色双线*/

680px;
}

 

2.2.2class选择符

class 选择器用于描述一组元素的样式,class 选择器有别于id选择器,class可以在多个元素中使用

CSS 中,类选择器以一个点"."号显示

在以下的例子中,所有拥有 center 类的 HTML 元素均为居中。

<h3 class=”center”>这个标题居中</h3>

<h2 class=”center”>这个标题也居中</h3>

 

.center {

text-align:center;

}

 

2.2.3id选择符

id 选择器可以为标有特定 id HTML 元素指定特定的样式。

CSS id 选择器以 "#" 来定义

例:

<h2 id=”para1”>这个标题居中变红</h2>

 

#para1

{

 text-align:center;

 color:red;

}    

2.2.4span选择符

span没有结构的意义,纯粹是应用样式

<span id=”xx”> xxx</span> <span class=”xx”>xxx</span>

2.2.5div选择符

div是一个块级标签,可以包含段落、标题、表格等。

格式同上。

2.2.6通配符选择符

通配符是一种特殊的选择符,用于定义页面所有元素的样式。

格式:*{CSS代码}

例:

{   /*将页面中所有元素的外边距和内边距设置为0*/

margin:0px;

Padding:0px;

}

2.2.7

此外还有包含选择符、属性选择符、伪类选择符等之后再说。

3:插入样式表的方式

3.1 外部样式表:

在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。 <link> 标签在(文档的)头部:

<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>

文件不能包含任何的 html 标签。

 

3.2 内部样式表:

 使用<style> 标签在文档头部定义内部样式表

<head>

<style>

 hr {color:sienna;}

p {margin-left:20px;}

body {background-image:url("images/back40.gif");}

</style>

 </head>

 

3.3 内联样式(慎用)

在相关的标签内使用样式(style)属性:

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

 

多重样式优先级:内联>内部>外部

4:div+css

待补充

原文地址:https://www.cnblogs.com/rulasann/p/9229502.html