ajax自学笔记-css的学习

 CSS

 

是对html的一种补充，简而言之，CSS就是要对网页的显示效果实现与word一样的控制

如果不知道如何写CSS样式繁多的属性，不要紧。我们可以随便在页面的任何地点用左键点击后，会出现body标签的属性窗口，在属性值中的style便是我们进行CSS样式设置的通道。他会出现样式生成对话框。取好值后确定后便会在鼠标点击出出现我们刚才设置的样式。然后该设置可以作为CSS参考。

 

将样式表加入到html当中的方式：

1.内联样式表，就是通过刚才的那个方法，点击style.这种方法就是内联的CSS，不是引用的外部CSS。但是这种只能针对一个标签，属性值直接在标签后面，不能用到其他标签，不具有通用性。

2 嵌入样式表，嵌套在head当中。

定义的时候，点击工具栏的标签，选中样式，然后可以添加样式表，这个时候在head元素中就会添加style标签。同时我们就可以继续对话框界面进行元素添加。至于如何创建a.b这样的或者伪元素可以自己去设定，这一切都可以是对话框完成。不用手工。

<style type=”text/css”>

a{}

b{}

c{}………

</style>(abc均是标签)

但是如果要定义到多个网页当中的时候，就需要在每个网页当中都需要添加head里的CSS嵌入。那么这个就是这个不足。那么我们需要改进，那么就是外部样式表

3.外部样式表

就是先要建立一个CSS文件，里面的内容就是嵌入样式表里面的内容。

如果A网页需要用到这个文件，那么在head里面就要有一个Link标签

<link rel=”stylesheet” href=”test.css” type=”text/css” media=”screen”>

 

4。输入样式表

使用@import 这个命令声明引入某个样式。

 

二。样式规则选择器

Html selectot 在CSS中使用了某个标签定义一个样式规则以后，引用该css文件的页面中该标签都会起作用。

Class selectot 当存在一个类的概念，就是说将一种Html标签所创建的各个网页元素分为几类。那么就需要使用class属性设置不同的值。

如CSS文件中

p.normal{color:red}

p.stop{color:green}

这样定义后，就说明P这个标签下面有不同的类别。在HTML页面中时使用class来区分的

<p class=”normal”>putong</p>

就这样，完成了调用。

Id selector 定义某一个特定的html元素。

在CSS中

#redone{color:red}

因为只能为单个html设定CSS，存在一定的局限性。但在js中，可以根据ID值来操作和定位这个标签，所以在标签在JS中会被广泛地使用。

组合selector

伪元素选择器

对某一标签比如超链接标签在点击前的样式在鼠标放上去的样式，在点击后的样式。这种对标签进行过渡修饰

A:active{}选中

A:hover{}移动到上面

A:link{}正常状态

A:visited{}访问过

 

或

P:first-line 段落中第一行文本

P:first-letter 第一个字母

 

注意：

1.一般情况，所有嵌套在某个HTML标签中的HTML标签都会继承外层标签设置的样式规则。这只是一般情况，有的时候被嵌套在里面的标签是不会理会外层定义的。

2。.样式规则优先级： ID选择器>class选择器>连接样式表

 

三 。样式属性

样式属性很多 大致上可以分为以下几类：

字体

背景

文本

位置

布局

边缘

列表

其他

不用深入掌握，但需要了解，有一个全局的印象。感受CSS到底提供了什么效果。

对于不懂的我们可以查看样式属性生成器里面的帮助文档。