前端开发----CSS（上）

最新推荐文章于 2024-05-10 20:24:31 发布

沉迷于搬砖

最新推荐文章于 2024-05-10 20:24:31 发布

阅读量467

点赞数

分类专栏：笔记文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_45960356/article/details/128972667

版权

笔记专栏收录该内容

9 篇文章 0 订阅

订阅专栏

前端开发之CSS

1、CSS 概述

1、产生背景

自从HTML被发明开始，样式就以各种形式存在，最初的HTML只包含很少的显示属性
随着HTML的成长，为了满足开发者需求，HTML添加了很多显示功能，例如文本格式化标签
但随着这些功能的增加，HTML变得越来越杂乱，也变得越来越臃肿
于是CSS诞生

2、发展过程

在这里插入图片描述

3、CSS概念

CSS，层叠样式表，是一种用来表示HTML文件样式的计算机语言
作用：静态修饰页面，并可配合各种脚本语言动态对页面各元素进行格式化

4、CSS组成

1、层叠式：CSS直接抛给吗贯穿始终的加载特性

层叠性
继承性

2、样式：定义如何显示HTML元素

文字文本
背景
盒子模型
浮动
定位
其他

5、CSS语法

1、CSS 规则

1、说明：CSS规则主要由两个主要部分构成：选择器、一条或多条声明
在这里插入图片描述
2、样式规则
以内嵌样式表为例

所有的css代码都必须书写在head标签内部的一对style标签内
css在给某个标签设置样式前，必须使用选择器先选中标签
css样式的属性，属性名和属性值的键值对写法为k:v;
给每个选择器添加的按时属性都必须写在一对大括号{}之内
给一个标签添加所有需要的样式，都要在{}内部一一罗列出来

3、注意事项

分号必要性：每条属性后面的分号必须写，如果不写，会导致后面所有代码加载错误
css中所有属性与属性之间对空格、换行、缩进不敏感

4、css注释
语法格式：/* 中间部分为注释内容 */

2、书写位置

CSS代码根据书写位置不同分为四种书写方式：内联式、内嵌式、外联式、导入式

1、内联式

内联式，也成为行内式
书写位置：在HTML标签之上的style属性中书写css样式
所有的css样式属性总体组成标签的style属性的属性值

<div style="width: 100px; height: 100px; font-size: 14px;">123</div>

内联式缺点

内联式必须写在标签上，没有完全脱离HTML标签
css样式代码让标签结构更加繁重，不利于HTML结构解读
一个内联式的css代码只能给一个标签使用，如果多个标签有相同的样式，同样的css代码需要书写多次，增加代码量

实际工作中不会使用内联式（行内式）编写css代码，一般都是开发者写demo时才用到

2、内嵌式

书写位置：在HTML文件中，head标签内部有一个style标签，style标签写在title标签后面，所有css代码书写style标签内部
style标签有一个标签属性为type，属性值为test/css

<style type="test/css">
	div {
		witdh: 100px;
		height: 100px;
		backgorund-color: pink;
	}
</style>

内嵌式特点
1、优点

实现结构与样式初步分离，css只负责样式，HTML负责结构
多个标签可利用一段代码设置相同的样式，节省代码量

2、缺点

结构和样式并没有完全分离，代码依旧书写在HTML文件的style标签内部
css样式智能给一个HTML文件使用，不能被多个HTML文件同时使用
在HTML中如果css代码太多，会造成文件头重脚轻

3、外联式

外联式css，也成为外链式css，外部css
书写位置：在一个单独的扩展名为.css文件中
书写语法：内部代码与内嵌式样式表中style标签内部的代码一样，需要通过选择器去选中标签，添加对应样式

注意：在.css文件中书写时，不需要再加style标签

外联式引用

外联式样式表必须引入HTML文件中，才能正常进行加载
引入方式：在HTML中的head标签内部使用link标签进行引入
link标签属性

外联式优点
实现HTML与css完全分离
多个HTML文件可共用一个css文件，便于提取公共css，减少代码量
可实现一个css变化，多个HTML页面同时变化，减少工作量
一个HTML文件可引用多个css文件，可实现同一个页面中css代码分层

4、导入式

书写位置：在内嵌式样式表style标签内部，或者外联式样式表内部，导入其他的外部的.css文件
导入方式：利用一条@import url(路径)语句进行引入

<style>
	@import url(css/1.css);
	div {
		border-color: #fff;
	}
</style>

导入式问题

导入式样式表的作用与外联式样式样式表基本相同
由于导入式在浏览器加载时，会在HTML结构加载完毕后再进行编译，如果网速比较慢时，会导致网页出现没有css样式的效果，给用户体验不好
实际工作中，很少使用导入式，推荐使用外联式样式表

3、CSS语法

1、CSS 样式格式

1、展开格式：开发过程使用，代码可读性强，便于调错

<style>
	div {
		width: 100px;
		height: 100px;
		background-color: blue;
		margin-bottom: 10px;
	}
</style>

2、紧凑模式：上传服务器时使用，减少不必要的空白字符，压缩文件大写，利于传输

<style>
	div{width:200px;height:200px;background-color:blue;margin-bottom:10px;}
</style>

3、英文大小写
CSS中的英文可使用大写，也可使用小写
建议：css中的选择器和样式属性名、属性值等都是用小写英文，特殊情况除外

4、空格规范

选择器与大括号{}之间保留一个空格
冒号后面，属性值前面，保留一个空格

4、CSS 常用样式

1、文字三属性

1、颜色 color

作用：给文字设置颜色
属性名k：color
属性值v：颜色名、颜色值
颜色名：使用颜色单词进行表示
颜色值：使用具体颜色的数值表示（rgb模式和十六进制模式）

rgb模式：根据红绿蓝三原色进行混合的颜色模式
每个原色的取值范围是0-255，一共256个数值，三个原色可混合成1677多万中颜色
书写方式：rgb(红,绿,蓝)
十六进制模式：逢十六进一，每个数位上只能出现 0-9，a-f 之间的
书写为颜色值时，红、绿、蓝每个色值都要使用两位数的十六进制进行替换
书写方式：使用#开头，后面连续书写红、绿、蓝三个颜色的十六进制的两位数值

2、字体 font-family

1、说明

作用：定义元素内文字的字体
属性名k：font-family，字体属于font综合属性的饿一个单一属性
属性值v：字体名称，必须包裹在一对引号中，属性值可以有多个，值与值之间用逗号分隔

2、常用字体
常用中文字体

宋体 SimSun
微软雅黑 Micosoft Yahei

常用英文字体

Arial
consolas

如果不设置字体属性，不同的浏览器会有自己的默认字体

3、注意事项

font-family 可设置多个字体名称，在实际加载时只会选择一种加载，选择依据书写顺序进行，如果浏览器不支持第一个字体，则会尝试下一个，直到找到第一个支持的字体
浏览器中加载的字体是用户机器自带的，如果用户的电脑中没有设置的字体，则会加载失败，需要查找下一个，因此，必须在最后设置一个所有机器都具备的通用字体作为后路
中文字体中一般带有英文可加载的字体效果，为避免对英文字的字体影响，建议将英文字体写在属性值最前面