html css基本用法

最新推荐文章于 2024-03-23 01:00:00 发布

半坡人

最新推荐文章于 2024-03-23 01:00:00 发布

阅读量267

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/sy755754582/article/details/87805277

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

什么是CSS？

CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称。
CSS 是一种标记语言，属于浏览器解释型语言，可以直接由浏览器执行，不需要编译。
CSS语法由三部分构成：选择器、属性和值： selector {property: value}

如何使用CSS？

有三种方法可以在站点网页上使用样式表：

外联式Linking（也叫外部样式）：将网页链接到外部样式表。
嵌入式Embedding（也叫内页样式）：在网页上创建嵌入的样式表。
内联式Inline（也叫行内样式）：应用内嵌样式到各个网页元素。
其中，优先级：内联式 > 嵌入式 > 外联式

1.新建一个stl.css

body{
      color: blue;
      font-size: 1cm;
      background-color: aquamarin
  }
  /* 标签选择器   */
  p{
      color: sandybrown;
      font-size: 50px;
      background-color:#12a12a;
  }
  /* class类选择器  */
  .a1{
      font-size: 50%;
      color: aqua;
      background-color: yellow;
  }
  /* id选择器 */

  #a2{
      font-size:50px;
      color:violet;
     
  }
  /* 派生选择器 */
  /*也叫上下文选择器，依赖于上下文关系来应用或者避免某项规则*/
  p strong{
      color: darkgoldenrod;
      background-color: #abcabc;
  }
  /* 通配符选择器 */
*{
    color: #c022b3;
    background-color: #18ad6a79;
 }

2.新建一个index.html

<link rel="stylesheet" type="text/css" href="stl.css">
/*用于连接css和html文件*/

 <!DOCTYPE html>
<html>
    <link rel="stylesheet" type="text/css" href="stl.css">
    <head>
        <meta charset="utf-8">
        <title>css样式表</title>
    </head>
    <body>
        <div id="a2">id选择器</div>
        <div class="a1">这是个class选择器</div>
        <div>通配符选择器</div>
        <p>这是标签选择器效果</p>
        <p><strong>这是p+strong 派生选择器效果</strong></p>
    </body>
</html>

网页展示