CSS 前置大体部分
前端 CSS 学习目录导航
认识CSS
-
CSS 表示的是层叠样式表
Cascading Style Sheet-
其他的叫法: 串样式列表，级联样式表，串接样式表等等
-
这个就是用来实现的网页的样式的设计的
-
CSS 和 HTML 两个只是计算机语言，但是不是编程语言
-
学习编程先了解历史，这个是十分重要的
-
CSS 出现的目的
- CSS 出现的目的就是为了实现美化原本的html网页的
- 美化方式一： 为我们的HTML 添加各种各样的样式，来实现美化
- 美化方式二： 对HTML实现布局，就是我们的CSS 的布局的模式那些
- 现在的开发模式就是我们的: 实现使用我们的HTML CSS JavaScript 实现分离的开发模式
-
CSS的编写模式
-
CSS属性名: CSS属性值;这个就是我们的 CSS的声明- 属性名(
property name): 这个就是实现的是添加css的规则名 - 属性值(
property value): 这个就是实现的是添加我们的css规则的值
- 属性名(
-
CSS 添加到网页的方式
-
内联样式表(
inline style)：- 就是将我们的样式的设计，添加到我们的HTML元素的
style属性中 <div style="属性名1:属性值1; 属性名2:属性值2;..."></div>
- 就是将我们的样式的设计，添加到我们的HTML元素的
-
内部样式表(
internal style sheet):- 就是实现的时候，是使用在head元素中实现样式表的设计，就是在head中的 style 中实现书写
- 这个时候就需要结合选择器来实现选择元素节点来进行样式的设计
<head><style> selector{属性名1: 属性值1; 属性名2: 属性值2}<style></head>- 通过的就选择器来实现我们没的具体的一些样式表的设计
-
外部样式表(
external style sheet):- 就是实现的是将相同的样式表书写抽离出来实现共同实现使用
- 然后通过我们的 link标签实现引入即可,这个也是我们的配置型的东西
<link rel="stylesheet" href="需要实现引入的CSS样式的路径">- 到了后面的时候，我们的代码的书写规范的时候，我们可以发现，我们 每个目录下面的入口文件都是我们的 index.后缀名
- 为了实现样式的统一化，我们是可以直接实现使用我们的:
@import url(需要实现归纳的样式的路径);
-
CSS 的注释
-
CSS 的注释：
/**/-
编译器的快捷键:
ctrl + / -
注释的目的:
- 可以方便我们的代码的阅读
- 在我们的程序的运行的时候，是不会运行注释内容的
-
-
提前扩展
- javascript / typescript 的注释方式：
// 注释内容 - HTML注释:
<!--注释内容--> - CSS注释:
/*注释内容*/
- javascript / typescript 的注释方式：
-
但是我们需要注意的是: 我们的注释是会导致文件占用的内存变大的，所以说我们需要注意注释的使用
- 但是这个的话，也是不用考虑的，因为我们的打包工具是可以实现配置的
CSS 的最常见的属性设置
-
font-size: 实现的就是设置网页对应部分的文字的大小的设置- 这个属性名对应的属性值的话含有: px的值，然后的话这个字体的大小的话，会根据你的浏览器的默认大小来设置值
- 网页中最小的字体大小是： 12px
- 同时这个属性的话，和我们的后面的移动端的适配有关
- 代码体现:
font-size:20px
-
color： 这个就可以实现设置我们的文本中的前景色的设置- 可以设置的属性值含有; 颜色的关键字
- 颜色的十六进制的实现使用或者其他
- 代码体现:
color: skyblue
-
background-color: 就是实现的是设置我们网页的背景色- 这个的颜色的设置，和我们的color可以实现设置的值和我们的 color 可以实现设置的值一摸一样
-
width: 这个就是用来实现设置我们网页中的某个盒子的宽度的- 属性值的设置的话，可以是我们的关于设置大小的值的属性值
width: 20px
-
height: 这个可以实现的就是我们的设置某个盒子的高度- 属性值的设置的话，就是我们的关于设置页面大小的属性值
height: 20px
link 元素的使用
-
link元素就是实现的是我们的外部资源链接元素，规范了文档和外部链接的关系
-
同时link的话准确来说也是我们一个网页文档中的一个配置型信息，最多的就是来设置网页的样式的设置
-
link元素使用最多的地方
-
1.链接外部的样式表
-
2.链接网页的站点图标
-
属性值含有:
- href： 这个就是用来实现的就是我们的设置我们的导入的外部的资源的url路径
- rel ： 就是来实现设置我们的外部资源的类型: icon
站点图标/ stylesheetCSS样式
-
-
处于我们的 head 中的一些书写的话，我们是可以直接理解为对网页实现的配置信息
- 关于配置信息性的实现的时候，我们是可以使用的就是我们的: link
- script 这些都是可以实现我们的外部资源的引入，以及配置信息的配置
- 同时有一些关于性能优化的也是关于这个 link 来实现解决的
认识进制
-
进位制是一种计数方式，进位计数法或者位值计数法
-
十进制
- 当我们的数字值到达9的时候，一位已经表示不了了，这个时候，就直接只用我们的两位来实现表示
- 9 就是实现 +1 的时候，我们就可以实现使用的就是我们的 10
-
我们的进制的话，我们含有的就有那些: 十进制， 二进制， 八进制， 十六进制等等
CSS 中颜色表示法
-
表示颜色的方式
-
颜色关键字(color keywords)
- 但是这个的颜色的区间是十分稀缺的
-
RGB的颜色表示- RDB 的颜色的设置就是我们的色彩空间 R——红色 （red）； G——绿色（green）； B——蓝色（blue）
- 这个颜色空间我们实现表示的就是我们的: 通过三原色来实现表示我们的所有的颜色
- 在这个的表示的过程中，每一种颜色的取值都是在我们的 0-255之间的颜色取值
color: rgb(255, 0, 0)这个就是表示的是我们的纯红色color: rgb(0, 0, 0)这个就是表示的是我们的纯黑色color: rgb(255, 255, 255)这个就是表示的是我们的纯白色- 通过我们的 rgb函数可以实现表示的颜色值就是含有: 255 *255 *255 种
-
十六进制来实现表示颜色#RRGGBB[AA]- 首先我们实现使用我们的进制来实现表示颜色的时候，我们需要实现的就是我们的利用 某种特定符号 作为颜色的设置形式
- 十进制的表示符号:
#646464 === rgb(100, 100, 100)rgb(0, 0, 0) === #000000 - AA 表示的就是我们的透明图的实现设置，但是是可选的
-
rgba的表示方式- a 就是实现的就是设置我们的颜色的透明度的
- 这个a 是一个可选的值
- 透明度通道的取值范围是0-1，0表示完全透明，1表示完全不透明
rgba(255, 0, 0, 0.5) 表示半透明的红色
-
-
颜色的表示是十分多的形式的，同时我们也是可以直接实现使用我们的 百分比来实现使用我们的表示形式的
- 百分比的表示形式 或者 纯数字的表示形式 或者其他的表示形式 开发的时候，我们使用最多的就是 cv大法
-
浏览器的调试工具
浏览器的渲染流程
-
提前知晓一点点（嘘！！！）
-
我们的前端网页的实现开发的时候，主要是由我们的前端三件套组成的
- HTML + CSS + JavaScript，这个就是我们的前端三件套
- 浏览器会对我们书写的这三个部分的代码实现解析，然后实现我们的展示
- 首先我们实现加载一个网页的时候，我们就需要的是先请求 回来我们的 index.html 的资源
-
首先我们的浏览器的渲染的流程:
-
第一步先实现从我们的服务器中实现加载我们的 html 的静态文件
load html -
第二步就是浏览器需要实现的就是解析我们的 html 的静态文件:
parse html---- 这一步就涉及html文件的文档说明 -
第三步就是实现我们的加载我们的 CSS,
load CSS---> 同时实现我们的解析我们的 CSS ，parse CSS -
第三步同时也是需要创建我们的DOM tree的，
create DOM Tree -
最后一步就是实现我们的 呈现我们的网页的具体的实现，就是我们的
display- 注意的是，我们实现我们的渲染页面的时候，我们需要将我们的CSS 实现渲染进入我们的 DOM TREE 的时候才实现渲染
-
-
-
当然浏览器的渲染机制还不止这么多点，里面还是具有很多的渲染流程的，但是这几个就是我们的几个重要的步骤
CSS 的文本和字体属性
CSS 的文本属性
-
text-decoration-
这个属性的话就是实现对网页中文本的装饰，就是实现的是设置我们的文本的装饰线的
-
可以实现设置的属性值为:
-
none默认的值，就是没有任何的装饰，但是常用的场景就是取消a链接的下划线- 同时我们实现使用我们的 这个属性值的设置的时候，我们是可以直接使用我们
curcor: pointer - 这个就是实现的是设置我们的经过的时候，为我们的小手的样式的
- 由于我们给我们的网页的CSS的实现设置的时候，这样的设置是我们在任何地方都需要实现的
- 所以说，我们是可以直接通过我们的 全局设置样式来实现样式的设置
a { text-decoration: none; curcor: pointer }
- 同时我们实现使用我们的 这个属性值的设置的时候，我们是可以直接使用我们
-
underline就是实现的是给我们的文本添加我们的下划线的 -
overline就是实现的是我们的给文本添加上划线的 -
line-through就是实现的是给我们的文本添加中划线的 (就是我们的删除线)
-
-
-
text-transform-
用来实现的是我们的文字的大小写的转化
-
经常实现设置的值有:
capitalize: 就是实现的是将我们的每个单词的首字母实现变为大写uppercase: 就是实现的是将我们的每个单词中的字母实现全为大写lowercase: 就是实现的是将我们的单词中每个字母实现变为小写none: 就是默认值，莫得任何效果- 这个属性的设置的话，实际开发中，我们实现的时候，这个是使用不多的，还是通过我们的js来实现控制才是比较好的
-
-
text-indent-
这个属性的设置就是来实现设置我们的首行文字的缩进的
-
属性值的设置的话:
- 可以实现设置的值为：
text-indent: 20px - 一般的话，这个的值的设置是我们的 font-size 来实现结合实现使用的
- 可以实现设置的值为：
-
-
text-align-
这个的话就是来实现我们的文本在我们的网页中的父盒子中的显示位置的设置
-
就是设置我们的文本的对齐方式
-
需要我们注意的是，我们的这个不仅仅是可以实现我们文本的居中，同时也是可以实现我们的图片内容的居中
-
完整的描述就是: 定义行内的内容实现相对于我们的相对于块级元素的对齐方式
-
但是我们需要注意的是，我们控制的时候，是需要我们的: 块级元素里面的内容为一个行内元素，才可以实现我们的控制显示
-
这个时候如果需要控制显示的话，就需要把内部的块级元素内容转换为显示模式:
display: inline/inline-block -
可以实设置的属性值有:
left这个值就是我们网页中的文本的默认的布局位置right这个就可以实现我们的文本实现右对齐center这个就可以实现我们的文本的居中对齐justify这个就可以实现我们的两端对齐
-
-
letter-spacing- 用来实现的就是我们的设置字母之间的空间间距的
-
word-spacing- 这个就是用来实现的是我们的设置单词之间的空间的间距的
-
上面的几个用来实现的我们的控制文本的显示模式的元素的话，我们实现的时候，常用的属性设置为: text-derocation / text-align
CSS 的字体属性
-
font-size- 这个就是用来实现的就是设置我们的字体大小的属性
- 同时的话，这个属性的设置是和我们的移动端的适配是有关系的
- 同时这个属性是会具有继承的特性的： 就是我们的子盒子是可以根据父盒子的字体大小来实现通过百分比来实现设置的
-
font-family- 这个就是用来实现设置我们网页的字体的，一般一个网页的话只需要实现设置一次就可以了
- 或者说有的时候，我们是会通过我们的
@font-face指定我们的可下载的字体的 - 还是那那句话，我们的这个还是需要我们来实现我们的一些基本的样式的设计的，这个还是我们的公用的，可以抽离出来
-
font-weight-
这个就是用来实现我们的字体的加粗的
-
属性值的设置:
- 默认的值:
normal—— 对应的就是我们的数值 400 bold这个就是我们的加粗字体 —— 就是对应的我们的数值为 700- 还可以实现设置我们的数值: 100-900
- 还有其他的值可以实现设置
- 默认的值:
-
-
font-style-
这个属性主要就是用来实现的是设置文本的样式的
-
可以设置的值含有：
normal就是我们的默认值italic实现的就是设置我们的字体为斜体(可以用来实现设置字体)oblique文字实现倾斜
-
-
line-height-
用来实现的是设置我们文本行高的一个属性
-
经常实现使用的地方是:
- 用来实现的是我们让我们的文本实现居中显示
- 一般实现我们的高度上面的行高的对齐的时候，我们一般使用的就是设置为父盒子的高度即可
-
-
font混合写法- 这个属性可以实现的就是将我们的上面的几个字体的属性直接一起进行书写
选择器
CSS 的选择器
-
书写CSS的基本格式
-
selector { 属性名: 属性值; } - CSS 选择器就是根据我们的一些基本的格式来实现选择我们的html文档中的元素进行CSS的实现设计
-
-
通用选择器（通配符选择器）[
universal selector]- 实现的就是把我们的网页中的所有的元素全部实现选中的一种CSS规则
*使用的CSS选择器名称，但是这种做法的实现是将所有具有的元素实现的是进行都遍历一遍，所以说这个会影响性能-
*{ padding: 0; margin: 0; list-style: none; } - 上面的代码就是实现的是我们的清除内边距和外边距以及列表的默认样式，方便我们的后期的样式的设计，静态页面的实现
-
简单选择器
-
元素选择器（
type selectors）- 这个的实现的就是通过的我们的元素的名称来实现的选择元素实现的样式的设计
-
elementName { 属性名: 属性值 }
-
类选择器（
class selectors）- 就是实现的是使用我们的类名来实现的选择
-
.className { 属性名: 属性值 }
-
id 选择器（
id selectors）- 这个就是实现的是我们的通过id名来实现的选择的我们的元素
-
#idName { 属性名: 属性值 }
-
-
属性选择器（
attribute selectors）-
一般的话，我们的这个选择器的使用一般都使用的不多的
-
就是实现的是通过我们的属性来实现的选择我们的元素来实现我们的选择元素，然后实现选择元素来实现样式表的设计
-
就是相当于我们是对元素中的属性来实现的设计选择，然后实现我们的样式表的设计
-
基本的语法格式就是我们的:
[属性名]这个就是实现了我们对具有属性名这个属性的元素实现了选择- 放心这个用的不多，不用纠结，了解即可
-
-
后代选择器（
descendant combinator）- 实现使用这个选择器就是为了实现我们的精确的实现我们的对元素的实现选择
- 就是实现的是通过我们的
空格来实现的后代的选择,可以实现的是将这个节点后面的元素全部实现选择 -
<!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> /* 开始实现使用我们的后代选择器 */ /* 我们实现使用这些选择器的主要目的就是为了实现我们的对元素的更加准确的选择 */ .title .son span{ color: red } .content div{ color: skyblue } </style> </head> <body> <div class="title"> <div class="son"> <span>我是第一个后代</span> </div> </div> <div class="content"> <div class="son"> <span> 我是第二部分 </span> </div> </div> </body> </html> - 通过我们的多种选择器的实现书写，这个时候，我们就可以实现的是我们的简化对 class的添加，直接实现对元素的选择
-
子代选择器
- 通过的选择就是使用我们的:
>来实现的我们的选择元素节点来实现的，这个时候，只会实现选择我们的 儿子元素 -
.title>.son { color: red } - 选择器的使用就是可以实现我们的对元素的精准的选择，这个时候就可以减少我们的代码的有些重复玩意的书写
- 通过的选择就是使用我们的:
-
兄弟选择器（
sibling combinator）-
相邻兄弟选择器
- 使用的就是我们的
+来实现的我们的选择元素，只是实现了选择相邻的兄弟元素
- 使用的就是我们的
-
普遍兄弟选择器
- 通过的就是我们的:
~来实现的我们的选择元素，直接把后面的兄弟元素实现了全部选择
- 通过的就是我们的:
-
-
选择器组
-
交集选择器
- 需要实现的就是同时符合两个选择器条件，实现精确的选择某一个元素，相当于就是实现的是我们的将DOM TREE
- 来实现紧邻的实现选择DOM节点
-
并集选择器
- 就是实现给多个元素设置相同的属性的时候使用的选择器，使用的是
,实现我们的分割 - 这个的话可以实现我们的对 通配符选择器的优化实现
- 就是实现给多个元素设置相同的属性的时候使用的选择器，使用的是
-
-
伪类选择器（
pseudo-classes）-
伪类选择器就是选择器的一种（废话文学），它用来实现选择处于特定状态的元素
-
就是实现的是在我们的原本的选择器实现添加一些装饰来实现我们的一些效果的实现
-
基本的格式为:
selectors :伪类选择器 {} -
常见的伪类选择器含有:（使用 a 元素来实现举例）
-
动态伪类（
dynamic pseudo-classes）:hover： 这个的意思就是实现的是我们的鼠标在这个元素上的时候，处于的状态:link::visited: 这个就是实现的是表示我们的访问过的样式的设计:active: 这个就是实现的是处于激活的状态下的显示样式:focus: 这个就是聚焦的时候的样式的设置
-
目标伪类
:target： 就是实现的是匹配我们的url
-
-
我们的伪类选择器还有很多很多，可以多看看文档
-
这种动态的实现设置，后期的话还是通过的我们的 JavaScript 来实现的控制是否显示，所以说不要慌，哈哈哈，我也记不住
-
-
伪元素选择器（
pseudo-elements）-
常用的伪元素有
::first-line：就是实现的是对我们的首行文本实现的属性设置::first-letter：就是实现的是我们的对首个字母的实现的属性的设置::before：实现的是在我们的一个元素之前实现插入其他内容，和我们的 content 属性连用::after：实现的是在我们的元素之后插入其他内容，和我们的 content 属性实现连用- 我们的 content (必须)就是我们实现添加的内容，然后其他的书写就是我们的CSS 的样式的设计
-
为了和我们的伪类实现一个区分，我们最终实现的时候，使用两个冒号来实现区分伪类
-
常用来实现的是我们的设置我们的图标字体的
-
