今天,我们来学习CSS基础知识。CSS:Cascading Style Sheets——
层叠样式表。是一种用来表现HTML或XML等文件样式的计算机语言。
前端三层:html:结构层,搭建网站的基本结构
css:样式层,美化网页
Javascript:行为层,实现网页交互功能css有两个重要的概念:层叠式、样式例如某个标签有什么样式,就能直接将对应的属性及属性值罗列出来。
如:
div{ background: red; width:200px; height: 100px; color: blue; font-size: 50px; }
css样式有两种重要功能:1.给文本添加文本样式;2.给盒子添加属性进行结构布局。文本样式:字体、颜色、大小,以px为单位。盒子实体化样式:宽度、高度、背景色、边框(border)。具体的代码为:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div{ background: red; width:200px; height: 100px; color: skyblue; font-size: 50px; font-family: "宋体","楷体"; border: 5px solid yellow; } p{ font-size: 20px; color: gold; font-family: "SimSun"; }</style></head><body> <div>这是一段文字</div> <p>这是一个语句</p></body></html>
练习效果为:
自己动手练习以下吧😄