CSS3 知识总结

1,什么是CSS

     用于定义网页的样式,包括不同设备和屏幕尺寸的设计、布局和显示变化。

  当浏览器读取样式表时,它会根据样式表中的信息格式化 HTML 文档。

2,CSS的作用优点

  • CSS 描述 HTML 元素如何在屏幕、纸张或其他媒体上显示

  • CSS 节省了大量工作。它可以一次控制多个网页的布局

3,css构成

     CSS 规则由一个选择器和一个声明块组成。

  1.      选择器选择您要设置样式的 HTML 元素
  2. No
    1简单选择器根据名称id类选择元素

    元素选择器

     id 选择器

    类选择器

    通用选择器

     HTML 元素

     HTML 元素的 id 属性

    具有特定类属性的 HTML 元素,要选择具有特定类的元素,请写一个句点 (.) 字符,后跟类名。

    通用选择器 (*) 选择页面上的所有 HTML 元素。

    1,一个元素的 id 在一个页面中是唯一的

    2,

    要选择具有特定 ID 的元素,请写入井号 (#) 字符,后跟元素的 ID。

    3,类名不能以数字开头!

    2组合选择器根据元素之间的特定关系选择元素h1, h2, p {
      text-align: center;
      color: red;
    }
    3伪类选择器根据某种状态选择元素
    4伪元素选择器选择元素的一部分并设置样式
    5属性选择器根据属性或属性值选择元素

    4,插入 CSS 的三种方式
     

    外部 CSS

    注意:不要在属性值和单位之间添加空格:
    不正确(空格):margin-left: 20 px;
    正确(无空格):margin-left: 20px;

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

    必须在 head 部分的 <link> 元素中包含对外部样式表文件的引用
    内部 CSS<head>
    <style>
    body {
      background-color: linen;
    }

    h1 {
      color: maroon;
      margin-left: 40px;
    }
    </style>
    </head>
    内部样式在 <style> 元素内定义,在 head 部分内。
    内联 CSS<p style="color:red;">This is a paragraph.</p>为单个元素应用独特的样式

    5,注释
    HTML 注释:  <!--...-->
    CSS 注释  :  /* Set text color to red *

    6,

    什么是响应式网页设计?

    响应式网页设计使您的网页在所有设备上看起来都不错。

    响应式网页设计仅使用 HTML 和 CSS。

    响应式网页设计不是程序或 JavaScript。

   

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

iameyama

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值