HTML之CSS的简单学习
CSS:层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力
CSS在网页开发中是起装饰作用,如果把一个 漂亮的网页看成是一个人,HTML纯文本就是相当于一个“裸体人”,而CSS则是“衣服”,JavaScript就是“肢体动作”,三者共同组成一个完美的整体。
CSS形式
一、最初的CSS是包含在标签里,通过标签属性style表现出来。
<p style="background: red;color: blue;shape-rendering: all;">字体</p>
这样就能把内容进行修饰,但是这样写有它的缺点:
1.对于浏览器来说比较费时,要改很多东西。
2.对于开发人员来说,很复杂,很难维护。
二、同样的,不过是把style里的内容放在标签外面。
<style>
p{color:red;
background:black;
width:100px;
height:100px;
}
</style>
<p>字体</p>
<p>属性</p>
<p>形状</p>
这样可以应用到多个标签,像这样:
三、再打开一个文件,只编写CSS代码
把style里的内容放到新文件里,用link标签连接两个文件。
结果不变:
以上是CSS的三种基本形式。
CSS语法
p /*选择器*/ {color:red;
background:yellow;
width:100px;
height:100px;
} /*大括号里面的是样式内容*/
多条属性之间用分号;
隔开,格式为:属性名: 属性值;
注释:/*注释内容*/
颜色:
1.rgb模式
r:红色
g:绿色
b:蓝色
颜色由浅到深—>可由数值0-255表示,也可用百分数表示,比如:
color:rgb(255,0,0);
color:rgb(50%,25%,25%);
2.直接写名称
p{
color: red;
}
这种是我常用的一种形式。
3.16进制
r:红色 FF
g:绿色 FF
b:蓝色 FF
FF表示15*15,结果是255,是最深的,00表示0,最浅的。
那么颜色可以这样表示 :红色:#FF0000
两个数代表一种颜色,就像rgb(255,0,0)
p {
color:rgb(255,0,0);
color:rgb(50%,25%,25%);
color:#ff0000;
}
选择器
作用:通过选择器可以找到HTML里对应的元素,并且把选择器后面的样式传递给元素。
div {
background: blue;
}
比如说这个,通过这行代码,找到所有的div
并把样式值改成背景颜色为blue
。
选择器分为四大类
1.基本选择器
2.组合选择器
3.属性选择器
4.伪元素选择器
基本选择器:通配符选择器(*)、标签选择器(div…)、id选择器、class选择器。下面看样例:
注意写代码的格式一定要写正确。
结果:
没有什么比实例更易懂的了吧。哈哈哈~~~~
class选择器:
可以同时兼具多个class选择器的内容,
上面的样例同时具备两个class的属性。
现在用的比较多的还是class选择器,也不是说id选择器不常用,而是,在CSS里面用的相对较多的还是class选择器,而id选择器则在JavaScript里用的比较多,因为id选择器针对性比较强。