css:就跟人穿衣服和化妆一样,是美化页面用的。
例如:我们想把文字换个颜色,字体变大,向左向右移动等等。
css的引入方式:
一、行内样式:直接在标签后面写css样式,如:
<body> <div style="color: #00FF00;">卡特琳娜</div> </body>
style : 翻译成中文是样式的意思,后面加=号是将需要的样式进行关联,样式用“”双引号包起来。里面写需要的样式,将样式的名字,和内容用 : 冒号隔开,color 就是样式的名字,而#00ff00就是具体的样式内容。
color : #00ff00 像这种用冒号隔开的两组数据 ,在编程界称为键值对,key 和 value ,键值对用的地方很多,比如json数据里面 name : "大胖" 键值对并不一定是用:冒号隔开,也可能是 = 等于号,也有可能是 _ 下划线等符号。
二、<link>标签引入已经写好的css文件。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>标签</title> <link rel="stylesheet" href="../css/main.css"> </head> <body> <div>卡特琳娜</div> </body> </html>
三、<style>标签写样式。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>标签</title> <style type="text/css"> div{ color:red; } </style> </head> <body> <div>卡特琳娜</div> </body> </html>
严格来说,html引入css样式的方式只有这三种,但是在css里面还有一个@import可以引入css样式文件,其实这不属于是html引入样式的方式,只能算是css自己本身的功能。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>标签</title> <style type="text/css"> @import url(../css/main.css); </style> </head> <body> <div>卡特琳娜</div> </body> </html>