CSS

来源：互联网发布：php论文范文参考5000字编辑：程序博客网时间：2024/06/16 18:41

一、全称cascading stytle sheet层叠样式表，用来美化网页的一种语言

作用：1.美化网页 2.页面布局

二、选择器的基本语法

选择器{

样式规则

属性名1：属性值1；

属性名2：属性值2；

}

选择器：用来选择标签，选出来以后给标签加样式

三、引入CSS的方式

1.行为样式

直接给标签加style属性这种方式叫做行内样式

缺点：1.内容，行文，表现三者分离

2.代码冗余，不可复用

2.内嵌样式：解决了同一个页面中多个标签复用样式的问题

在<head>内写

选择器{

css样式规则

}</style>

3.链接样式

4.导入样式

@import ur("../css/my.css");

</style>

5.优先级比较

如果4种导入方式同时使用，都生效，如果碰到相同属性，后者定义者优先（就近原则）

如果定义多个Style标签，多个style，标签都起作用

注意：如果把内嵌样式导入样式放在一个style中，永远是内嵌样式在起作用

四、选择器：选出标签的

常用的选择器7种

一、标签选择器

标签名{样式规则}

二、id选择器

#id名{样式规则}

三、类选择器

<1>不带标签名的

.类名{样式规则}

<2>带标签的

class属性为myclass1的P标签被选中

标签名.类名{样式规则}

四、组合选择器

选择器1，选择器2，....选择器n{样式规则}；

所有的选择器里面的样式规则相同

五、适配器选择器

*{样式} 页面内所有的选择器均被选择

六、子代选择器和后代选择器

1.子代（儿子节点）

div>p{

样式规则}

2.后代选择器（儿子和子孙）

div p{

样式规则

}

3.伪类：不是作用在标签上的，作用在标签的具体某个属性上面

超链接的伪类：

1.访问前的状态

a:link{

样式规则}

2.访问后的状态

a:visited{

样式规则

}

3.鼠标悬停时的状态

a:hover{

样式规则

}

4.鼠标激活时的状态

a:active{样式规则}

*******text-decoration:none;去掉下划线

**如何给一个标题套用多个类选择器？

标签的class属性，可以同时引入多个类选择器，多个类选择器之间用空格分开

如果有多个类选择器，多个类选择器的属性都生效

如果有相同的属性时，定义在css文件中后面的选择器生效，相当于后面的把前面的隐藏了

六、相邻兄弟选择器

h1+p{

样式规则}

<p>.......</p> 这个变化

********选择器的优先级

id选择器>类选择器>标签选择器

七、图片偏移技术

<html>  <head>    <title>图片偏移技术.html</title>      <meta http-equiv="content-type" content="text/html; charset=UTF-8">       <style type="text/css">   label.divClass1 {   width:60px;   height:60px;   background:url(saoma.png); //用来导入图片路径   background-position:-60px 0px;   display:inline-block;   }   </style>  </head>    <body>  <!-- label是行内元素   宽、高不可调 -->    <label class="divClass1">        </label>  </body></html>

阅读全文

0 0