CSS学习总结

CSS简介：CSS全称是：Cascading Style Sheets，是层叠样式表，是用于修饰文档（可以是标记语言HTML，也可以是XML或者SVN）的语言，可以将文档以更优雅的形式呈现给用户。CSS样式用来修饰HTML文档，简单来说：THML网页是内容的载体，而CSS是样式的表现，如果把HTML文档比作一个木偶，那么CSS就是给木偶的装饰，例如穿衣服，化妆，如果要给这个木偶加上动作的话就要用到js。今天先来总结一下关于CSS的一些内容。

1CSS语法

1.1声明与声明块

CSS语言的核心就是为特定的属性设定特定的值，CSS引擎通过计算出声明的每个属性来显示元素；

声明：属性与值通过“:”分隔开；

声明块：将多个CSS声明写在一起，每个CSS声明通过“;”分隔开，最后一个css声明无需使用“;”分隔开。使用“{”“}”将多个CSS声明括起来。

 1.2CSS规则集

CSS的书写规则为:标签或其他选择器{声明或声明块}；

1.3CSS的速记写法

css的速记写法是指有些属性允许在一行中写多个属性值 ，例如font，background， padding， border， margin 这些都被称为速记属性

 2CSS引入方式

接下来介绍CSS的四种引入方式：

2.1内联样式：把css代码直接写在现有的HTML标签中 ,这样的样式只对当前标签起作用，优先级较高，但是不能重复使用，会造成样式冗余，一般不推荐使用，因为这个后期的维护比较困难，但是可以在测试的时候用。

<div style="background-color: blue;">我是一个div</div>

2.2内部样式表：将样式表编写到head中的style标签中 ，这样可以使表现和结构分离，可以同时为多个元素设置样式，但是这能在当前页使用，代码复用率低

<style type="text/css">    
  p{        
    color:red;        
    background-color:yellow;    
  }
</style>

2.3外部样式表：将样式表编写到外部的CSS文件中，然后通过link标签将外部文件引入 ，这样可以可以在不同的页面中使用同一个样式表，完全将表现和结构分离，方便后期的维护，也是我们推荐使用的方式

<link rel="stylesheet" type="text/css" href="文件的路径"/> 

2.4使用@import引入CSS文件， @import引入方式会先加载html，再加载css；当网络环境较差时，会出导致页面效果较差的现象 ，且@import要放在style的第一行才会生效

<style>
  @import url('./style.css');
</style>

CSS引入方式的优先级是：行内样式>内部样式/外部引入；遵循就近原则：哪一种设置方式距离元素最近，谁的优先级更高；

 3CSS选择器

3.1标签选择器

标签选择器：根据指定的标签名称, 在当前界面中找到所有该名称的标签, 然后设置属性 ​

格式: ​ 标签名称{ ​ 属性:值; ​ } ​

*注意点: ​ 1.标签选择器选中的是当前界面中所有的标签, 而不能单独选中某一个标签 ​

2.标签选择器无论标签藏得多深都能选中

​ 3.只要是HTML中的标签就可以作为标签选择器(h/a/img/ul/ol/dl/input....)

3.2id选择器&类选择器

id选择器: 根据指定的id名称找到对应的标签, 然后设置属性 ​；

格式: ​ #id名称{ ​ 属性:值; ​ } ​

**注意点: ​ 1.每个HTML标签都有一个属性叫做id, 也就是说每个标签都可以设置id ​

2.在同一个界面中id的名称是不可以重复的 ​

3.在编写id选择器时一定要在id名称前面加上# ​

类选择器：根据指定的类名称找到对应的标签, 然后设置属性 ​；

格式: ​ .类名{ ​ 属性:值; ​ }

**注意点: ​ 1.每个HTML标签都有一个属性叫做class, 也就是说每个标签都可以设置类名

2.在同一个界面中class的名称是可以重复的 ​

3.在编写class选择器时一定要在class名称前面加上.

3.3后代选择器&子元素选择器

后代选择器：找到指定标签的所有特定的后代标签, 设置属性 ​；

格式: ​ 标签名称1 标签名称2{ ​ 属性:值; ​ }

*注意点：1.后代选择器必须用空格隔开 ​

2.后代不仅仅是儿子, 也包括孙子/重孙子, 只要最终是放到指定标签中的都是后代

​ 3.后代选择器不仅仅可以使用标签名称, 还可以使用其它选择器

​ 4.后代选择器可以通过空格一直延续下去

子元素选择器：找到指定标签中所有特定的直接子元素, 然后设置属性；

​ 格式: ​ 标签名称1>标签名称2{ ​ 属性:值; ​ }

注意点: ​ 1.子元素选择器只会查找儿子, 不会查找其他被嵌套的标签 ​

2.子元素选择器之间需要用>符号连接, 并且不能有空格

​ 3.子元素选择器不仅仅可以使用标签名称, 还可以使用其它选择器 ​

4.子元素选择器可以通过>符号一直延续下去

3.3交集并集选择器

交集选择器: 给所有选择器选中的标签中, 相交的那部分标签设置属性；

​ 格式: ​ 选择器1选择器2{ ​ 属性: 值; ​ } ​

**注意点: ​ 1.选择器和选择器之间没有任何的连接符号 ​

2.选择器可以使用标签名称/id名称/class名称

​ 3.交集选择器仅仅作为了解, 企业开发中用的并不多

-并集选择器：给所有选择器选中的标签设置属性；

​ 格式: ​ 选择器1,选择器2{ ​ 属性:值; ​ }

​ 注意点: ​ 1.并集选择器必须使用,来连接 ​

2.选择器可以使用标签名称/id名称/class名称

 

3.4兄弟选择器

相邻兄弟选择器 CSS2 ​ ：给指定选择器后面紧跟的那个选择器选中的标签设置属性；

​ 格式: ​ 选择器1+选择器2{ ​ 属性:值; ​ }

*​ 注意点: ​ 1.相邻兄弟选择器必须通过+连接

​ 2.相邻兄弟选择器只能选中紧跟其后的那个标签, 不能选中被隔开的标签

通用兄弟选择器 CSS3 ​: 给指定选择器后面的所有选择器选中的所有标签设置属性 ；

​ 格式: ​ 选择器1~选择器2{ ​ 属性:值; ​ }

注意点: ​ 1.通用兄弟选择器必须用~连接 ​ 2.通用兄弟选择器选中的是指定选择器后面某个选择器选中的所有标签, 无论有没有被隔开都可以选中

3.5伪类选择器

伪类以":"开头，用在选择器后，用于指明元素在某种特殊的状态下才能被选中 ；伪类选择器最具代表性的序选择器要在同济中使用，有如下属性：

 

3.6动态选择器

这里讲述a标签的伪类选择器，通过观察发现a标签存在一定的有顺序性的状态，我们要按照严格的顺序编写，不然效果出不来 ；默认状态:link->被访问状态:visited->鼠标悬停状态:hover->鼠标长按状态:active ，如图所示：

以上就是对CSS的一些总结，今天的分享就到这里了~