前言
网页有三个层:
html 用来搭建网页基本骨架 结构层
css 用来修饰网页 表现层
javascript 脚本 行为层
前面学完了html的一些基本标签,现在来看css,能够更方便快捷的构建渲染好看的网页界面
一、CSS是什么?
CSS (层叠样式表)(Cascading Style Sheets),描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素,CSS 节省了大量工作。它可以同时控制多张网页的布局
二、引入CSS样式
1.行内样式
代码如下(示例):
<p style="color:black;"></p>
2.内嵌样式
代码如下(示例):
<style type="text/css">
p{
font-size: 24px;
width: 200px;
color: pink;
}
</style>
3.链接样式(外链式)
代码如下(示例):
<link rel="stylesheet" type="text/css" href="css/01.css"/>
4.使用导入样式
代码如下(示例):
@import url(“css文件”);
@import “.css文件”;
5.优先级
三、CSS语法规则
四、CSS选择器
1.标签选择器
hr {
border: 0px;
border-bottom: 1px solid #89c5e8;
}
2.id选择器
#content {
color: mediumpurple;
font-size: 24px;
font-family: "arial black";
}
3.类(class)选择器
.num1 {
font-size: 24px;
color: pink;
}
4.包含选择器(后代选择器)
p a{
font-size: 24px;
width: 200px;
color: pink;
}
5.优先级(权重)
五、CSS注释
<style type="text/css">
/* p {
font-size: 24px;
width: 200px;
color: pink;
} */
</style>
六、长度单位
七、颜色表达 RGB颜色
1.直接使用颜色英文单词 不推荐
(有点浏览器不兼容)
2.使用三色的数值,如rgb(120,222,100)
例:red rgb(255,0,0)
blue rgb(0,0,255)
black rgb(0,0,0)
green rgb(0,255,0)
white rgb(255,255,255)
3.使用三色数值的十六进制,如#0000ff
例: rgb red #ff0000 #f00
blue #0000ff #00f
black #000000 #000
green #00ff00 #0f0
white #ffffff #fff
总结
以上就是今天的内容,简单介绍了CSS的基本语法和选择器的使用,还有一些零碎的使用方法,下一篇具体讲解字体文本样式