CSS学习笔记

来源：互联网发布：淘宝客服介绍编辑：程序博客网时间：2024/06/05 14:52

Css层叠样式表：将网页中的样式分离出来，完全由css来控制，增强样坏死的复用性和可扩展性。

格式：

选择器（属性名：属性值：属性名：属性值：...）

Css和html代码相结合的四种方式：

1.每一个html标签都有一个style属性。

2.当页面有多个标签有相同的样式，可以进行复用。

<style>

Css代码

</style>

3.当有多个页面的标签有相同的样式时，可以将样式封装一个css文件。

通过在每个页面中定义

<style>

@import url (“1.css”);

</style>

4.通过html中head标签中的link标签链接一个css文件。

技巧：为了增强样坏死的复用性和可扩展性，可以将多个标签进行单独定义，封装成一个css文件，p.css，div.css...

在一个css文件中使用css的import将多个标签样式文件导入。

让后在html页面上使用link标签导入这个总的css文件即可。

1.css

@import url(“p.css”);

@import url(“div.css”);

选择器：样式要作用的标签容器。

当样式分离后，html作用在于用标签封装数据，然后激昂css加载到指定标签

中

基本分类：

1.标签选择器：html中每一个标签名

2.类选择器：每一个标签中的class属性。用 . 的形式表示

只用来给css所使用，可以对不同的标签进行相同的样式设定。

3.ID选择器：每一个标签中的ID属性，但要保证ID的唯一性，用 # 来标识。

ID不仅可以被css所使用，还可以被javascript所使用。

选择器的优先级：ID>class>标签

扩展选择器：

1.关联选择器：其实就是对标签中的标签进行样式定义。

选择器选择器 ...

2.组合选择器：对多个选择器进行相同样式定义。将多个选择器通过，隔开

伪元素选择器：就是元素的一种状态。

a:link:超链接被点击前状态

a:visited:超链接点击后状态

a:hover:悬停在超链接上

a:active:点击超链接时

全定义时有一个顺序：L V H A

p:first-letter

p:first-line

:focus :IE6不支持，ff支持

css滤镜：通过一些代码完成丰富了样式

更多信息请查阅css api！

网页设计时，div+css。

div：行级区域

css块级区域

p:行级区域，p中不要嵌套div

下面是一个字体变大小，变颜色使用选择器的事例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>动态样式</title>
<script type="text/javascript" src="docTool.js"></script>
<script type="text/javascript">
function changesize1(size)
{
var divNode=byId("newsid");
}
function changesize2(className)
{
var divNode = byId("newsid");
divNode.className = className;
}
</script>

0 0