526互联

CSS学习1 认识CSS；三种CSS的编写样式；CSS注释；常见的CSS样式；元素link；CSS颜色表示方法；浏览器开发者工具；浏览器的渲染流程

发布时间 2023-05-10 11:09:25作者: 龙猫别胖我

1_认识CSS

  • what：为网页添加样式（美化界面）；一门样式表语言，不是编程语言
  • 发展历史
    • css1（两个人合作发布）
    • css2（w3c）
    • css3（模块化持续发展中）
  • 总结：美化HTML，让HTML与CSS分离
    • 方式一：添加样式，例如颜色、字体，大小
    • 方式二：布局，按照某种结构显示

2_三种CSS的编写样式

声明:例如【 color: red】
 属性名：添加的css规则名称【color】
 属性值：添加的css规则的值【red】

2.1_内联样式

  • 存在于HTML元素的style属性中
  • 很多资料不推荐这种写法
  • 但Vue的template的某些动态样式会用到
  • 例如下面代码所示
<div style="color: red; font-size: 20px;">我是div元素</div>
<h1 style="font-size: 50px">我是标题</h1>

2.2_内部样式表

把 设置CSS 样式代码放在HTML文件head中的style元素中

在这里插入图片描述

2.3_外部样式表

  • 把CSS代码编写成一个独立的css文件，并且通过link元素引入到HTML文档中
  • 如果css文件很多，可以建立一个索引css文件，通过@import引入对应css文件，在HTML文档中可link直接引入索引文件，可以省去很多麻烦

3_CSS注释

  • 格式：/* 注释内容*/

  • 快捷键： ctrl +/

4 常见CSS样式

5_元素link

  • 外部资源链接，规范文档与外部资源的关系
    • 通常放在head中
    • 也可用来创建站点图标，就是网页标题那里有一个图标
  • 常见属性
    • href：指定被链接资源的路径url
    • rel：指定连接类型
      • icon：站点图标
      • stylesheet：css样式
    • dns-prefetch【实验中的属性】：用户点击链接前提前进行域名解析，有助于性能优化

6_ CSS颜色表示方法

  • 颜色关键字：表示一个具体的颜色
    • 例如：color:(red)
  • RGB
    • 红绿蓝三原色
      • 各个原色的取值范围是0~255
      • eg： color:rgb(255,0,0)
  • 其他表示方法
    • 十六进制表示：
      • #RRGGBB[AA] ，[AA]表示透明度，可省略
      • #RGB[A] ,[A]表示透明度，可省略
        • #0099FF = #09F 【缩略重叠的数字，表示同一个颜色】
    • 函数符【基本不用，暂不了解】

7_浏览器开发者工具

  • 随机打开一个页面：右键-检查
  • 快捷键 ：ctrl+ ，可以调整页面合适的大小
  • 检查页面时 ，可以删除某些组件查看网页结构，或者其他微调整

8_浏览器的渲染流程

  1. 加载HTML文档
  2. 解析HTML
  3. 【遇到CSS则加载并解析】形成DOM树形结构
  4. 【把解析好的CSS渲染树Render附加到DOM树形结构中】在浏览器中展示该界面