CSS基本语法的总结

最新推荐文章于 2021-12-22 17:45:00 发布

vincent_hika

最新推荐文章于 2021-12-22 17:45:00 发布

阅读量630

点赞数

文章标签： CSS基本语法的总结

CSS基本语法的总结

今天系统的学习了一下CSS(Cascading Style Sheets)的语法。之前看书时候感觉很乱但最后总结下来其实也就两个大的方面。现在记录下来以便帮助以后回顾。

从CSS代码放置的位置可以分为四种：

1. 内联式样式表

这里是指的每个html标签都有一个基本属性style，直接可以利用style设置该标签的样式。例如：

<p style="font-family:Times New Roman; color:blue">content with decoration</p>

2. 嵌入式样式表

要对同一个页面中某种标签都产生统一的样式，而不必要采用上面的第一种方式，提高了代码的重用性。这种方式需要将代码放置在页面的head标签中，如下：

<head>

<!--

p {

font-family: Times New Roman;

color: blue;

}

//-->

</style>

</head>

按这种方式定义的只要该页面中使用<p></p>标签，则会使用该样式，除非定义自身的style属性则会覆盖全局的设定。

3. 外部样式表

为了进一步提高代码的复用性，有时候许多的页面会采用同样的样式，这样就有必要将相同的样式部分提取成一个专门的叠层样式文件，后缀名通常为.css。如果要在某个html中使用它，则需要用如下的语句包含进去，并且放置在<head></head>中：

4. 输入样式表

这种方式是提供css文件中包含另外一个css的语法。当然也能够在html的嵌入式样式定义中使用。使用方法就是包含如下的语句：

@IMPORT url("外部css文件名");

样式选择器

样式选择器一般说是六种，实际个人感觉就是四种基本的加上两种不同的复合定义方式。样式的定义本身就是属性的关键字style。后来为了提供全局的加入了style标签。但是无论采用上面提到四种方式的哪一种都只是针对具体某个标签或者全部的某种标签。例如页面中有十个p标签，如果想让其中4个有一组修饰样式，另外6中为另外一种修饰样式，则只能单个的定义每个p的style属性。代码量最少也就是定义一个全局的控制其中6个一致的，剩余的4个分别定义。但引入class样式选择器后上面的问题的解决就方便的多，只需要定义两个。css样式选择器使得样式的定义方式多种多样，这里就不做过多的个人体会了，重点说总结。样式选择器的六种分别是：

1. html选择器

这个是最基本的css修饰的对象，即每个body以内的html标签一般都可以修饰。

2. class选择器

每个html标签基本都有一个class属性使得它们即便标签名不同，也能够具有同样的修饰样式。

a. 如果针对的是某中标签，则为如下定义方式：

<!--

p.tradition {

font-family: Times New Roman;

color: blue;

}

//-->

</style>