前端学习入门笔记（CSS-1）
CSS简介：
网页分为三个板块（结构（HTML）+表现（CSS）+行为（javascript））
CSS:
层叠样式表
网页实际上是一个多层的结构，通过CSS可以分别为网页的梅伊层来设置样式
而我们最终能看见的的只是网页的最上边的一层
CSS用来设置网页中元素的样式
使用CSS来修改元素的样式：
第一种方式：在内部标签中通过style的属性来设置元素的样式、
示例：<p style="color:red; font-size:40px;">少校离家老大会</p>
第二种方式：将样式编写到style的标签中 然后通过CSS选择器来选中元素并为其设置各种样式，同时为多个标签设置样式，并且修改时值修改移除几个。内部样式可以更加方便的对样式进行复用。我们的内部样式表支队一个网页起作用，它里边的样式不能够进行页面跳转复用。
示例：
<style>
p{
color:green;
font-size:50px;(后面的冒号可以省略)
}
第三种方式（外部样式表）（最佳实现方式）
将CSS编写到一个外部文件中 然后通过link标签来引入外部的CSS文件
示例：
<link rel="stlyesheet" href="该形式和超链接中的形式一致">
外部样式表可以通过link在不同的页面之间进行复用
可以最大限度的使用浏览器的缓存机制，从而加快王爷的加载速度，从未提高用户体验
CSS的基本语法：
CSS的基本语法：选择器 声明快
选择器：通过选择器可以选中页面中的指定元素 例如p
p的作用就是选中页面中的所有p元素
声明块：通过声明块来指定为元素设置的样式
声明块由一个个声明组成
声明是一个对称结构
一个样式名对于一个样式值：磨合值之间以：连接 以；结束
选择器：
id选择器
作用：根据与那是的id属性选中一个元素
注意：每个标签之间的ID不能重复
语法：#id属性值（）；
示例
#red
{
color : red;
}
类选择器
作用：根据元素的class属性选中一组元素的集合
语法： .class
示例：
.box
{
color:red;
font-size:60px;
}
通配选择器
作用：选中页面中的所有元素
语法：*
示例：
{
color：red；
}
符合选择器
交集选择器：
作用：选中同时符合多个条件的元素
语法：选择器1.选择器2
注意点：
交集选择器中如果有元素选择器，必须使用元素选择器开头
并集选择器
作用：同时选中多个选择器对于的元素
语法：选择器，选择器，选择器{}
示例#b，.p1，h1，span，div，red
伪类选择器：伪类即是不存在的类。（比如第一个子元素，被点击的元素，鼠标输入的元素）
伪类选择器（一个冒号）
ul>：first-child
ul>:nth-chlid（）
伪类一般情况下都是使用：开头
：first-child
:last-child
:nth-child() 特殊值：n 表示选中所有的元素
2n 表示选中偶数位的元素（even）
2n+1 表示选中奇数位的元素（odd）
:first-of-type
:last -of-type
:nth-of-type
这几个伪类和上述的类似，不同的是它们在同类型的元素中进行排序
：not（）否定伪类
将符合条件的伪类冲表中去除。
：ul>li:not(li:fist-of-type(3))
：ul>li:not(:nth-child(4))进行的是大排行
作用：将符合条件的为了进行删除。
超链接的伪类：
：link 用来表示没访问过的链接（正常的链接）
：visited 用来表示访问过的链接，由于隐私的原因，visited这个类只能够改变链接的颜色
：hover用来表示鼠标移入的状态
：active表示鼠标点住不松手的状态
a：visited{
color：aqua；
}
伪元素选择器：
伪元素（例如 首字符下沉<span>，给L字母单独加标签）
伪元素表示的特殊的位置 伪元素使用::开头
常见的伪元素选择器
：：first-letter：首字母
：：first-line
：：selection 选中之后字符的形式会发生变化
：：before and after
before and after必须结合content属性来使用
示例：
p::first-letter{
font-size:50px
}
继承：
样式的继承:我们作为一个元素设置的样式的同时也会应用到它的后代元素上
继承是发生在祖先后代之间的
继承的涉及是方便开发 利用继承 可以将一些通用的样式统一设置到祖先元素上，真央只需设置一次即可让所有的元素都具有该样式
继承，并非所有的样式都会被继承 比如backgroun（子元素的默认元素是透明的） 布局相关的
选择器的权重：
样式的冲突：当我们通过不同的选中器，选择了相投的元素，位相同的样式设定了不同的值，此时就发生样式的冲突。
发生样式冲突时，选中哪个样式，由选择器的优先级决定的
选择器权重↓：
内联样式 1000
id选择器 100
类和伪类选择器10
元素选择器 1
调配选择器 0
继承的样式 没有优先级
★ 比较优先级时将所有元素的优先级进行相加运算，最后优先级越高，则约优先显示（分组选择器时优先选中） 选择器的累加不会超过最大的数量级。即类数量级不会超过id数量级。如果优先级相同，则优先使用靠下的样式
★可以在某一个样式后边添加！important，此时该样式会获取到最高的优先级，甚至超过内联样式
像素百分比：
长度单位：
像素：屏幕（显示器）实际上是由一个个小点点组成的
不同屏幕的像素大小是不同的，像素越小的屏幕显示越清楚。同样的像素在不同的设备下显示效果不一样
百分比：可以设置属性相对于父元素属性的百分比
设置百分比可以使得子元素随着父元素的改变而改变
em：
em是相对于元素的字体大小来计算的，
1em = 10*font-size;
一般情况下的字体大小为16像素 em会根据字体大小的改变而改变
rem
rem是相对于根元素的字体大小来计算
.box
{
width:300px;
height:100px;
background-color:orange
<div class="box1"></div>
颜色单位：
.box1{
width:100px;
height:100px;
back-ground：red
}
css当中可以直接使用颜色名来设置各种颜色，也可以使用rgb值直接来描述元素
RGB:R red， G green， B blue
每一种颜色的范围在0~255（0~100）之间
语法：RGB（红色，绿色，蓝色）； 如果三种颜色都有为零 则为黑色，如果都为最大则为白色。
RGBA （A 表示透明） RGB的基础上增加了一个a表示不透明度。
十六进制的RGB值：
语法：#红绿蓝 颜色浓度通过00~ff 如果颜色两位重复可以进行简写
HSL：H：色相（0~360） S：饱和度（颜色浓度0~100%） L：亮度（0~100%）
声明块
layout（布局）
文档流（normal flow）：网页是一个多层的结构，一层落着一层。通过CSS可以为每一层设置样式。作为用户只能看到最顶上的一层。最底下的一层即为文档流。创建的元素默认在文档流中进行排列。
元素在文档流中的特点：
块元素
块元素会在页面中独占一行
默认宽度时父元素的全部
默认高度是被内容（子元素）撑开
行内元素
行内元素不会独占一行，只占自身的大小，自左向右水平排列。如果一行中不能容纳下所有的行内元素，则元素会换到第二行自左向右排列（书写习惯一致）
行内元素的默认宽度和高度都是被内容撑开
浙公网安备 33010602011771号