前端基础—CSS

CSS

CSS基础语法

CSS样式

• 格式：
  选择器 {属性1 ： 值1；属性2：值2}
• 单位：
  px -> 像素（pixel）、% -> 百分比
• 基本样式：
  width：宽、height：高、background-color：背景色
• 注释：
  /* CSS注释的内容 */

内联样式与内部样式

• 内联（行内、行间）样式
  在html标签上添加style属性来实现的
• 内部样式
  在< style >标签内添加的样式
  注：内部样式的优点，可以复用代码

外部样式

• 引入一个单独的CSS文件，name.css
  通过link标签引入外部资源，rel属性指定资源跟页面的关系，href属性资源的地址

• < link >标签
  rel
  href
  @import不建议使用

CSS中的颜色表示法

单词表示法

red、blue、green、yellow

十六进制表示法

rgb三原色表示法：rgb(255,255,255)

取值范围 0 ~255

背景样式

• background-color ：背景颜色
• background-image ：背景图片
  url(背景地址）
  默认：会水平垂直都铺满背景图
• background-repeat ：背景图片的平铺方式
  repeat -x x轴平铺
  repeat -y y轴平铺
  repeat(x,y都进行平铺，默认值)
  no - repeat 都不平铺
• background-position ：背景图片的位置
  x y :number(px、%) | 单词
  x : left 、center、right
  y ：top、center、bottom
• background-attachment ：背景图随滚动条的移动方式
  scroll ：默认值（背景位置是按照当前元素偏移的）
  fixed （背景位置是按照浏览器进行偏移的）

边框样式

• border-style ：边框的样式
  solid：实线
  dashed:虚线
  dotted:点线
• border-width ：边框的大小
• border-color ：边框的颜色

• 边框也可以针对某一边进行单独设置 ：border - left - style 中间是方向 left、right、top、bottom

family字体

• font-family ：字体类型
  英文字体：Arial ,‘Times New Roman’
  中文字体：微软雅黑，宋体
• font -size ：字体大小
  默认大小：16px

段落样式

• text-decoration：文本修饰
  下划线：underline
  删除线：line-through
  上划线：overline
  不添加任何修饰：none
  注：添加多个文本修饰，之间用空格连接
• text-transform：文本大小写（只针对于英文段落）
  小写：lowercase
  大写：uppercase
  只针对首字母大写：capitalize
• text-indent：文本缩进
  首行缩进
  em单位：相对单位，1em永远和字体的大小相同
• text-align：文本对齐方式
  对齐方式：left、right、center、justify（两端点对齐）
• line-height：定义行高
  行高：上边距+文字大小+下边距，其中上边距和下边距等价
  默认行高：不是固定值。根据当前字体的大小不断地变化
  取值：
  number + px
  scale（比例值，跟文字大小成比例）
• letter-spacing：字之间的间距
  word-spacing：词之间的间距（适用于英文）
• 英文和数字自动折行：
  word-break：break-all;（非常强烈的折行）
  word-wrap：break-word;（不是那么强烈的折行，会产生一些空白区域）

复合样式

• 复合的写法：通过空格的方式实现的。复合写法有的是不需要关心顺序，例如background、border。有的是需要关心顺序，例如font
  1、background：red url() repeat 0 0；
  2、border：1px red solid；
  3、font：
• 注：最少要有两个值 size family且都是放在最后。font的复合样式不包括color
  正确举例：
  weight style size family
  style weight size family
  weight style size/line-height family
  注意：如果混合去写的话，那么先写复合样式，再写单一样式。

CSS选择器

ID选择器

• 写法：
  css：#elem{}
  html：id=“elem”
• 注意点：
  ID是唯一值，在一个页面中只能出现一次。
  命名的规范：由字母、下划线、中划线、数字组成（第一个不能是数字）
  驼峰写法：searchButton(小驼峰) SearchButton（大驼峰）
  中划线写法：search-small-button
  下划线写法：search_small_button

CLASS选择器

• 写法
  css：elem{}
  html：class=“elem”
• 注意点：
  class选择器是可以复用的
  可以添加多个class样式，中间用空格隔开。例如class = sty1 sty2 sty3…
  多个样式时，优先级由css决定，不是由顺序决定
  标签+类的写法。例如p.sty1

标签选择器(TAG)

• 写法：
  css：div{}
  html：< div >< /div >
• 使用场景：
  去掉某些标签的默认样式时
  复杂的选择器中，如层次选择器

群组选择器

• 写法：
  css：div, p, span{}
• 作用：
  通过逗号的方式，给多个不同的选择器添加统一的css样式，来达到代码的复用

通配选择器

• 写法：
  css：*{}
• 注意：尽量避免使用通配选择器，因为会给所有的标签添加样式，慎用。
• 使用场景：去掉所有标签的默认样式时

层次选择器

• 后代：M N { }
• 父子：M > N { }
• 兄弟： M ~ N { } 当前M下面的所有兄弟N标签
• 相邻：M + N { } 当前M下面相邻地N标签

属性选择器

伪类选择器

CSS伪类用于向某些元素添加特殊的效果。一般用于初始样式添加不上的时候，用伪类来添加

• 写法：
  M：伪类{ }
• 分类：
  :link 访问前M的样式
  :visited 访问后M的样式
  :hover 鼠标移入时M的样式
  :active 鼠标按下时M的样式
• 注意：
  link 、visited只能添加给a标签，hover、active可以添加给所有标签
  如果4个伪类都生效，一定要注意顺序：L V H A
  一般的网站不会对a链接做4个操作，只会设置a{ }和a:hover{ }
• :after、:before 通过伪类的方式给元素添加一个文本内容
  :checked、:disable、:focus 都是针对表单元素的

结构伪类选择器

• nth-of-type(）nth-child（）
  角标是从1开始的，1表示第一项,2表示第二项|n值表示从e到无穷大
  first-of-type
  last-of-type
  only-of-type

CSS样式继承

文字相关的样式可以被继承
布局相关的样式不能被继承（默认是不能继承的，但是可以设置继承属性inherit值)

CSS优先级

相同样式优先级

当设置相同样式时，后面的优先级较高，但不建议出现重复设置样式的情况

内部样式与外部样式

内部样式（在< style>标签内添加的样式）与外部样式（通过link标签引入的样式）优先级相同，如果设置了相同样式，那么后写入的引入方式优先级高

单一样式优先级

行内样式 > id选择器 > 类选择器> 标签 > 通配符 >*> 继承

!important

提升样式优先级，非规范方式，不建议使用。另外，!important也不能提升继承的优先级

标签+类 >单类

<style>
	div.box{color:blue;}  /*标签+类优先级高于单类，div中的文字会显示为蓝色*/
	.box{color:red;}
</style>

群组优先级

群组选择器与单一选择器的优先级相同,靠后写的优先级高

层次优先级

• 权重比较
  ul li .box p input{} 1 +1 +10 +1 +1
  .hello span #elem{} 10+1 +100
• 约分比较
  ul li .box p input{0} li p input{}
  .hello span #elem{} #elem{}

CSS盒子模型

content-box

• 组成：content （物品）-> padding （填充物）-> border（包装盒） -> margin（盒子与盒子之间的间距）
• content ：内容区域 width和height组成的
• padding ：内边距（内填充）
  只写一个值：30px(上下左右)
  写两个值：30px 40px（上下、左右）
  写三个值（不建议）
  写四个值：30px 40px 50px 60px(上，右，下，左)
  单一样式只能写一个值：
  padding-left
  padding-right
  padding-top
  padding-bottom
• margin：外边距（外填充）
  margin-left
  margin-right
  margin-top
  margin-bottom

• 注 ：
  1.背景颜色会填充到margin以内的区域（不包括margin区域）
  2.文字会在content区域
  3.padding不能出现负值，margin是可以出现负值

box-sizing

(盒尺寸，可以改变盒子模型的展示形态)

box-sizing属性允许您以特定的方式定义匹配某个区域的特定元素。取值为content-box(默认值) |border-box
width、height ->content(content-box)
width、height ->content padding border(box-sizing)

• 使用场景：
  1.不用再去计算一些值
  2.解决一些百分比的问题

margin叠加

（出现在上下margin同时存在的时候，会取上下中值较大的作为叠加的值）

margin传递

（出现在嵌套的结构中，只是针对margin-top的问题）

• 扩展：
  1.margin左右适应是可以的，但上下自适应是不行的
  2.width、height不设置的时候，对盒子模型的影响

标签分类

按类型

• block：div、p、ul、li等都属于块
  特性：
  1.独占一行
  2.支持CSS所有样式
  3.不设置宽时，宽会和父元素的宽相同
  4.所占区域是一个矩形
• inline：span、a、em、strong、img等都属于内联
  特性：

1. 挨在一起（和其他元素在一行上）
   2.有些样式不支持，例如：width、height、margin、padding
   3.不写宽时，宽度由内容决定
   4. 所占区域不一定是矩形
   5.内联标签之间会有空隙，是由写代码时换行产生的，但一般不需要解决这个空隙

• inline-blockinput、select等都属于内联块
  特性：
  1.支持width、height
  2.所占区域是一个矩形
  3.挨在一起（和其他元素在一行上）
  4.标签之间会有空隙，是由写代码时换行产生的

按内容分类

• Flow：流内容
• Metadata：元数据
• Sectioning：分区
• Heading：标题
• Phrasing：措辞
• Embedded：嵌入的
• Interactive：互动的

按显示分类

• 1）替换元素：浏览器根据元素的标签和属性，来决定元素的具体显示内容。例如img、input…
• 2）非替换元素：将内容直接告诉浏览器，将其显示出来。例如：div、h1、p…

显示框类型（display）

• inline：默认值，此元素会被显示为内联元素，元素前后没有换行符。
• block：此元素将显示为块级元素，此元素前后会带有换行符。
• inline-block：行内块元素
• none：此元素不会被显示

• display：none和visibility：hidden的区别
  display: none 不占空间的隐藏
  visibility: hidden 占空间的隐藏

标签嵌套规范

ul、li； dl、dt、dd； table、tr、td等
块标签可以嵌套内联标签
块标签不一定能嵌套块标签，如段落p标签内不能嵌套div标签
内联不能嵌套块（但a能嵌套div，好处在于可以给一个区域加链接）

溢出隐藏（overflow）

• visible：默认值 ，内容不会被修剪，会呈现在元素框之外
• hidden：内容会被隐藏，其余内容是不可见的
• scroll：无论是否溢出，都将会同时显示水平和垂直两个滚动条
• auto：根据是否溢出，自动显示滚动条以查看其余的内容或隐藏滚动条
• overflow还有两个姐妹属性：overflow-x、overflow-y，但很少使用

透明度与手势

透明度

opacity

属性：
0(透明，占空间) ~ 1(不透明) 0.5(半透明)
注：所有的子内容也会透明

raba

0 ~ 1（不影响其他的样式）

cursor（手势）

• default：默认，通常是一个箭头。
• pointer：手形光标。就像通常用户将光标移到超链接上时那样。
• move : 十字箭头光标。用于标示对象可被移动。
• help : 带有问号标记的箭头。用于标示有帮助信息存在。
• text : 用于标示可编辑的水平文本的光标。通常是大写字母 I 的形状。
• 自定义光标：cursor: url(路径), auto。图片类型需要是.cur或.ico格式

最大、最小宽高

最小宽高(>=)：min-width、min-height
最大宽高(<=)：max-width、max-height
%单位：换算 ->己父容器的大小进行换算的

CSS默认样式

默认样式

• 没有默认样式：div、span
• 有默认样式：body：margin（8px）
  h1：margin（上下21.440px）、font-weight（bold）
  p：margin（上下16px）
  ul：margin（上下16px）、padding（左40px）、默认点list-style（disc）
  a：text-decoratio（underline）

重置样式

• css reset:
  *{margin:e; padding:o;}
  优点:不用考虑哪些标签有默认的margin和padding
  缺点:稍微的影响性能
  body ,p,h1,ul{ margin:e; padding:o;}
  ul{ list-style : none;}
  a{ text-decoration: none; color:#999;}
  img{ dispaly: block}
• 问题的现象:图片跟容器底部有一些空隙。
  内联元素的对齐方式是按照文字基线对齐的，而不是文字底线对齐的。
  vertical-align: baseline;基线对齐方式，默认值
  img{ vertical-align:bottom;}解决方式是推荐的

float浮动

文档流（标准流）

文档流：文档中可显示对象在排列时所占用的位置

float特性

加浮动的元素，会脱离标准文档流（脱标），会沿着父容器靠左或靠右排列（不能上下），如果之前已经有浮动的元素，会挨着浮动的元素进行排列。

float取值

none（默认）：元素不浮动，并会显示在其在文本中出现的位置
left：元素向左浮动（一个向左浮动、都向左浮动、一个向左一个向右）
right：元素向右浮动

float注意点

• 只会影响后面的元素，对浮动之前的元素不造成任何影响
• 内容默认提升半层：浮动的元素有“字围”的效果，可以做一些图文混排效果
• 默认宽根据内容决定（收缩）：一个浮动的元素，如果没有设置width，那么将自动收缩为内容的宽度（这点非常像行内元素）
• 换行排列
• 主要给块元素添加，但也可以给内联元素添加

清除浮动

上下排列：clear属性，表示清除浮动
clear属性值：left、right、both

清除嵌套浮动

• 固定宽高（不推荐）
  不推荐，因为不能把高度固定死，不适合做自适应的效果。
• 父元素浮动（不推荐）
  不推荐，因为父元素浮动会影响到后面的元素
• overflow:hidden（不推荐）
  BFC规范。不推荐，如果有子元素想溢出，那么会受到影响。
• display:inline-block（不推荐）
  BFC规范。不推荐，父容器会影响到后面的元素
  *设置空标签（不推荐）
  设置空标签的样式clear;both。不推荐，会多添加一个标签，略微有些麻烦。
• after伪类（推荐）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    #box1{width:200px;  border:1px black solid;}
    #box2{width:100px; height:200px; background:greenyellow; float:left}
    .clear:after{content:''; display:block; clear:both}
  </style>
</head>
<body>
    <div id="box1" class="clear">
      <div id="box2"></div>
    </div>
    aaaa
</body>
</html>

position定位

• position特性
  css position属性用于指定一个元素在文档中的定位方式。top、right、bottom、left属性则决定了该元素的最终位置
• position取值
  static（默认）
  relative
  absolute
  fixed
  sticky

relative特性

如果没有定位偏移量，对元素本身没有任何影响
不使元素脱离文档流
不影响其他元素布局
left、top、right、bottom是相当于当前元素自身进行偏移的

absolute

使元素完全脱离文档流
使内联元素支持宽高（让内联具备块特性）
使块元素默认宽根据内容决定（让块具备内联的特性)
如果有定位祖先元素相对于定位祖先元素发生偏移，没有定位祖先元素相对于整个文档发生偏移（绝对，相对，固定）

fixed固定定位

使元素完全脱离文档流
使内联元素支持宽高（让内联具备块特性）
使块元素默认宽根据内容决定（让块具备内联的特性)
相对于整个浏览器窗口进行偏移，不受浏览器滚动条影响

sticky黏性定位

在指定的位置，进行黏性操作（top 0）

z-index定位层级

默认层级为0
嵌套时候的层级问题

CSS添加省略号

• width
  必须有一个固定的宽
• white-space ：nowrap
  不让内容折行
• overflow ：hidden
  隐藏溢出的内容
• text-overflow ：ellipsis
  添加省略号

CSS Sprite

• 特性：
  CSS雪碧也叫CSS精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去加载
• 好处：
  可以减少图片的质量，网页图片加载速度快
  减少图片的请求次数，加快网页的打开

CSS圆角

border-radius（给标签添加圆角）

拓展内容

vw、vh

根据屏幕百分比来计算显示使用的像素值，100vw表示占屏幕宽度100%，主要用于移动端开发，适配不同大小的屏幕

font-size、em

ont-size：用于定义字体单位长度的像素值
em：1em等于1个font-size的的长度
好处：统一了长度的大小，可以只改变font-size，就改变了所有的元素大小

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
  	/*每行显示五个文字*/
    #div1{font-size:16px; width:5em; height:100px; background:red; }
  </style>
</head>
<body>
    <div id="div1">这是一个块这是一个块这是一个块这是一个块这是一个块这是一个块</div>
</body>
</html>

HTML常用标签复习

link标签

作用：引用外部资源
属性：rel、href
主要功能：引入CSS、网页图标等

meta标签

功能：定义页面的文本编码类型、定义窗口大小对应的显示模式

文本类标签

< p >< /p >:表示一个段落
< i >< /i >：表示斜体文本
< span >< /span >：用于定义单独样式（使用css定义）
< strong >< /strong >：表示文本粗体

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    span{background:red;}
  </style>
</head>
<body>
    <p>这是一个段落</p>
    <i>斜体的文本</i><br>
    <strong>粗体的文本</strong><br>
    <span>这是span的内容</span>
</body>
</html>

运行结果

其余标签

video：标签定义视频，比如电影片段或其他视频流
audio：标签定义声音，比如音乐或其他音频流
canvas：用来处理图片、绘制图像等功能，是使用JavaScript操作图像的技术，HTML5中的新标签
echarts库：用来制作图表的技术。