CSS3的基本使用1

第一种样式：内嵌样式，行内样式：在标签内通过style属性来设置元素的样式

第二种样式：内部样式表：在head中的style标签编写，但是只能对一个网页中起作用

第三种样式：外部样式表：将CSS编写到衣服css文件中，用link标签来引入外部文件

重置样式表：

id选择器：根据元素id属性值选中一个元素

类选择器：根据元素class属性值选中一组元素

一个标签可以起多个类名：

通配选择器：

交集选择器：同时符合多个条件的元素

注意：如果交集中有元素选择器，必须使用元素选择器开头

并集选择器：同时选择多个选择器的对应元素，用逗号隔开

父元素：直换包含子元素的元素叫做父元素
子元素：直接被父元素包含的元素是子元素
祖先元素：直接或间接包含后代元素的元素叫做祖先元素，一个元素的父元素也是它的祖先元素
后代元素：直接或间接被祖先元素包含的元素叫做后代元素，子元素也是后代元素
兄弟元素：拥有相同父元素的元素是兄弟元素

选中指定元素的下一个兄弟元素：

选中指定元素的下面所有兄弟元素：

子元素选择器：指定父元素的指定子元素

后代元素选择器：选中指定元素的指定后代元素

伪元素：表示页面中不真实存在的元素，以：：开头

::first-letter  表示第一个字母

::first-line   表示第一行

::selection    表示选中的内容

::before    表示元素的开始

::after     表示元素的最后

before和after必须结合content属性来使用，content中的数无法被选中

not为否定伪类

关于超链接样式：

link:用来表示没访问过的连接

visited:用来表示访问过的连接，由于隐私原因只能修改连接颜色

hover:用来表示鼠标悬停的状态

active:用来表示鼠标点击

表单获取焦点  focus：获取焦点

【属性名】选择含有指定属性的元素

【属性名=属性值】选择含有指定属性和属性值的元素

【属性名^=属性值】选择属性值以指定值开头的元素

【属性名￥=属性值】选择属性值以指定值结尾的元素

【属性名#=属性值】选择属性值中含有某值的元素

继承：我们为一个元素设置的样式也会应用在他的后代上

注意：不是所有样式都会被继承，比如与背景相关的

RGB:

红，绿，蓝每一种颜色0-255（0%-100%）

RGBA:

加上了透明：1为不透明，0为透明，.5为半透明

十六进制RGB（00-ff）  如果两位两位重复可简写 #aabbcc-》#abc

HSL，HSLA:H:色相（0-360）S:饱和度，颜色浓度（0%-100%） L亮度，（0%-100%）

百分比：将属性值设置为相对于父元素属性的百分比

随父属性的改变而改变

em：相对于字体来计算 1em=1font-size，会根据字体大小而改变

rem：相对于跟元素字体大小来改变（body）

选择器权重：

比较优先级需要加起来，但同类的再加也不会高于上一级，如果等级相同选择位置在下面的

样式后加：！impertant优先级为最高   慎用！！！

display:设置显示类型

可选值：inline：行内元素，block：块元素，inline-block:行内块元素，既可以设置宽高，有不独占一行，table：将元素设置为表格，none：元素不在页面显示

visibility:hidden 元素在页面中隐藏，依然占据页面位置

padding:内边距，

四个值：上右下左

三个值：上，左右，下

垂直外边距：会发生重叠现象

兄弟元素：取外边距绝对值大的，一正一负，取两者之和，不会影响页面布局

父子元素：子元素会传递给父元素，会影响页面布局

overflow：用于处理子元素内容从父元素中溢出

visible：在父元素外部显示

hidden：剪掉溢出部分

scroll：生成两个滚动条

auto：生成一个滚动条

box-sizing:用来设置盒子尺寸的计算方法

content-box:宽度和高度用来设置内容区的大小

border-box:宽度和高度用来设置整个盒子可见框的大小

box-shadow:设置阴影效果，不会影响页面布局

以第一个值：水平偏移量，第二个：垂直偏移量，第三个：阴影的模糊半径，第四个：阴影的颜色

outline:用来设置元素的轮廓线

border-radius:用来设置圆角

四个值：左上，右上，右下，左下

三个值：左上 右上/左下 右下

两个值：左上/右下  右上/左下

float:浮动   none left right

元素浮动以后，会完全从文档流脱离，不在占用文档流的位置，所以元素下方的元素会自动向上移动，浮动元素不会超过他上面的其他元素，用于水平方向的布局

脱离文档流之后块元素不在独占页面的一行，宽度和高度也会被内容撑开

BFC：块格式化环境

开启BFC该元素会变成一个独立的布局区域

特点：不会被浮动元素覆盖，子元素和父元素外边距不会重叠，可以包含浮动的子元素

开启BFC的方法很多，推荐使用：overflow：hidden

clearfix:这个样式可以同时解决高度塌陷和外边距重叠的问题

.clearfix::before,

.clearfix::after{

content:'';

display:table;

clear:both;

}

clear:清除浮动元素对当前元素的影响:left,right,both

原理：设置清除浮动以后，浏览器会自动为元素加上一个上外边距，使他不受其他元素影响

position:定位

可选值：static 没有开启定位

relative:相对定位

absolute:绝对定位

fixed:固定定位

sticky:粘滞定位

相对定位：

特点：如果不开启偏移量，不会有任何效果，，是参照文档流位置进行定位的，会提升元素层级，不会使元素脱离文档流，不会改变元素性质（块还是块，行内还是行内）

top：与上边的距离，bottom,left ,right

绝对定位：

特点：需要开启偏移量，开启后脱离文档流，行内元素变成块元素，宽高被内容撑开，绝对定位会使元素提升一个层级，绝对定位的元素是相对于包含块进行定位的。

包含块:离他最近的开启类定位的祖先元素，如果祖先元素都没有开启定位，则根元素是他的包含块

固定定位：也是一种绝对定位，大部分特点和绝对定位一样，唯一不同的是固定定位永远参照与浏览器的视口进行定位，固定定位不会碎网页的滚定条滚动

粘滞定位：与相对定位基本一致，不同的是可以使元素到达某个位置时将其固定

开启定位的元素可以通过z-index属性指定元素层级：值越大层级越高，元素优先显示，如果一样先显示下面的

注意：祖先元素层级再高也盖不住后代元素。

 

开启定位后原先的公式会加上两个值：left，right 规则不变

left+margin-left+border-left+padding-left+width=width+right+margin-right+border-right+padding-right

如果九个值中没有auto则调整right，如果有调整值为auto的属性

可设置auto的值：margin、width、left、right

垂直布局同理。

font-family字体族（字体的格式）
可选值：serif衬线字体，sans-serif非衬线字体，monospace等宽字体
font-family可以指定多个字体，字体先用第一个，如果无效，依次类推
@fone-face{
//指定字体名字
font-family：‘myfont’
//服务器中字体路径
scr：url（‘字体路径’）；
}
图标字体：fontawesome
使用步骤：
1.下载：https://fontawesome.com
2.解压，将CSS和webfonts移动到项目中
3.将all.CSS引入到网页中
5.使用字体：直接通过类名来使用字体
class=“fas fa-bell”
可以通过查询fontawesome使用手册来找类名

通过伪元素来设置图标字体：
1.找到设置图标的元素，用before和after选中
2.在content中设置字体的编码(查询fontawesome手册)
3.设置字体的样式
fab：
font-family:‘Font Awesome 5 Brand’(webfonts中有)
fas：
font-family:‘font Awesome 5 Free’(webfonts中有)
font-weight:900;
通过实体使用图标：
<span class="fas">&#x字体编码;</span>

line-height:设置行高
可以指定大小（px,em），也可以指定整数（表示为字体的倍数）
行高经常用于设置字体的行间距
行间距=行高-字体大小
font-size：实际上设置的是字体框的高度
 
font：[加粗] [斜体] 字体大小/行高 [字体族]
行高如果不写，使用默认值。
text-align：水平对齐
baseline：基线对齐，top：顶部对齐，center：居中对齐，justify：两端对齐
vertical-align:垂直对齐
baseline：基线对齐，top：顶端对齐，bottom：底端对齐，middle：居中对齐
text-decoration:设置文本修饰
可选值：none：什么都没有，underline：下划线，line-through：删除线，overline：上划线
white-space：设置网页如何处理空白
可选值：normal：正常，nowrap：不换行，pre：保留空白

 

background-origin:设置图片偏移量（background-position）计算的原点

padding-box:默认值从内边距开始

content-box：从内容区计算

border-box:从边框开始计算

background-size:两个值：宽度，高度，，，只写一个，第二个默认auto，，，

cover(图片比例不变，将元素铺满)，，contain（图片比例不变，将图片完整显示）

background-color
background-image（图片小于元素会平铺将元素铺满，如果大于元素将会显示一部分图片）
background-repeat（repeat-x，repeat-y，no-repeat）
background-position
background-size
background-origin
background-clip
background-attachment (背景图片是否跟随元素移动    scroll：默认，会跟随     fixed：不会移动)
没有顺序要求，也没有哪一个值必须写

注意：size必须写在position后面，并且用/隔开，origin要在clip前面

雪碧图：

使用步骤：

1.先确定要使用的图标
2.测量图标的大小
3.根据测量结果创建一个元素
4.将雪碧图设置为元素背景图片
5.设置一个偏移量以显示正确的图片