CSS温习回顾
CSS基础知识
-
CSS-层叠样式表：网页实际上是一个多层结构，通过CSS分别为每一层设置样式，最终我们所看到只有最上层的结构；
使用CSS修改元素样式有三种方式：
第一种：内联样式（行内样式）
—在标签内部通过
style属性设置元素的样式；—CSS样式名字和样式值用冒号连接；
—可以同时设置多个样式，
color、font-sizde等，用分号隔开；—内联样式只能对一个标签生效；（开发不方便）
—例如：
<p style="color=red; font-size:12px;">少小离家老大回</p>第二种：
<style>标签修改样式—将样式编写到
<head>里面的<style>标签里面；—通过CSS选择器选中元素并为其设置格式；
—可以同时为多个标签设置样式，修改方便；
—内部样式表只能对一个网页起作用，里面的样式不能跨页面复用；
—例如：
<style> p{ color:red; font-size:12px } </style>第三种：CSS样式表
—将CSS样式编写到一个外部的CSS文件（CSS样式表）中；
—通过标签引入外部的CSS文件；（标签是写入标签内的）—一般常把样式表放在一个指定的文件夹中，方便引入网页；
—可以跨网页复用；
—将样式编写到外部的CSS文件中，可以使用到浏览器的缓存机制，加快网页的加载速度，提高用户体验；开发中最常用的方法！！！—例如：
<link rel="stylesheet" href="../CSS Style/teststyle.css">浏览器访问机制：当浏览器首次访问网页时，会将内容缓存到本地一个副本，当浏览器再次访问的时候，不会重新向服务器发送请求，而是加载保存在本地的副本；（从本地加载要比服务器加载快）
使用外部CSS文件表，浏览器访问网页是会自动缓存副本到本地，当访问其他网页时速度会有所提升（直接从本地加载样式表）；
-
CSS基本语法
CSS为网页的表现部分，因此不能遵循HTML语法规范；
<style>标签内部区域不能书写HTML语法规范，要遵循CSS语法规范；CSS基本语法：
选择器 { 声明块 }
—选择器：选择页面中的指定内容；
比如
p选择器，选择页面中所有<p>元素；—声明块：通过声明块指定要为元素设置的样式；
声明块由一个一个的声明组成；
声明是一个名值对结构；
样式名和样式值一一对应，以冒号连接；
声明之间用分号隔开；
-
常用选择器
元素选择器
—作用，根据标签名选中指定的元素；
—语法：
标签名{}—例如：
p{}，h1{}，div{}id选择器—根据元素的
id属性值选中一个元素；—语法：
#id属性值{}—例如：
#box{}，#red{}类选择器
—根据元素的
class属性值选择一组元素；—语法：
.class属性值{}—
class是一个标签的属性，可以重复使用；—可以通过
class为元素分组分类；—可以同时为一个元素指定多个
class属性；—多个属性之间使用空格隔开；
通配选择器
—选择页面所有元素；
—语法：
*{} -
复用选择器
交集选择器
—选中同时符合多个条件的元素；
—语法：
选择器1选择器2选择器3选择器n{}—注意：交集选择器中有元素选择器，必须使用元素选择器开头；
并集选择器（选择器分组）
—同时选择多个选择器对应的元素；
—语法：
选择器1，选择器2，选择器n{} -
关系选择器
首先了解一下元素之间的关系：
父元素：直接包含子元素的元素叫做父元素；
子元素：直接被父元素包含的元素叫做子元素；
祖先元素：直接或者间接包含后代元素的元素叫做祖先元素；
—一个元素的父元素也是它的祖先元素；
—父元素只有一个，祖先元素有多个；
后代元素：直接或间接被祖先元素包含的元素叫做后代元素；子元素也是后代元素；
兄弟元素：拥有相同父元素的元素叫做兄弟元素；
子元素选择器
—选中指定指定父元素的指定子元素；
—语法：
父元素 > 子元素{}例如：
<!--为div中直接包含的子元素span设置相关样式--> <style> div > span{ color:red; font-size:12px; } </style>后代选择器
—选中指定元素内的指定后代元素；
—语法：
祖先 后代{}（用空格隔开）例如：
<!--为div中所有后代元素设置相关样式--> <style> div span{ color:red } </style>兄弟选择器
—选择下一个兄弟元素；
—语法：
前一个兄弟元素 + 后一个兄弟元素{}例如：
<!--选择p下一个span兄弟元素--> <style> p + span{ font-size:12px; } </style>—选择下面所有的兄弟元素；
—语法：
前一个兄弟元素 ~ 后面的兄弟元素{}例如：
<!--选择p下面的所有span兄弟元素--> <style> p ~ span{ font-size:12px } </style> -
属性选择器
第一种：
—选择有指定属性的元素；
—语法：
[属性名]{}第二种：
—选择有指定属性和属性值的元素；
—语法：
[属性名=属性值]{}第三种：
—选择属性值以指定值开头的元素；
—语法：
[属性名^=属性值]{}第四种：
—选择属性值以指定值结尾的元素；
—语法：
[属性名$=属性值]{}第五种：
—选择属性值中含有某值的元素；
—语法：
[属性名*=属性值]{} -
伪类选择器
伪类，不存在的类，特殊的类；伪类用来描述元素的特殊状态；比如，第一个元素，被点击的元素，鼠标移入的元素；
伪类选择器：
—伪类一般使用单冒号开头；
—
:first-child表示第一个子元素—
:last-child表示最后一个子元素；—
:nth-child()表示选中第n个子元素；特殊值，
n表示选中0到正无穷个子元素；2n或者even表示选中偶数位的子元素；2n+1或者odd表示选中奇数位的子元素；以上所有的伪类都是根据所有的子元素进行排序的；
—
:first-of-type—
:last-of-type—
:nth-of-type()以上所有伪类与上述伪类功能相同，不同点在于他们是在同类型元素中进行排序的；
—
:not()否定伪类，将符合条件的元素从选择器中去除； -
超链接伪类
超链接独有的伪类：
—
:link用来表示未访问的链接(正常链接)；—
:visited用来表示访问过的链接；由于隐私的原因，
visited这个伪类只能修改链接的颜色；所有元素都可以使用的伪类：
—
:hover用来表示鼠标移入的状态；—
:active用来表示鼠标点击的状态； -
伪元素
伪元素表示页面一些特殊位置的内容；一般用双冒号表示
—
::first-letter表示第一个字符；—
::first-line表示第一行；—
::selection表示选中的内容；—
::before表示元素的开始—
::after表示元素的最后before和after必须结合content属性使用；在网页中，通过
content属性添加的内容，无法被选中；例如：
<style> div::before{ content:'abc'; color:red } </style> -
CSS样式继承
样式的继承：
—为一个元素设置样式，同时也会为其后代元素设置样式；
—继承是发生在祖先元素和后代元素之间的；
—继承的设计是为了方便开发；
—利用继承可以将一些通用的样式统一设置到共同祖先元素上，设置一次即可，所有元素都具有相同样式；
—并不是所有的样式都会被继承，比如，背景相关的、布局相关的样式等都不会被继承；
-
选择器权重
样式的冲突
—通过不同选择器选中相同元素，并且为相同样式设置不同值，此时发生样式冲突；
—发生样式冲突时，样式应该由选择器的权重（优先级）决定；
选择的权重（由高到低）
—内联样式 1，0，0，0
—
id选择器 0，1，0，0—类和伪类选择器 0，0，1，0
—元素选择器 0，0，0，1
—通配选择器 0，0，0，0
—继承的样式 无优先级
—比较优先级时，交集选择器中，需要将所有的选择器的优先级进行相加计算，优先级越高则越优先显示；
—分组选择器单独计算，例如：
div,p,span{}它们的优先级单独计算；—选择器的累加，不会超过最大的数量级，即不会超过上一级的优先级；
—选择器越具体其优先级就越高；
—如果优先级计算相同，此时优先使用靠下的样式（最新样式代码）；
—可以在某一个样式中加入
!important，则此时样式优先级最高；但是在开发中，尽量少用； -
单位
长度单位
—像素：屏幕（显示器）实际上由像素点组成；
—不同屏幕的像素大小是不同的，像素越小的屏幕显示效果越清晰；
—同样的200px在不同的设备下显示效果不同；
（在高清屏下，自动放大150，越清晰放大倍数越大）
—百分比：也可以设置属性相对于其父元素或者包含块的百分比；
—设置百分比，可以使子元素跟随父元素的改变而改变；
相关单位：
—
em：相对于元素的字体大小计算的； —
1em = 1font-size（默认的字体大小为16px）; —
em会根据字体的大小而改变；—
rem：相对于根元素（<html>）的字体大小来计算；颜色单位
—可以直接使用颜色名字设置各种颜色
例如，
red yellow blue....;但是在CSS中使用颜色名字很不方便；—
RGB值：通过三种颜色不同比例设置不同颜色； —R：Red ；G：Green；B：Blue
—每一种颜色范围在0-255之间（或者0%-100%）；
—语法：
RGB(红色比例，绿色比例，蓝色比例)—
RGBA值：在RGB基础上增加了不透明度，其中A表示不透明效果（范围为：0~1） —0：完全透明；
—1：完全不透明；
—0.5：半透明；
—十六进制的
RGB值： —语法：#红色绿色蓝色；
—颜色浓度通过
00~ff表示； —如果颜色两位重复，可以进行简写
例如：
#aabbcc可以简写为#abc 但是
#aabbcd不可以简写；—
HSL值（或者HLSA值） —H：色相（0-360）；
—S：饱和度（颜色浓度：0%-100%）；
—L：亮度（颜色亮度，0%-100% 0%表示黑色）；
114
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
