2024年前端最新【前端三件套——CSS基础】网页开发必备知识，最新前端大厂高频面试题

最新推荐文章于 2024-07-12 01:09:29 发布

2401_84435192

最新推荐文章于 2024-07-12 01:09:29 发布

阅读量545

点赞数 23

分类专栏：程序员文章标签：前端面试学习

本文链接：https://blog.csdn.net/2401_84435192/article/details/138818133

版权

程序员专栏收录该内容

182 篇文章 0 订阅

订阅专栏

结尾

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

html5


p{

    color：red;/* 给p段落的字体叠加红色*/

}

PS:/* … */ 就是CSS的注释格式，也可以直接ctrl+/

编辑器会自己判断该用哪种格式注释

常见属性：

在这里插入图片描述

1. CSS引入方式

==============================================================================

1.1内嵌式

首先我们得说一下style标签，一般它都是写在<head>标签里，<title>标签之下的

内嵌式就是将CSS写在style标签中

如下所示：


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

    p{

       color: red;

    }

    </style>

</head>

<body>

    <p>红色</p>

</body>

</html>

1.2 外联式

是之前提到的CSS写在一个单独的.css文件里面，这也是开发项目中最常见的

引入方式： 需要通过link标签在网页中引入

<link>标签也写在title标签下

语法：


<link rel="stylesheet" href="">

rel的值告诉编译器这是这个链接是样式表

href里面就填CSS文件的相对路径（简单一点），和HTML里的超链接<a>标签是一样的

1.3 行内式

将CSS写在标签的style属性中

开发中基本是与JS配合使用的

语法：


<p color:red; font-size:5px;>5号红色</p>

注意

日常小案例可以用内嵌式，比较方便

项目开发外联式为主

行内式和js 配合使用

2. 基础选择器

============================================================================

在HTML中选择元素

2.1 标签选择器

结构： 标签名{ css属性名：属性值；}

作用： 通过标签名，找到页面中所有这类标签，设置样式

注意点：

标签选择器选择的是一类标签，而不是一个
标签选择器无论嵌套关系多深，都能找到对应的标签

2.2 类选择器

结构： .类名{ css属性名：属性值；}


 .one{

    color:red;

}

作用： 通过类名找到页面中所有带有这个类名的标签，设置样式

注意点：

所有的标签都有class属性，class属性的属性值称为类名（类似于名字）
类名可由数字、字母、下划线、中划线等组成，但需注意不能由数字或中划线开头
一个标签可同时有多个类名，类名之间以空格隔开


<h1 class="one" "red" "30px">大标题 </h1>

一个类选择器可以同时选中所有同类名的标签

实际开发中，类选择器用得最多

2.3 id选择器

结构： #id属性值{css属性名：属性值}


#blue{

     color:blue;

}


<div id="blue" >id选择器</div>

作用： 通过id属性值，找到页面中带有这个id属性值的标签，设置样式

注意点：

所有标签上都有id属性
id属性值是唯一的，即两个标签不能共用一个id，一个标签不能有两个id

id选择器只能选中一个标签

id一般配合js使用，除非特殊情况，否则不要使用id设置样式

2.4 通配符选择器

结构： *{css属性名：属性值；}


*{

     margin:0;

     padding:0;

}

作用： 找到页面所有的标签，设置样式

注意点：

开发中使用极少，只会在特殊情况使用，用处在CSS进阶再进行讲解

3.字体与文本样式

============================================================================

3.1 font字体样式

字号：

属性名：font-size

取值格式：数字 + px


font-size : 32px;

注意点：

谷歌浏览器的默认字号为16
px必须加

字体粗细

属性名：font-weight

取值格式：

分俩种——

一种为关键字，normal表示正常粗细，bold表示粗体

另一种是纯数字，100~900取整百数，其中normal 对应400，bold对应700


font-weight : bold;

注意点：

不是所有的字体都提供了九种粗细

字体样式

属性名：font-style

取值格式：

正常—— normal

倾斜—— italic


font-style : italic;

字体

属性名：font-family

取值格式：

字体分为三大类:

无衬线字体（sans-serif）——笔画粗细均匀，常见字体有黑体、Arial、微软雅黑

结尾

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

html5

无衬线字体`（sans-serif）`——笔画粗细均匀，常见字体有黑体、Arial、微软雅黑

结尾

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

html5

2401_84435192

关注

23
点赞
踩
19

收藏

觉得还不错? 一键收藏
0
评论
2024年前端最新【前端三件套——CSS基础】网页开发必备知识，最新前端大厂高频面试题

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。
复制链接

扫一扫