欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

web前端之css美化操作实例

程序员文章站 2023-03-02 12:23:27
css:就跟人穿衣服和化妆一样,是美化页面用的。 例如:我们想把文字换个颜色,字体变大,向左向右移动等等。 css的引入方式: 一、行内样式:直接在标签后面写css样式,如:...

css:就跟人穿衣服和化妆一样,是美化页面用的。

例如:我们想把文字换个颜色,字体变大,向左向右移动等等。

css的引入方式:

一、行内样式:直接在标签后面写css样式,如:

<body>

    <p style="color: #00FF00;">卡特琳娜</p>

</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>

        <p>卡特琳娜</p>

    </body>

</html>

三、<style>标签写样式。

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>标签</title>

    <style type="text/css">

        p{

            color:red;

        }

    </style>

</head>

    <body>

        <p>卡特琳娜</p>

    </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>

        <p>卡特琳娜</p>

    </body>

</html>