css用法

高洛峰

发布： 2016-10-08 15:36:18

原创

1942人浏览过

<br/>

登录后复制

css（cascading style sheets,层叠样式表）是一种页面美化方法，通过编辑css的对象属性达到美化页面的效果。css的操作基本单元为对象，使用css的感觉就像是使用c++/c中的函数，css对象就像是函数，通过定义，声明，调用来使用。

立即学习“前端免费学习笔记（深入）”；

CSS有三种选择器（对象定义和使用方式）：标签选择器，类别选择器，ID选择器

CSS有四种包含方法：行内式，内嵌式，链接式，导入式

立即学习“前端免费学习笔记（深入）”；

标签选择器：

定义：引用的样式对象名{标签属性：属性值；标签属性：属性值；…….}

eg: h1,h2{text-align: center; color: red;}

使用：

……..

类别选择器：

定义：标签名.类名{标签属性：属性值；标签属性：属性值；…….}或者

.类名{标签属性：属性值；标签属性：属性值；…….}

eg: p.center{ text-align: center; }

.right{ text-align: right; }

使用：

……..

(*区别：后一种格式表示所有class属性值为该类名的标签都遵守该类所定义的样式)

　　　 (eg: 定义了.right{text-align: right;}，调用的时候，只要是通过class调用right的属性的标签，都可以表现出right的属性。

…..

;

…… 　　　

;……;等等标签都表现出右对齐的属性。 )

ID选择器：

定义：#id名称{标签属性：属性值；标签属性：属性值；…….}

eg: #sample{font-family:宋体; don’t-size:60pt;}

使用：

……

立即学习“前端免费学习笔记（深入）”；

行内式：

不需要定义选择器，利用style属性直接为元素设计样式

eg:

……

内嵌式：

先定义选择器，将样式表定义在

之间。

eg:

<html>
        <head>
           <title>xxxxxx</title>
            <style type=”text/css”>
                p{color: #000FF;}
                .info{font-size: 12px;}
             </syle>
        </head>
 </html>

登录后复制

立即学习“前端免费学习笔记（深入）”；

链接式：

定义的对象单独放在一个以.css为扩展名的文件里，在使用标签链接到所需要的网页中，在

之间。

eg:

导入式：

与链接式方法类似，只是通过import的方法导入。

eg:

立即学习“前端免费学习笔记（深入）”；

CSS样式表的优先级：

嵌入式样式表 > 内联式 > 外联式 > 浏览器默认

<br/>

登录后复制