CSS(了解)

2017-05-13  本文已影响0人  逻辑演绎法

Cascade Style Sheet 层叠样式表

css和html的结合方式?
也就是学习如何在HTML里如何使用css,共有三种方式。

结合方式1

<code>
<!DOCTYPE html>
<html>
<head>
<title>01-结合方式1.html</title>
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">

</head>
<body>

<p style='color:red;'> This is my HTML page. </p><br>

</body>
</html>
</code>

结合方式2
<pre>
<!DOCTYPE html>
<html>
<head>
<title>02-结合方式2.html</title>

<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">

<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style type="text/css">
    p{
        color:red;
    }
</style>

</head>

<body>
<p style='color:red;'> This is my HTML page. </p>

</body>
</html>

</pre>
结合方式3

  <!DOCTYPE html>
<html>
  <head>
    <title>03-结合方式3.html</title>
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=UTF-8">
  <!-- 结合方式3:
        需要创建一个.css文件    
        <link rel="stylesheet" type="text/css" href="./p.css">
   -->
   <link rel="stylesheet" type="text/css" href="./p.css">
  </head>
    <body>
   <p style='color:red;'> This is my HTML page. </p><br>
  </body>
</html>

图片在这里!。


css.png

结合方式ok

CSS语法?(了解)
<pre>
<!DOCTYPE html>
<html>
<head>
<title>02-结合方式2.html</title>
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">

<style type="text/css">
    p{
        color:red;
    }
</style>

</head>
<body>
<p style='color:red;'> This is my HTML page. </p>

</body>
</html>
</pre>

上一篇 下一篇

猜你喜欢

热点阅读