CSS(了解)

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>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,687评论 1 92
  • CSS的全称是什么? CSS全称Cascading Style Sheets,层叠样式表 CSS有几种引入方式? ...
    Echolate阅读 1,365评论 0 1
  • 最爱吃虾~~
    sizmo_O阅读 2,833评论 0 1
  • LayoutInflater的获取 在Activity中:getLayoutInflater() LayoutIn...
    依风听雨锋阅读 1,144评论 0 0
  • 妈妈带我去看了电影《阿唐奇遇记》看后我想了很多。他叫阿唐,唐伯虎的唐,是一茶宠,它叫小来,来自未来的机器人。他们为...
    谢东杰阅读 8,496评论 0 0