您现在的位置:首页 >> 前端 >> 内容

web前端之css美化操作实例

时间:2018/3/8 14:37:10 点击:

  核心提示:css:就跟人穿衣服和化妆一样,是美化页面用的。例如:我们想把文字换个颜色,字体变大,向左向右移动等等。css的引入方式:一、行内样式:直接在标签后面写css样式,如:bodyp style=colo...

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>

Tags:WE EB B前 前端 
作者:网络 来源:xishaoguo的