CSS3的

最新推荐文章于 2024-05-10 09:57:10 发布

JD强子

最新推荐文章于 2024-05-10 09:57:10 发布

阅读量152

点赞数 1

分类专栏： css

本文链接：https://blog.csdn.net/m0_53698336/article/details/118078794

版权

什么是 CSS?

CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一个

CSS快速入门

创建文件
在这里插入图片描述
CSS语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:
在这里插入图片描述

CSS 实例

CSS声明总是以分号(;)结束，声明总以大括号({})括起来:
在这里插入图片描述
css是如何工作的

CSS的优势

内容和表现分离
网页结构表现统一,可以实现复用
样式十分的丰富
建议使用独立于html的css文件
利用SEO,容易被搜索引擎收录

如何插入样式表

插入样式表的方法有三种:

外部样式表(External style sheet)
- 链接式
- 导入式
内部样式表(Internal style sheet)
内联样式(Inline style)

链接式

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

导入式

 <style>
     @import url("style.css");
   </style>

内部样式表

<head>
<style>
hr {
   color:sienna;}
p {
   margin-left:20px;}
body {
   background-image:url("images/back40.gif");}
</style>
</head>

内联样式

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

基本选择器(重要)

用于选择页面上某一个或者某一类元素

基本选择器

标签选择器

<!--<meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词(SEO)。-->
    <!--<meta> 标签位于文档的头部，不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。-->
    <meta charset="UTF-8" />
    <!--指定网页的编码,浏览器会根据这个编码解析这个网页-->
    <!--网页标题-->
    <title>我的第一个网页</title>
    <style>
      /* 会选择到页面上所有这个标签的元素 */
      h3 {
    
        color: rgb(239, 0, 0);
      }
    </style>
  </head>
  <!--体部分, 用于包裹所有的可视化内容-->
  <body>
    <h3>标签选择器</h3>
  </body>
</html>

标签内部选择器

<h3 style="color:red;">菜鸟教程</h3>

id选择器

<!--
  文档声明,用于声明当前文档是一个html格式的网页,并且版本就是5.0
  声明必须是 HTML 文档的第一行，位于 <html> 标签之前。
-->
<!DOCTYPE html>

<!--language-->
<html lang="en">
  <!--根标签,用于包裹所有的网页内容(不包括文档声明)-->
  <!--头部分, 用于存放网页的基本属性信息(编码,标题,引入的css/js文件等-->
  <head>
    <!--<meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词(SEO)。-->
    <!--<meta> 标签位于文档的头部，不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。-->
    <meta charset="UTF-8" />
    <!--指定网页的编码,浏览器会根据这个编码解析这个网页-->
    <!--网页标题-->
    <title>我的第一个网页</title>
    <style>
      /* 
      id必须保证全局唯一
      #id名称{}
      */
      #girl {
    
        text-align: center;
        color: red;
      }
    </style>
  </head>

  <body>
    <p id="girl">Hello World!</p>
    <p>这个段落不受该样式的影响。</p>
  </body>
</html>

class 选择器

<!--
  文档声明,用于声明当前文档是一个html格式的网页,并且版本就是5.0
  声明必须是 HTML 文档的第一行，位于 <html> 标签之前。
-->
<!DOCTYPE html>

<!--language-->
<html lang="en">
  <!--根标签,用于包裹所有的网页内容(不包括文档声明)-->
  <!--头部分, 用于存放网页的基本属性信息(编码,标题,引入的css/js文件等-->
  <head>
    <!--<meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词(SEO)。-->
    <!--<meta> 标签位于文档的头部，不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。-->
    <meta charset="UTF-8" />
    <!--指定网页的编码,浏览器会根据这个编码解析这个网页-->
    <!--网页标题-->
    <title>我的第一个网页</title>
    <style>
      /* .class的名称{}
          可以多个标签归类,是同一个class,可以复用
      */
      .center
      {
    
        text-align:center;
      }
      /* 指定特定的HTML元素使用class
        所有的 p 元素使用 class="center" 让该元素的文本居中
      */
      p.center{
    
        text-align:center;
      }
      </style>
      </head>
      
      <body>
      <h1 class="center">标题居中</h1>
      <p class="center">段落居中。</p> 
      </body

最低0.47元/天解锁文章

JD强子

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3的

什么是 CSS?CSS 指层叠样式表 (Cascading Style Sheets)样式定义如何显示 HTML 元素样式通常存储在样式表中把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题外部样式表可以极大提高工作效率外部样式表通常存储在 CSS 文件中多个样式定义可层叠为一个 CSS快速入门创建文件CSS语法CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:CSS 实例CSS声明总是以分号(;)结束，声明总以大括号({})括起来:css是
复制链接

扫一扫