CSS(Cascading Style Sheets)层叠样式表
含义
一种计算机语言;
能够实现网页与内容分离;
用来表现文件样式,如HTML或XML;
比較
div与css
假设说div是容器的话,那么css就是装饰或是表现容器样式的事物。比方div是盒子,那么css的作用就是表示盒子的颜色,大小,体积等。
html与css
html是负责网页内容的;css是负责网页样式的,并且css非常好的解耦网页的内容和样式。
选择器
设置选择器之后,我们就能够设置CSS样式了。
那不设选择器行不行呢?能够在word中类比一下,我们就能够把文章中每段或每行的文字都设成一个独有的样式,这个样式能够包含font-size(字体大小),width,height等等。
CSS中的选择器能够分为id选择器,class选择器和Html选择器。
1)、id选择器
能够为标有特定id的HTML元素制定特定的样式,以“#”来定义。
#newnews {
/*最新新闻框架*/
font-size :20px;
margin-left :5px;
margin-bottom :10px;
}
2)、class选择器
用来描写叙述一组元素的样式,可在多元素中使用,以一个点"."号显示。
.replay {
margin-bottom :30px;/*底部的外边距*/
}
3)、html标签选择器
没有标识,直接引用
用法
看了前面的这两个样例,有人肯定会有这种疑惑:我们为newnews,replay设置了样式,那在网页上他们是怎么使用的呢?
接下来,我们就讲一下定义网页的方法。
1)、外部:将网页链接到外部样式表。
2)、内页:在网页上创建嵌入的样式表。
3)、行内:一个用内嵌样式到各个网页元素。
第一种:-->写在css文件里
在其它网页上使用同样的样式时,或为了保持网页的外观一致总体性,能够採用外部样式。外部样式更改也十分方便。
<link href="../css/login.css" rel="stylesheet" type="text/css" />
<!--外部样式表即login.css-->
另外一种:-->写在head头部
当我们仅仅要定义当前网页的样式事,可採用嵌入的样式表。它“嵌”在网页的 <HEAD>
标记符内。
<head>
<title>页面标题</title>
<styletype="text/css">
<!--
p{
color:#FF00FF;
text-decoration:underline;
font-weight:bold;
font-size:25px;
}
-->
</style>
</head>
第三种:-->在html中
当特殊的样式须要应用到个别元素时。使用内联样式的方法是在相关的标签中使用样式属性。
<p style="color: black; margin-left: 20px">
这里是文字!
</p>
CSS看似是一个新东西,但仅仅要动手去实践,就会发现,它的非常多知识都是之前接触到的。比方设置字体、行间距等等,要多多尝试。
介绍了CSS的概念和几种用法后,下篇博客主要讲的是CSS的核心内容。