前端工程师养成记——三、CSS入门

最新推荐文章于 2022-12-11 11:06:31 发布
最新推荐文章于 2022-12-11 11:06:31 发布
阅读量355 收藏
点赞数
分类专栏： 前端开发 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Jenn168/article/details/106675930
版权
本文深入讲解CSS的基础知识，包括格式、单位、基本样式、注释及三种样式应用方式：内联、内部和外部样式。此外，还详细介绍了颜色表示法、背景、边框、字体、文本样式以及复合样式的使用技巧。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

CSS入门

格式

   选择器 { 属性1：值1; 属性2：值2; }
	div{
		width: 50%; height: 100px; background-color: red;
	}

单位

   px —> 像素（pixel）、百分比（%）

基本样式

   width（宽）、height（高）、background-color（背景色）
   长度单位：

         1、 px：像素
         2、 %：百分比 （外容器为100px，内容器设置为50%，则是50px

CSS注释 ：

         /* CSS注释的内容 */

学习网站

         https://www.w3cschool.cn/css/、https://www.w3cschool.cn/cssref/



一、css的三大样式

1、内联样式（也叫行间样式、行内样式）

     在html标签上添加style属性来实现
在这里插入图片描述
举例：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="content-type" content="text/html; charset=utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
	</head>
	<body>
		<div style="width: 200px; height: 200px; background-color: red;">这是一个div块</div>
	</body>
</html>

浏览器上的显示效果：
在这里插入图片描述

2、内部样式

     在<style>标签内添加的样式
     注： 内部样式的 优点 是可以 复用代码
在这里插入图片描述
举例：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="content-type" content="text/html; charset=utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
		<style>
			div{
				width: 200px;
				height: 200px;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<!-- <div style="width: 200px; height: 200px; background-color: red;">这是一个div块</div> -->
		<div>这是一个div块</div>
	</body>
</html>

浏览器上的显示效果：
在这里插入图片描述

3、外部样式

     引入一个单独的CSS文件（common.css文件）
在这里插入图片描述

  引入方法：

     1）通过link标签引入外部资源，rel属性指定资源跟页面的关系，href属性表示资源的地址；

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

     2）通过 @import 来引入外部样式（注：这种方式有很多问题，不建议使用）

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

关于link与import的区别可见博客：https://www.cnblogs.com/my–sunshine/p/6872224.html


3）link标签知识点扩展：

   link属性对应的值如下：
在这里插入图片描述



二、css的颜色表示法

可参考：https://www.w3school.com.cn/cssref/css_colors.asp (了解颜色)
       https://www.w3school.com.cn/cssref/css_colors_legal.asp（颜色值）
       https://www.w3school.com.cn/cssref/css_colornames.asp（颜色名）
       https://www.w3school.com.cn/cssref/css_colorsfull.asp（颜色16j进制）

1、单词表示法

red、orange、yellow、green、lime、blue、purple、black、white（红橙黄绿青蓝紫黑白）
特殊的颜色：transparent（透明色）
在这里插入图片描述

2、16进制表示法

在这里插入图片描述
其他更为丰富的颜色请参考：https://www.w3school.com.cn/tags/html_ref_colornames.asp


3、RGB三原色表示法

   RGB 颜色值是这样规定的：rgb(red, green, blue)。每个参数 (red、green 以及 blue) 定义颜色的强度，可以是介于 0 与 255 之间的整数，或者是百分比值（从 0% 到 100%）。
   举例说，rgb(0,0,255) 值显示为蓝色，这是因为 blue 参数被设置为最高值（255），而其他被设置为 0。在这里插入图片描述

4、RGBA表示法

   RGBA 颜色值是 RGB 颜色值的扩展，带有一个 alpha 通道 - 它规定了对象的不透明度。

   RGBA 颜色值是这样规定的：rgba(red, green, blue, alpha)。alpha 参数是介于 0.0（完全透明）与 1.0（完全不透明）的数字。

background-color:rgba(255,0,0,0.5);



三、css背景样式

在这里插入图片描述

  • background-color ：背景颜色

  • background-image ：背景图片
         url（背景地址）
         默认：会水平垂直都铺满背景图

  • background-repeat ： 背景图片的平铺方式
         repeat-x ： x轴平铺，在水平方向重复
         repeat-y ： y轴平铺，在垂直方向重复
         repeat ： x轴、y轴都进行平铺（ 默认值 ）
         no-repeat ： 都不平铺，背景图仅显示一次

  • background-postion ： 背景图片的位置
         x | y： number(px、%) | 单词
          x ： left、center、right
          y ： top、center、bottom

  • background-attachment ： 背景图随滚动条的移动方式
         scroll： 背景图按照当前元素的位置进行偏移（ 默认值 ）
         fixed ： 背景图按照浏览器进行偏移

可参考：https://www.w3school.com.cn/cssref/index.asp#background



四、css边框样式

在这里插入图片描述

  • border-style ：边框样式
         solid：实线
         dashed：虚线
         dotted：点线

  • border-width ：边框大小（1px）
         thin：细
         medium：中等粗细
         thick：粗

  • border-color ： 边框颜色

  • border ： 一行设置多个（border:5px solid red;）

  • border-left-style： 设置单边的（border-left-style: dashed）

可参考：https://www.w3school.com.cn/cssref/index.asp#border



五、css字体样式

CSS 字体样式包括 字体类型、大小、粗细、风格（如斜体）和颜色。
在这里插入图片描述

1、font-family： 字体类型

     英文字体： Arial、Time New Roman
     中文字体： 微软宋体(Microsoft YaHei)、宋体(SimSun)

body{
	font-family: PingFangSC-Regular, Verdana, Arial, 微软雅黑, 宋体;
    font-size: 14px;
}

2、font-size： 字体大小

     像素： 12px、14px、16px ( 一般为偶数)
     百分比： 50%、20%、100%
     英文： xx-small（最小）、x-small（较小）、small、medium、large、x-large（较大）、xx-large（最大）
           相较于默认大小的对比

	h1 {font-size:250%;}
	h2 {font-size:large;;}
	p {font-size: 14px;}

3、font-weight： 字体粗细

     数字： 100、200、… 、900
     英文： normal(相当于100-500)、bold(相当于600-900)、lighter（更细）、bolder（更粗）

	p{font-weight:normal;}
	p{font-weight:bold;}
	p{font-weight:900;}

4、font-style： 字体风格
  • normal - 文本正常显示
  • italic - 文本斜体显示
  • oblique - 文本倾斜显示， 用的少
	p{font-style:normal;}
	p{font-style:italic;}
	p{font-style:oblique;}

italic 和 oblique 的区别

  1. italic 带有倾斜属性的字体的才可以设置倾斜操作（如果某些字体不带有倾斜属性，即使设置了也不起作用）
  2. oblique 没有倾斜属性的字体也可以设置倾斜操作

5、color： 字体颜色
	p { color: red; }

可参考：https://www.w3school.com.cn/cssref/index.asp#font



六、css文本样式

CSS 字体样式包括 文本装饰和文本大小写（针对英文）、文本缩进、文本对齐、文本行高、文本间距与英文折行等
在这里插入图片描述

1、文本装饰（text-decoration）

  1. underline - 下划线
  2. overline - 上划线
  3. line-through - 中划线
  4. blink - 闪烁
  5. none
p  {
    text-decoration: line-through;
    text-transform:  uppercase;
}
p.one {
    text-decoration: underline;
}

2、文本变换（针对英文）(text-transform)

  1. uppercase - 大写
  2. lowercase - 小写
  3. capitalize - 首字母大写
  4. none
span.lower {
    text-transform: lowercase;
}
span.upper {
    text-transform: uppercase;
}
span.capitalize {
    text-transform: capitalize;
}

3、文本缩进（text-indent）

  1. 数字： 10px
  2. 百分比： 20%
p {
	text-indent: 50px;
}

4、文本对齐（text-align）

  1. left - 左对齐
  2. right - 右对齐
  3. center - 居中
  4. justify - 两端对齐
h1 { text-align:center }
h2 { text-align:left }
h3 { text-align:right }

5、文本行高（line-height）

  1. 数字： px | scale()
  2. 百分比： 20%
p.small { line-height: 2; }   //  scale = 2 ， 也可以设置为小数1.5等
p.big { line-height: 200%; }

6、文本间距

  • letter-spacing 字符间距 （ normal | 2px ）
  • word-spacing 单词间距 （ normal | 2px ）
h1 {letter-spacing:2px; }
h2 {letter-spacing:-3px; }

p { word-spacing:30px; }

7、英文折行

div {
	word-break：break-all;      // 强制换行
	word-wrap：break-word;   // 部分换行，对于末尾出现很长的一些单词时，可能存在一些空白区域
}

可参考：https://www.w3cschool.cn/css/html-css-text.html
        https://www.w3school.com.cn/cssref/index.asp#text



七、css复合样式

     复合样式有利于简化代码，写法是通过空格方式实现的。

     注意：background、border无需考虑写的顺序，但是font需要考虑(至少需要两个值：size family )。
     font的写法顺序：

		weight  style  size  family 
		style  weight  size  family 
		weight  style  size/line-height  family

举例：

div {
	background: red url(./img/dog.png) no-repeat  20px center
	/*border: 2px red solid;*/
	border-right: red solid 20px;
	font: bold italic 30px/100px 宋体;
}

复合样式写法注意事项：

  1. 一个CSS属性只控制一种样式，叫做单一样式
  2. 一个CSS属性控制多种样式，叫做复合样式
  3. 尽量不要两种样式混合写，如果非要混合写，那么一定要先写复合样式再写单一样式
Java Web 2.2.3 案例——利用CSS对注册页面实现修饰（2）
Boyka1046的博客
09-23 485
【实现2】设计CSS样式表文档 #title{color:#DD7B0B;font-size:20px;font-weight:bod;} #i{width:350px;height:15px;color:blue;font-size:12px;} table{text-align:left;} #t{text-align:right;} 【实现3】利用CSS对页面实现修
Web前端工程师职业方向定位
在线学习web前端开发教程
01-16 1872
一、职业方向定位 首先，只有确定好自己的职业方向，才能做好职业规划。在我看来，做Web前端技术能够找到的职业方向有以下几种： （1）资深Web前端工程师 这个方向算是一个Web前端最基本的选择了，在国外，很多老外都能够把自己的专业做到极致，能一辈子就在一个专业领域不断学习和积累。主要在于内因和外因两方面，内因是老外通常思想比较简单直接，容易一直专注于一个领域；外因是国外的环境很好，能够良好的支撑...
个人主页设计-web前端开发技术（html+css）
lockhou的博客
03-16 8260
基本知识 https://www.w3cschool.cn/ https://www.w3school.com.cn/cssref/css_colors.asp 插入背景图片 转自于：https://www.php.cn/css-tutorial-410405.html css怎样设置背景图片? css 中background属性就是专门设置背景的属性，可以设置背景色，也可以设置背景图片。 下面看看background可以设置的属性： background-color： 规定要使用的背景颜色。 backg
matplotlib红橙黄绿青蓝紫（含颜色大全）
热门推荐
XerCis的博客
04-16 4万+
color = {'red': '#FF0000', 'orange': '#FFA500', 'yellow': '#FFFF00', 'green': '#008000', 'cyan': '#00FFFF', 'blue': '#0000FF', 'purple': '#800080'}
前端工程师养成记——二、HTML入门
Jenn168的博客
06-10 311
1.html语义化：是指根据网页中内容的结构，选择适合的HTML标签进行编写。 好处： 在没有CSS的情况下，页面也能呈现出很好的结构; 有利于SEO，让搜索引擎爬虫更好的理解网页； 方便其他设备解析（如屏幕阅读器，盲人阅读器等）； 便于团队开发和维护。 屏幕阅读器：网页标题提取： https://h5o.github.io 标题中的注意事项： 在一个网关中，h1标题最重要，并且一个.html文件中只能出现一次h1标签； h5、h6不经常使用； ...
前端工程师养成记——一、进入前端开发的王国
Jenn168的博客
06-10 579
进入前端开发的王国 一、认识什么是前端工程师 有时候，我们常常想三个问题，我是谁？从哪来？到哪去？ 同样的，在进入“前端开发工程师”的王国前，我也希望大家思考一下三个问题： 什么是前端工程师？ 前端工程师是如何产生的？ 前端工程师又要投入到哪些工作中去？ 本篇就开始围绕这三个问题进行讲解，希望大家看完本篇文章后，能对前端开发工程师这个名词以及它的产生背景有初步的认知。 1、什么是前端工程师？   前端工程师（英译：Front-End-Developer）这个名词源自于美国，是互联网时代软件产品
Web全栈工程师养成记
weixin_44713462的博客
06-11 2472
转发大佬的笔记，跟着大佬的步伐修炼！ 转载自：https://www.cnblogs.com/smyhvae/p/5243181.html 【目录】 01 什么是全栈工程师 02 如何成为全栈工程师 03 从学生到工程师 04 野生程序员的故事 05 工程师事业指南 06 全栈工程师眼中的HTTP 07 高性能网站的关键：缓存 08 大前端 什么是全栈工程师 全栈工程师（Fu...
万字启程——零基础~前端工程师_养成之路001篇
小淼淼的博客
10-26 2095
万字启程——零基础~前端工程师_养成之路001篇
Web前端大作业——基于HTML+CSS+JavaScript仿英雄联盟LOL游戏网站
专注于dreamweaver网页设计制作
12-11 8503
🎮游戏官网、⛹️游戏网站、🕹️电竞游戏、🎴游戏介绍、等网站的设计与制作。⭐ 网页中包含：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频音频元素，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保
Web前端工程师成长之路——知识汇总
hua83843545的专栏
04-01 604
web前端工程师 分类： Web开发应用 一、何为Web前端工程师？ 前端工程师，也叫Web前端开发工程师。他是随着web发展，细分出来的行业。Web前端开发工程师，主要职责是利用(X)HTML/CSS/JavaScript/DOM/Flash等各种Web技术进行产品的界面开发。制作标准优化的代码，并增加交互动态功能，开发JavaScript以及Flash...
前端工程师未来发展方向
CSYfairy的博客
07-07 2646
对于一个WEB前端bai的职业规划，其实有各种的答案，没有哪种答案是完全正确的，全凭自己的选择，只要是自己选定了，坚持去认真走，就好。在这里， 我只是简要说一下自己对于这块儿内容的理解。有一个观点想要分享给大家的是：任何规划和目标的实现都依赖于知识的积累，而知识的积累来源于学习及学习后大量的实 践。我提供一个实践途径，我们可以在工作之余的时间在网上或外包公司那里接一些私单做，因为目标不是赚钱，我们可以用最低的价格来提升自身竞争力，获得大 量订单就意味着获得大量的实践机会，同时，还有一些收入作为工作成就感之外
前端体系认识和我的技术栈——wsdchong
wsdchong的博客
08-18 7964
前端体系认识和我的技术栈 文章目录前端体系认识和我的技术栈前言往期的学习记录第一阶段：认识（前端路线）第二阶段：理解（从产品角度看前端）第三阶段：实践（vue框架）前端体系认识别人的前端体系我所认为的学习路线入门熟练我所认为的底层不仅仅是前端我的技术栈从开发角度从自身角度常用到的网站搜索网站同步代码的网站互联网资讯网站技术文档网站我常用的工具的网站 前言 从2020.3.12日我才开始系统接触前端。在此之前，只是简单了解前端的HTML、CSS、JavaScript。其他的vue、elementUI、node
前端开发核心知识进阶
GitChat
07-02 4425
Dreamweaver网页设计与制作100例：用DIV+CSS技术设计的书法主题网站（web前端网页制作课作业）
VX_WJ88950106的博客
08-06 665
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；...
js三种获取数组的最后一个元素的方法
Jenn168的博客
07-23 3万+
一: pop()方法 pop()方法，删除数组最后一个元素，并返回该元素，所以利用这个方法可以取到数组的最后一个，同理shift()可以取到数组的第一个元素(shift()删除数组第一个元素，并返回该元素) let arr=[1,2,3]; let ele = arr.pop(); // 删除数组最后一个并返回删除的元素 console.log(ele); // 3 注意： pop() 方法删除数组的最后一个元素，会把把数组长度减 1，且返回它删除的元素的值。如果数组已经为空，则 pop()
js用正则取${}中的值
Jenn168的博客
09-11 6944
var str = "124fddr32 3532${253} $23354${233} +\ k' 545xx54${666}233545xxxxx"; var reg = /\$\{(.+?)\}/; var reg_g = /\$\{(.+?)\}/g; var result = str.match(reg_g); console.log("result=",result); var list = [] for (var i = 0; i < result.length; i++) {
前端中几个单位（em、rem、vh、vw）的区别
Jenn168的博客
08-03 2239
1.em 在做手机端的时候经常会用到的做字体的尺寸单位 说白了 em就相当于“倍”，比如设置当前的div的字体大小为1.5em，则当前的div的字体大小为：当前div继承的字体大小*1.5 但是当div进行嵌套的时候，em始终是按照当前div继承的字体大小来缩放，参照后面的例子。 2.rem 这里的r就是root的意思，意思是相对于根节点来进行缩放，当有嵌套关系的时候，嵌套关系的元素的字体大小始终按照根节点的字体大小进行缩放。 参照后面给的demo 3.vh vh就是当前屏幕可见高度的1%，也就是说 hei
webpack图片压缩image-webpack-loader
Jenn168的博客
09-05 1987
{// 图片文件的处理 test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, use:[ { loader: 'url-loader', options: { // limit代表图片最大的大小,图片小于limit时，在加载该图片时会将图片编译为base64形式的字符串 // 超过limit的图片会被压缩到dist文件夹中 limit: 8192, // 当图片小于8k的时候
UglifyJs打包报错：Unexpected token: keyword const
Jenn168的博客
09-05 1463
背景描述：   UglifyJS Webpack Plugin插件用来缩小（压缩优化）js文件，至少需要Node v6.9.0和Webpack v4.0.0版本。   webpack 4之前的版本是通过webpack.optimize.CommonsChunkPlugin来压缩js，webpack 4版本之后被移除了，使用config.optimization.splitChunks来代替。 最近，JavaScript项目在打包过程中莫名其妙报错： �[1m�[31mERROR in js/main.404
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值