当前位置: 移动技术网 > IT编程>网页制作>CSS > web前端之css美化操作实例

web前端之css美化操作实例

2018年03月17日  | 移动技术网IT编程  | 我要评论

这一世木已成舟txt,恐怖宠物店下载,舟山新区

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>

如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复

相关文章:

验证码:
移动技术网