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到底提供了什么效果。
对于不懂的我们可以查看样式属性生成器里面的帮助文档。