CSS的使用

2、

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

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

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

在样式中写

p{ color:red; }

p{ font-size:16px; }

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

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

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

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

以优先级高的为准。

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

如果给一个标签：

p{red }

green

p{ blue }

那么最后的颜色是blue

就相当于覆盖了。

设置字体的时候

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

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

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

CSS选择器

1、元素选择器

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

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

2、类选择器

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

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

语法： className {color:red}

有一类共同特征的。

11111111111111

22222222222222

33333333333333

.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中：

后代选择器

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

子元素选择器

选择某元素的所有子元素
后代选择器：

四川省成都市新都区新都大道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;}