前端CSS

css概述

●CSS是Cascading Style Sheets（级联样式表）。
● CSS是一种样式表语言，用于为HTML文档控制外观，定义布局。例如，
CSS涉及字体、颜色、边距、高度、宽度、背景图像、高级定位等方面 。
● 可将页面的内容与表现形式分离，页面内容存放在HTML文档中，而用
于定义表现形式的CSS在一个.css文件中或HTML文档的某一部分。

CSS与HTML的关系:
HTML是网页内容,CSS定义页面的样式

基本语法-行内样式表

行内样式表,又有人称内联样式、行间样式、内嵌样式。是通过标签的style属性来设置
元素的样式，其基本语法格式如下：
<标签名 style=“属性1:属性值1; 属性2:属性值2; 属性3:属性值3;”> 内容 </标签名>

基本语法-内嵌样式表

内嵌式是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义

基本语法-外部样式表

外部样式表是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通
过link标签将外部样式表文件链接到HTML文档中

选择器

常用的选择器：
标签选择器：通过标签选择器可以选择页面中的所有指定标签
语法：标签名 {}
类选择器：通过标签的class属性值选中一组标签
语法：.class属性值{}
id 选择器：通过标签的id属性值选中唯一的一个标签
语法： #id属性值 {}
选择器组合：通过选择器分组可以同时选中多个选择器对应的标签
语法：选择器1,选择器2,选择器N{}
通配选择器:可以用来选中页面中的所有的标签
语法：*{}

文本

● color：字体颜色
● font-size：字体大小
● font-family：字体
● text-align：文本对齐
● text-decoration:line-through：定义穿过文本下的一条线
● text-decoration:underline：定义文本下的一条线
● text-decoration:none：定义标准的文本
● font-style: italic;斜体文本
● font-weight:字体粗细
● line-height:设置行高
● letter-spacing可以指定字符间距
● text-indent用来设置首行缩进

背景

● background-color背景颜色
● background-image背景图片
● background-repeat背景重复
● background-size背景尺寸
● background- position 背景位置

CSS 列表

● CSS 列表属性可以放置、改变列表项标志，或者将图像作为列表项标志 。
● list-style-image 将图象设置为列表项标志。
● list-style-position 设置列表中列表项标志的位置。
● list-style-type 设置列表项标志的类型。
● list-style 简写属性。

CSS 伪类

● CSS伪类专门用来表示标签的一种的特殊的状态，当我们需要为处在这些特殊状
态的标签设置样式时，就可以使用伪类 。
● 伪类的语法：
:hover伪类表示鼠标移入的状态
:active表示的是被点击的状态
:focus向拥有键盘输入焦点的标签添加样式。

透明

● 定义透明效果的属性是 opacity。
opacity 属性设置标签的不透明级别 值为1。
规定不透明度：从 0.0 （完全透明）到 1.0（完全不透明)

块级,行级,行级块标签

● 什么是块级标签？
块级标签：无论内容多少 都会独自占据一行的。
例如

、

、

• 、
  1. 、

     ---

     等。
     ● 什么是行级标签？
     行级标签：只占自身大小的标签，不会占一行。
     例如、、、等。
     ● 什么是行级块标签？
     例如 等
     注意： 一般情况下使用块级标签包含行级标签，不使用行级标签包含块标签。
     a可以包含任何标签，除去a本身；
     p标签不可以包含任何的块标签。

Display

通过display样式可以修改标签的类型。
可选值：
block ：设置标签为块标签
inline ：设置标签为行级标签
inline-block ：设置标签为行级块标签
none ：隐藏标签（标签将在页面中完全消失）

div和span

div标签
div是块级标签，可以放置任何标签。
div没有任何附加功能，给了什么属性就能变成什么样。
div主要的作用是被用来布局网页。
span标签
span是行级标签
span 没有任何附加功能，给了什么属性就能变成什么样。
span标签被用来选中文档中的文字。

盒子 模型(box-model)

● CSS处理网页时，它认为每个标签都包含在一 个不可见的盒子里。
● 如果把所有的标签都想象成盒子，那么我们对网页的布局就相 当于是摆
放盒子。
● 我们只需要将相应的盒子摆放到网页中相应的 位置即可完成网页的布局

一个盒子我们会分成几个部分：

–内容区(content)
–内边距(padding)
–边框(border)
–外边距(margin)

浮动

所谓浮动指的是使标签脱离原来的文档流，在父标签中浮动起来。
浮动使用float属性。
可选值：
none ：不浮动
left ：向左浮动
right ：向右浮动
● 块级标签和行级标签都可以浮动，当一个行级标签浮动以后将会自动变为一 个块级标
签。当一个块级标签浮动以后，宽度会默认是内容的宽度，所以当漂浮一个块级标签
时我们 都会为其指定一个宽度。
● 当一个标签浮动以后，其下方的标签会上移。
● 浮动会使标签完全脱离文档流，也就是不再在文档中在占用位置标签浮
动以后即完全脱离文档流，这时不会再影响父标签的高度。也就是浮动
标签不会撑开父标签。

清除浮动

● clear属性可以用于清除标签周围的浮动对标签的影响,其他标签的位置不
发生变化。
可选值：
left ： 忽略左侧浮动
right ：忽略右侧浮动
both ：忽略全部浮动

相对定位(relative)

相对定位
相对定位是一个非常容易掌握的概念. 相对于它
的起点进行移动，移动后原来的位置还被占用。
可以通过position:relative; 开启相对定位，
left right top bottom四个属性来设置标签的偏移量。
相对定位的特点:
当标签的position属性设置为relative时，则开启了标签的相对定位
1.当开启了标签的相对定位以后，而不设置偏移量时，标签不会发生任何变化
2.相对定位是相对于标签在文档流中原来的位置进行定位
3.相对定位的标签不会脱离文档流

绝对定位(absolute)

绝对定位
绝对定位是不占空间的，运用了绝对定位的标签会脱离原来的文档流，浮动起来，因此视觉上会其他的标签重叠。
可以通过position: absolute; 开启绝对定位，
left right top bottom四个属性来
设置标签的偏移量

绝对定位的特点
1.开启绝对定位，会使标签脱离文档流
2.开启绝对定位以后，如果不设置偏移量，则标签的位置不会发生变化
3.绝对定位是相对于离他最近的开启了定位的祖先标签进行定位（一般情况，开启了子标签
的绝对定位都会同时开启父标签的相对定位）
如果所有的祖先标签都没有开启定位，则会相对于浏览器窗口进行定位
4.绝对定位会使标签提升一个层级
5.绝对定位会改变标签的性质，行级标签变成块标签