CSS基础入门------01-与HTML的3种结合方式
2017-07-14 23:32
916 查看
<!DOCTYPE html> <html> <head> <title>01-结合方式1.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <!-- 结合方式1: html标签上加上style属性. 属性的值填写Css代码. 所有标签都有style属性. --> </head> <body> <p style="color:red;" > This is my HTML page. </p> </body> </html>
<!DOCTYPE html> <html> <head> <title>02-结合方式2.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <!-- 结合方式2: 使用head标签中的style标签.设置页面样式.style中填写css代码 --> <style type="text/css"> p{ color:red; } </style> </head> <body> <p> This is my HTML page. </p> </body> </html>
<!DOCTYPE html> <html> <head> <title>03-结合方式3.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!-- 结合方式3: --> <link rel="stylesheet" type="text/css" href="p.css"> </head> <body> <p> This is my HTML page. </p> </body> </html>
运行效果如下
相关文章推荐
- 【从入门到放弃】WEB前端之HTML+CSS基础01
- Html与CSS快速入门01-基础概念
- 30-CSS-01-CSS(概述&和html结合的方式一二)
- HTML+CSS基础入门-第九天(CSS-使用方式)
- 【慕课网】php工程师学习计划之我的学习笔记——01 入门必学web基础 htmlcss基础课程 篇
- HTML中CSS的3种基本使用方式
- css和html的四种结合方式
- HTML+CSS基础入门-第八天(HTML-表单)
- JavaScript基础(二)之js和html的结合方式
- 01-css结合方式
- Javascript入门基础知识和在HTML中的引用方式以及与JAVA之间的关系
- HTML+CSS基础入门-第十四天(CSS-文本属性)
- 网页编程基础第二章知识点总结——HTML&CSS快速入门
- 前端开发入门:html和css基础知识回顾
- W3c html+css基础参考手册-2016-01参考
- (1)CSS和HTML结合方式
- html与css结合方式2-在另一个.css文件里
- Html-Css 从入门到放弃(一)基础知识
- HTML+CSS基础入门-第二天(HTML-HTML的基础结构)
- 在HTML中引入CSS的3种方式使用介绍