CSS

 

一：css主要由两个部分组成：选择器和一条或多条声明。

选择器是用于指定css样式的HTML标签，花括号内是对该对象设置的具体样式。

属性和属性值以“键值对”的形式出现。

属性是对指定的对象设置的样式属性，如：字体大小、颜色等。

属性和属性值用英文  :  分割。

 

二：css代码书写风格

在冒号后面与属性值中用空格分开。

前面要用空格分开。

在选择器与大括号中间用空格分开。

 

三：选择器：

选择器：根据不同需求把不同的标签选出来，简单来说就是选择标签用的。

选择器分为基础和复合选择器。

基础选择器分为：标签、类、id、通配符选择器。

 

1  标签选择器（元素选择器）： 是指用HTML作为名称分类，按标签名称分类，为页面中某一类标签指定统一的css样式。

优点：可以把某一类标签全部选择出来，能快速为页面中同一类型统一设置样式。

缺点：不能设置差异化样式。

语法：

标签名 {

　　属性1 : 属性值1;

　　属性2 : 属性值2;

　　属性3 : 属性值3;

　　......

}

 

2  类选择器 ： 可以差异化选择不同的标签，可以单独选一个或几个标签。

  .类名 {

　　属性1:属性值1;

       属性2:属性值2;

}

<标签 class = "类名">     </标签>

 

3 类选择器——多类名：

<标签 class = "类名 类名......">     </标签>

特点：

标签有多个名字。

各个类中间用空格隔开。

多类名选择器在后面布局比较复杂的情况下，比较多使用。

节省css代码，统一修改非常方便。

 

4 id选择器：

id选择器可以为标有特定id的HTML元素指定特定的样式。

HTML元素以id属性来设置id选择器，css中id选择器以“ # ”来定义。

语法：

#id名 {

　　属性1：属性值1：

       ......

}

<标签 id = "id值......">     </标签>

注意：id属性只能在每个HTML文档中出现一次，口诀：样式#定义，结构id调用，只能调用一次，别人切勿使用。

 

5 通配符选择器：

通配符选择器用“  *  ”号定义，表示选取页面中所有元素（标签）。

语法：

  * {

　　属性1：属性值1;

　　......

}

通配符选择器不需要调用，自动给所有元素使用样式。

特殊情况才使用。

优先级：  id > 类选择器 > 标签 > 通配符选择器

 

四  css字体属性：

1：font-family

用于定义文本的字体系列。

各种字体之间必须使用英文状态下的逗号隔开。

如果有空格隔开的多个单词组成的字体要加引号。

最常见的字体：“ Microsoft YaHei ” , tahoma, arial, " Hiragino Sans GB "

 

2 字体大小：

font-size。

谷歌默认字体大小为16px

不同浏览器可能显示字体的默认大小不一致，要给一个明确值大小，不要用默认大小。

 

3 字体粗细：
使用font-weight属性来设置文本字体的粗细。

属性值：normal  （等于700）加粗字体   bold （等于400）：正常字体   lighter：变细 在实际开发中我们更喜欢用数字来表示粗细。

 

4 文字样式：

使用font-style来设置文本的风格。 

属性值：normal（默认值）  italic（倾斜）

1 字体复合属性：

body {

　　font：font - style      font - weight       font-size / line - height      font - family;

}

使用font属性时，必须按上面语法中的顺序书写，各个属性间以空格隔开

不需要设置的属性可以省略（取默认值），但必须保留font-size 和 font-family属性，缺一不可，否则font属性将不起作用。

}

 

五 css文本属性：

1 文本颜色：

color属性用于定义文本的颜色。

其属性值表示方式有：

预定义的颜色值：red。

十六进制：#FF0000       开发中最常用的时十六进制。

RGB代码：rgb（255，0，0）或rgb（100%,0%,0%） 

 

2 文本对齐：

text-align属性用于设置文本内容的水平对齐方式。

属性值：center（居中）  left（左对齐）（默认值）  right（右对齐）

 

3  装饰文本：

text-decoretion属性规定添加文本的修饰。可以给文本添加上划线，下划线，删除线。

属性值：

none：默认，没有装饰线。（最常用）

underline：下划线，链接a自带下划线。（常用）

overline：上划线，（几乎不用）

line-through：删除线。（不常用）

 

4 文本缩进：

text-indent属性用来指定文本的第一行的缩进，通常是将段落的首行缩进。

em是一个相对单位，就是当前元素（font-size）1个文字的大小，如果当前元素没有设置大小，则会按照父元素的一个文字大小。

 

5 行间距：

line-height 属性用于设置行间的距离，可以控制文字于行之间的距离。

行间距包含文字高度、上间距和下间距。

 

六

1 内部样式表：

内部样式表（内嵌样式表）是写到html页面内部，是将所有的css代码抽取出来，单独放到一个< style/ > 标签中。

style标签理论上可以放在HTML文档的任何地方，但一般放在文档的< head >标签中。

通过此种方式，可以方便控制当前整个页面中的元素样式设置。

 

2 行内样式表：

<h2 style = "font-size:16px; color:red;">   文字内容  <h2/>

行内样式表（内联样式表）实在元素标签内部的style属性中设定css样式。适合修改简单的样式。

代码非常清晰，但没有实现结构于样式完全分离。

style就是标签的属性。

由于书写繁琐，并且没有体现出结构与样式相分离的思想，所以不推荐大量使用，只有对当前元素添加简单样式的时候，可以考虑使用。

可以控制当前的标签设置样式。

 

3 外部样式表：

实际开发都是外部样式表，适合于外部样式比较多的情况，其核心是把样式单独写到css文件中，之后把css文件引入html页面中使用。

引入外部样式表分为两部：

1 新建一个后缀为.css的样式文件，把css代码都放入此文件中。

2 在html页面中，使用< link >标签引入这个文件。<link rel = "stylesheet"  href = "css文件路径">

可以实现结构与样式完全分离。

 

第二部分：

1 Emmet语法：

快速生成html标签。

 

 2 快速生成css标签：

https://www.bilibili.com/video/BV14J4114768?p=95&spm_id_from=pageDriver&vd_source=f614e5bf237c03e69974cd452a311646

95 集

 

快速格式化代码：

vscode：shift + alt + f

 

一：CSS复合选择器：

在css中复合选择器是建立在基础选择器上，对基本选择器进行组合形成的。

复合选择器可以更准确、更高效的选择目标元素（标签）

复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的。

常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等。

 

1 后代选择器（重要）

后代选择器又称为包含选择器，可以选择父元素里面的子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。

元素1   元素2  {后代元素}。

ul  li  { 样式声明 }   选择ul里面所有的li标签元素。

元素1 和 元素2 中间用空格隔开。

元素1是父级 。 元素2是子级，最终选择的是元素2。

元素2不仅可以是儿子 ，也可以是孙子，只要是元素1的后代。 

元素1 和元素 2 可以是任意基础选择器。

 

2 子选择器（重要）

子元素选择器（子选择器）只能选择作为某元素的最近一级子元素。

语法：元素1 > 元素2 （样式声明）

元素1 和 元素2 中间用大于号隔开

元素1是父级，元素2是子级，最终选择的是元素2

元素2 必须是子级。

 

3 并集选择器（重要）

并集选择器可以选择多组标签，同时为他们定义相同的样式。通常用于集体声明。

并集选择器是各选择器通过英文逗号（，）连接而成，任何形式的选择器都可以作为并集选择器的一部分。

语法：

元素1，元素2{ 样式声明 }

上述语法表示选择元素1和元素2。

元素1和元素2中间用逗号隔开

逗号理解为和的意思

并集选择器通常用于集体声明。

 

4 链接伪类选择器：

a：link  选择所有未被访问的链接

a：visited  选择所有已被访问的链接

a：hover   选择鼠标指针位于其上的链接

a：avtive   选择活动链接

为了生效请按以上顺序声明。

 

二：css的元素显示模式：

 

 

 

 

 

 

 

 三：css背景：

通过css背景属性，可以给页面元素添加背景样式。

背景属性可以可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。

1 背景颜色：

background-color属性定义了元素的背景颜色。

语法：

background-color：颜色值；

2 背景图片：

background-image属性定义了元素的背景图片。

优点是便于控制位置。

语法：

background-image：none /  url( 地址 );

none 默认  

一般情况下是默认的transparent（透明色）。

3 背景平铺：

background-repeat属性可以对背景图进行平铺。

语法：

background-repeat：no-repeat   |    repeat     |    repeat-x    |    repeat-y;

no-repeat：不平铺

repeat：图像在纵向和横向上平铺（默认）

repeat-x：图像在横向上平铺

repeat-y：图像在纵向上平铺

页面元素既可以添加背景颜色，也可以添加背景图片，但背景图片会在最上面。

4 背景图片位置

background-position属性可以改变图片在背景中的位置。

语法：

background-position：x  y；

x y坐标可以使用方位名词或精确单位

参数值              说明     

length               百分数  |    由浮点数字和单位标识符组成的长度值。

positong           top |  center  |  left  |  bottom  |  right

1 如果参数是方位名词

如果指定的两个值都是方位名词，则两个值前后顺序无关，不如left  top  和  top  left 效果一样。

如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐。

2 参数是精确单位

如果参数值是精确坐标，那么第一个肯定是x坐标，第二个一定是y坐标

如果只指定一个数值，那该数值一定是x坐标，另一个默认垂直居中。

3 参数是混合单位

如果指定的两个值精确单位和方位名词混合使用，则第一个值是x坐标，第二个值是y坐标。

5 背景图像固定（背景附着）

background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。

background-attchment 后期可以制作视差滚动的效果。

语法：

backgrond-attachment：scroll | fixed

scroll  背景图像是随对象内容滚动

fixed   背景图像固定

6 背景属性复合写法：

当使用简写属性时，没有特定的书写顺序，一般习惯约定顺序为：

background：背景颜色  背景图片地址  背景平铺  背景图像滚动  背景图片位置；

7 背景色半透明：

语法：

background-rgba（0，0，0，0.3）

最后一个参数时alpha透明度，取值范围在0~1之间。

我们习惯把0.3的0省略调，写为background：rgba（0，0，0，.3）

注意：背景半透明时指背景半透明，盒子里面的内容不受影响。

css5新增属性，是IE9+版本浏览器才支持的。

但是现在实际开发，我们不太关注兼容性写法了，可以一放心使用。 

三 css的三大特性：

层叠性   继承性   优先级

1 层叠性 

相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式，层叠主要解决样式冲突的问题。

层叠性原则：

样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式。

样式不冲突，不会层叠。

2 继承性
子标签会继承父标签的某些样式，如文本颜色和字号

恰当的使用继承可以简化代码，降低css样式的复杂性。

2.1 行高的继承性：

font：15px / 1.2

行高可以跟单位，也可以不跟单位

不跟单位表示字体大小的n倍

这样写的优势在于里面的元素可以根据文字的大小自动调整行高。

3 优先级：

 

 

 

继承的权重是零，如果该元素没有被直接选中，不管父元素权限多高，子元素得到的都是零。 

权重叠加：如果是复合选择器，则会又权重叠加，需计算权重。

 

四 盒子模型

1 网页布局：

 

2 边框（border）

可以设置颜色的边框，边框由三部分组成：边框宽度（粗细） 边框样式  边框颜色

语法：

border-width    border-style    border-color

solid：实线   dashed：虚线   dotted：点线

边框的复合写法：
border：  ； 没有顺序。

边框分开写法：

border-top  border-bottom

3 表格的细线边框：

border-collapse 属性控制浏览器绘制表格边框的方式，控制相邻单元格的边框。

语法：

border-collapse：collapse；

collapse（合并）

border-collapse：collapse；表示相邻边框合并在一起。

边框会影响盒子实际大小

解决方案：

1测量盒子大小的时候，不量边框

2 如果包含了边框，则需要width/height减去边框宽度。

 

4 内边距（padding）

设置

padding-top    padding-bottom    padding-left    padding-right

 

 

 

padding也会影响盒子的实际大小。

如果盒子本身没有指定width  height属性，则不会使盒子有变化。

5 外边距：

margin-left  margin-right  margin-top  margin-bottom

margin的写法格式跟padding的是一样的

 

 

 

 

 

 

 

 

 

 

 

 

ul 无序列表中的小圆点可以用  list-style ：none； 属性清除

6 圆角边框：

 

 

 

 

 

 

盒子阴影：

 

 文字阴影：

 

浮动布局

 

 

 

 

 

 

 

 

 

 

 

 

float属性用于创建浮动框

 

浮动特性：

 

 

 

 

 浮动特性：

 

 

 

 

 

 

 

 

浮动布局注意点：

 

 

 

 

 

 

 

 

1

 

2

 

3

 

 

 

 

 

 4

 

 总结：

 

 书写顺序

 

 页面布局总体思路

 

 

 

 

 

定位

 

 

 

 

 

 

 

 

   

 

 

 

 

 

 

 

 元素的显示与隐藏

 

 

 

 

 

 

精灵图技术

 

 

 

 

 

 

 

 

 

 

 

鼠标：

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 css三角用法

https://www.bilibili.com/video/BV14J4114768?p=271&vd_source=f614e5bf237c03e69974cd452a311646

HEML5新特性：

 

 

 

 

 

 兼容性

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

伪类选择器：