web前端——css认识

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>

web前端——css认识

猜你喜欢