前言:
最近在写网页,又用到了H5和CSS,所以整理出一份关于CSS的简介,望大家能喜欢
1.1 什么是CSS?
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。[1]
懂了吗?其实看上面这么说我也不懂,不过没关系,举一个简单的例子,就比如我想做一个红色字体为黑体的标题,用HTML标签的话就要这样:
<h1><font color="#990000" face="黑体">被你们发现了,这是一个标题</font></h1>
本来这也没什么,只是想到这个样式的标题还要用100次的话就会很绝望,因为刚才的<font>标签还要用100次,所以,我们就要用到CSS了,我们只要这样:
h1{ color: #990000; font-family: 黑体; }
如此一来就会好很多,你所有的<h1>标签都会变成红色黑体的,这就是CSS的用处,使得网页制作中"内容"和"表现"分离。
1.2 CSS的特点(好处)有什么?
1.将内容和表现分开
就像刚才那个例子,在CSS推出之后,HTML将主要储存网络的内容结构,而CSS将确定网页的格式。而且两者独立开以后,我们只要更新CSS样式表文件,网站的元素自然就更新了。
2.界面元素更加丰富准确
CSS可以控制许多HTML很难控制或无法控制的元素,如字符间距,字体的粗细(磅值)于字体的大小(像素)等。
3.使页面更加苗条,下载更快
谁都不想看到100遍字体颜色标签,所以好好用CSS吧,让你的网页的代码量好好瘦瘦身,也有助于你维护你的网页。
2.1 如何定义CSS?
CSS的定义总共有三种方式:1.外部样式 2.内部样式 3.行内样式
2.1.1 外部样式
外部样式是我们最常用的样式,它是定义在独立的样式文件(.css)中的样式,可以通过<head>标签中的<link>标签将外部样式表与网页链接,格式如下:
<head> <link rel="stylesheet" href=" .css" type="text/css"> </head>
2.1.2 内部样式
一般在练习或者写一个比较小的网页时会用到,毕竟在一个界面里比较好对照(分屏写的请无视),内部样式是直接在网页的<head>标签中的<style>标签来定义的,且内部样式只能定义自身样式网页,格式如下:
<head> <style type="text/css"> 这里就要看你发挥喽 </style> </head>
2.1.3 行内样式
顾名思义,就是在HTML标签后加上一个style属性,因为用的不多,多以不多说了,直接看格式:
<tag style=" ">XXXX</tag>
以上三种方法都有其自身的优劣势,到时需要大家要有灵性,能做到具体问题具体分析,还有在同一个HTML元素被不止一个样式定义时,将会按照行内样式>内部样式>外部样式的顺序应用,也就是打个比方:
我们在外部文件定义字体为红色,<head>标签中定义字体为蓝色,style属性中定义字体为绿色,系统会显示为绿色。
3.1 CSS选择器
到了CSS最重要也是应用最多的部分(实话是前面的是铺垫,用的就是这些),我们对CSS的定义由3个部分组成:选择器,属性和属性值,基本语法格式如下:
selector { property:value; } <!--用英语逼格会高些-->
开玩笑啦,这里是说明一下<!-- -->的用法,这个标签是注释,也就是在打开网页时这个不起作用,可在你阅读代码时,好的注释可以帮助人阅读与有效的记忆,汉语版语法格式:
今天选择器主要介绍4种:元素选择器,类选择器,标识符选择器和后代选择器。
3.1.1 元素选择器
直接上代码:
h1 {font-family: 黑体; font-size: 24px; color: red;}
如上面的代码,选择器为HTML单个的标签,就是元素选择器。其中,你对HTML中的任一标签做了定义之后,在HTML中该标签的样式全部变为你所定义的样子,如上面的代码,你所有的一级标题都会是红色黑体,大小为24像素的字。
还有,比如我想让所有的h1,h2,p标签的字体全部为蓝色,我们可以统一声明为:
h1,h2,p {color:blue;}
注意,一定要有逗号,否则意思会改变,后文我们会提到没有逗号的意思。
3.1.2 类选择器
类选择器可以单独定义标有class的HTML元素,这可以有助于我们实现相同元素中不同样式,看如下的代码:
.center {text-align:center;} p.p2 {color:green;} h1.p2 {color:blue;} h1.p3 {color:red;}
可以看出,类选择器多出".",格式为 标签(这个可以没有).自定义的名称。当我们要应用类选择器时,我们要在标签后加上 class="自定义的名称" ,如上面的代码我们应用到我们在一个标签中加入我们定义好的类选择器,像<p class="center">那字体就会居中,而标签<p class="p2">,标签中的字体就会变为蓝色,标签<h1 class="p2">,标签中字体就会变为蓝色。
3.1.3 标识符选择器
标识符选择器也就是ID选择器,它跟类选择器大体上相同,但是ID选择器有它自身的硬性要求,就是同一个ID只能出现一次,且在声明是要在自定义的ID名前加上"#",如下面的代码:
#p1 {color:red; font-size:12px;}
3.1.4 后代选择器
后代选择器又称为包含选择器,后代选择器解决了之前三个选择器很难解决的问题,在多层子标签下,相同的子标签改变不同样式的问题,后代选择器的代码格式如下:
h1 p em {color:red;}
如上代码会将<h1>标签下的<p>标签中的<em>标签中的文本改为红色,而其他的<em>标签中的文本不会变色。