编写css代码的方式

html 在一个网页中负责的事情是一个页面的结构
    css(层叠样式表) 在一个网页中主要负责了页面的数据样

    第一种：在style标签中编写css代码。   只能用于本页面中，复用性不强。
           格式：
            <style type="text\css">
                编写css的代码。
            </style>
        例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head><style type="text\css">a{color:#F00;text-decoration:none;}</style>
<body><h1>标题1</h1><a style="color:#0F0; text-decoration:none" href="#">新闻的标题1</a><a href="#">新闻标题2</a><a href="#">新闻标题3</a><a href="#">新闻标题4</a><a href="#">新闻标题5</a><a href="#">新闻标题6</a>
</body>
</html>

第二种：可以引入外部的css文件。推荐使用。

        方式1：使用link标签。   推荐使用...
           格式：
               <link href="css文件的路径" rel="stylesheet">

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><link href="1.css" rel="stylesheet"/><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body><h1>标题1</h1><a style="color:#0F0; text-decoration:none" href="#">新闻的标题1</a><a href="#">新闻标题2</a></body>
</html>

例子： <link href="1.css" rel="stylesheet"/>

        方式2：使用<style>引入

             格式：
                    <style type="text/css" >
                       @import url("css的路径");
                    </style>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><style type="text/css" >@import url("1.css");
</style><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body><h1>标题1</h1><a style="color:#0F0; text-decoration:none" href="#">新闻的标题1</a><a href="#">新闻标题2</a></body>
</html>

第三种方式：直接在html标签使用style属性编写。只能用于本标签中，复用性较差。不推荐使用。

<a style="color:#0F0; text-decoration:none" href="#">新闻的标题1</a>

编写css代码的方式相关推荐

提高编写CSS代码效率的10个习惯
提高编写CSS代码效率的10个习惯 1.保持一贯性. 就像其它的任何事一样,值得一直保持一贯性.保持连贯性,而不是想到什么就给id和class命名什么. CSS的级联样式有利于加深你的记忆,而且充分利 ...
react 改变css样式_web前端入门到实战：编写CSS代码的8个策略，资深开发工程师总结...
编写基本的CSS和HTML是我们作为Web开发人员学习的首要事情之一.然而,我遇到的很多应用程序显然没有人花时间真正考虑前端开发的长久性和可维护性.我认为这主要是因为许多开发人员对组织CSS / HT ...
VS2010 测试功能之旅：编码的UI测试（4）-通过编写测试代码的方式“.NET研究”建立UI测试（下）...
回顾最近比较忙,距离上次更新的时间较久,见谅. 在本章上部分,介绍了"添加用户"窗口的测试代码编写.想必大家也看到了,在UIMap.cs文件中实现自定义编码是一件很轻松的事情,接 ...
CSS之引入方式和选择器
html 在一个网页中负责的事情是一个页面的结构 css(层叠样式表) 在一个网页中主要负责了页面的数据样式. 编写css代码的方式: 第一种: 在style标签中编写css代码. 只能用于本页面中, ...
CSS代码重构与优化之路
写CSS的同学们往往会体会到,随着项目规模的增加,项目中的CSS代码也会越来越多,如果没有及时对CSS代码进行维护,CSS代码不断会越来越多.CSS代码交错复杂,像一张庞大的蜘蛛网分布在网站的各个位置 ...
写出完美CSS代码的5个重要方面
每个人都可以编写CSS代码,甚至你现在已经让它为你的项目工作了.我在博客中也一直与大家讨论,学习CSS编码与CSS技巧.但是CSS还可以更好吗?开始用这5个Tips改进你的CSS吧! 一.关于 CS ...
CSS代码重构与优化之路（转）
CSS代码重构与优化之路阅读目录 CSS代码重构的目的 CSS代码重构的基本方法 CSS方法论我自己总结的方法写CSS的同学们往往会体会到,随着项目规模的增加,项目中的CSS代码也会越来越多,如 ...
前端 css 通用css_编写CSS简易方法简易前端
前端 css 通用css If you have just started writing CSS codes it's highly likely that you are having a har ...
（27）StyleLint—CSS代码格式校验
一.StyleLint介绍 StyleLint就是对 CSS 代码格式进行检查. 二.使用 StyleLint步骤 • 初始化项目( npm init --yes ) • 安装 StyleLint ( ...

编写css代码的方式

编写css代码的方式相关推荐

最新文章

热门文章