CSS基础复习笔记

来源：互联网发布：炒白银实时数据编辑：程序博客网时间：2024/05/14 05:30

继续CSS~~~~~

CSS给HTML化妆。。。。6666

使用CSS话有3中方法：

1、直接在元素中写style=”” 内联样式

2、在头<head></head>中写样式表<style type =”text/css”> </style>。内部样式

3、外部引用 .CSS 文件在头中写<link>引用CSS文件。外部样式

（在做项目中用外部样式）为了代码复用，精炼代码。

CSS语法

只需要将分号隔开的一个或多个属性/值对作为元素的style属性的值

属性和属性值之间用：连接

多对属性之间用 ; 隔开

1、<h1 style=”color:blue;” >CSS的使用</h1>

2、<style type="text/css">

h2{color:#0F0;}

</style>

3、在创建个CSS文件

在css中写注释是/* */ 这样的。

就是和在样式表中写一样，然后引用

这三个属性要写

rel 是什么，是样式表

type是类型是text/css

最后href 链接路径

CSS语法规范

CSS 由多个样式规则组成

每个样式有两个部分：选择器和样式声明

如：

h1 { color:red ; font-size:14px; }

h1是选择器，color是属性，red是值，color:red;是声明

CSS规则特性

1、继承性

父元素的做了样式定义那么子元素也会

如

在样式表中

body{

font-family:”微软雅黑”

}

下面body

写<h1>他就会变，但是有的属性不会继承。

2、层叠性，不冲突的叠加

在样式中写

p{ color:red; }

p{ font-size:16px; }

都有会效果，这就是层叠性。

3、优先级，同一个元素加样式，样式重叠了那么就选择优先级高的。

浏览器默认样式，内部样式，外部样式，内联样式。

他们的优先级：内联 > 内部-外部>默认。

以优先级高的为准。

还有就近原则，谁在后面以谁为主。

如果给一个标签：

p{red }

<link / > green

p{ blue }

那么最后的颜色是blue

就相当于覆盖了。

设置字体的时候

body{font-family:"微软雅黑","文泉驿正黑","黑体"}

可以设置多个字体，因为windows有微软雅黑，但是有别的系统，就可以写个逗号。

在body中写了所以显示的就都有了，是继承性。

CSS选择器

1、元素选择器

通过元素名称来选择CSS作用的目标，比如<h1>、<p>

对一些基本的设置，有统一性的才用这个。

2、类选择器

同一类特征class 类型是相同的。

类选择器允许以一种独立于文档元素的方式来指定样式

语法： className {color:red}

有一类共同特征的。

.importent{color:#FF0}

点classname{属性，属性值}

选择所有class等于importent的元素。。

操作一类元素。

便于样式复用。

3、id选择器

id选择器以一种独立于文档元素的方式来指定样式。

它仅作用于id属性的值

语法： #id{ }

在元素中id=””

在样式表中写 #id名{ }

他是唯一的，操作也是对唯一的操作。

这也是id 与class的区别。

页面中有很多元素不好区分可以加id~~~~~~

4、选择器组

选择器声明为以逗号隔开的选择器列表

将一些相同的规则作用于

选择器组，给一组选择器选中的所有元素统一设置样式。

可以一起写

如：

.importent , #a1{ background-color:#ccc; }

就把类名为importent和id名为a1的都设置为背景颜色为#ccc

5、派生选择器

派生选择器用来选择子元素，分为2中：

后代选择器

选择某元素的所有后代（子孙）元素

子元素选择器

选择某元素的所有子元素

后代选择器：

<p id="p1">四川省<u><b>成都市</b>新都区</u><b>新都大道</b>8号

/* 在p1下选择所有的b元素 */

#p1 b { }

p1与 b 之间有空格。

后代用空格分隔

子元素选择器

同样就是把空格换为大于号，就表示值找儿子，不找孙子。

那么只有p1下层的第一层b设置

而用空格表示所有的这个元素。

后代与子元素选择器，空格与大于号。

6、伪类选择器

通过状态来获取元素

用于设置一个元素在不同状态下的样式。

常用伪类：

link

向未被访问过的链接添加样式

visited

向已被访问的超链接添加样式

active

向被激活的元素添加样式

hover

当鼠标悬停至元素上方时，向该元素添加样式

focus

当元素获取焦点时，向该元素添加样式。。

。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。

a:link{ }

选择没有被点击过的超链接设置样式。

a:visited{ }

选择被点击过的超链接设置样式

#btn:active {background-color:#00F;}

激活的元素，就是正被点中的元素

就是在点中那个按钮时，背景被变为蓝色。

p img:hover{width:150px;hight:150px;}

这个就是p下img，当鼠标悬停的时候宽和高变为150px；

只是悬停，鼠标离开立刻就变回去了。

focus适用于文本框

还有！！！

写文本框是用的input，控件嘛~~~~~~~~

#t1:focus{background-color:#CCC;}

0 0