CSSday03

爱前端的小周同学

已于 2023-05-16 16:30:40 修改

阅读量395

点赞数

分类专栏： codewhy前端学习笔记文章标签： css html

于 2023-02-09 16:43:25 首次发布

本文链接：https://blog.csdn.net/gxh0816/article/details/128939172

版权

codewhy前端学习笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一.元素的语义化

元素语义化:用正确的元素做正确的事情

理论上来说,所有的HTML元素,我们都能实现相同的事情:

增加代码的阅读性,增加代码的阅读性,就是使用正确的元素.

二.什么是SEO

搜索引擎优化,通过了解搜索引擎的运作规则来调整网站,以及提高网站在有关搜索引擎内排名的方式.

三.认识字符编码

四.CSS如何编写呢?

color(属性):red(属性值);

五.如何将CSS样式应用到元素上?

CSS提供了3种方法,可以将CSS样式应用到元素上:

内联样式(inline style)

内部样式表

外部样式表

(一)内联样式

也有人翻译成行内样式

内联样式表存在于HTML元素的style属性之中

<div  style="color:red; font-size: 12px;">嗨</div>

(二)内部样式

通过class名,进行找到选中你想要的元素

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>网页的标题</title>
  <style>
    .father {
      width: 300px;
      height: 300px;
      background-color: red;
      position: relative;
    }
  </style>
</head>

<body>
  <div class="father">
  </div>
</body>

</html>

(三)外部样式

可以使用link来引入多个css文件,但是css文件如果过多的话,就会不好维护.这样子就可以通过新建一个index.css文件为入口文件

可以通过@import引入其他的css资源

@import url("../css/style.css");
@import url("../css/test.css")

六.常见的CSS元素

CSS官方文档

https://www.w3.org/TR/?tag=css

CSS推荐文档地址:

MDN

可以到https://caniuse.com/查询某些CSS是否可用

font-size

color

background-color

width

height

七.额外知识补充

1.link元素(注意rel)

1.站点图标可以使用link元素进行设置

<link rel="icon" href="./images/bg.gif">

2.引入css文件

<link rel="stylesheet" href="./css/style.css">

3.rel:指定链接类型

2.计算机进制

3.css表示颜色

1.颜色关键字(英文)

2.RGB颜色

3.RGBA a是代表透明度

4.chrome调试工具

5.浏览器渲染流程

加载html-解析html(从上往下)-加载css(不等待)-继续解析html-加载好css以后-解析css-解析完html会形成Create DOM tree-等到加载完css,解析完css.然后页面进行展示