css笔记

html基础和head标签

html基础

注释：便于开发人员对开发项目解释和说明性的文字
快捷键是 ctr+/
注释不会被应用程序解析

html是超文本标记语言，严格意义上来说，不是一个开发语言
html5是html的第五个版本，添加了一些新标签和api，使用h5必须在页面的开头添加以下代码

他的含义是 声明当前文档类型是html5标准的文档，这样浏览器在解析渲染的时候会按照h5的标准解析

hyml文档是由标签组成的

标签分为单标签和双标签，他们的闭合方式不同：
单标签：
双标签：
内容

head标签

head标签中的内容不会渲染在页面中
主要是源信息标签
作用是设置网站的源信息
charset属性：用来定义文本的编码格式
UTF-8:万国码，目前开发中最常用
gb2312:中文码

通常都把charset的值设置成UTF-8,如果不设置charset属性，可能会导致页面乱码，解决方案是设置成UTF-8即可

author属性：用来定义网站的作者，一般是公司的名字
keywords属性：用来定义网站的关键字，如果有多个关键字，用英文逗号隔开，关键字最好不要超过10个。精准的keywords 值，更加有利于seo（搜索引擎优化）
description属性：用来简单的描述网站的内容，不要超过100字，有利于seo（搜索引擎优化）

meta的另一种写法

title 标签，他是一个双标签，他的seo权重很大，因此需要谨慎书写里面的内容

body 标签里面的内容，会渲染在页面的可视区域

基础标签

标签分为块属性标签和行属性标签

块标签

1.div标签
  没有任何意义的标签，通常用来进行页面布局

2.h系列标签h1-h6 标题标签
 在一个页面当中，h1最多只能出现一次，h2最多出现20次，h3-h6次数不限
   h1的用法：
    1.logo处
    2.资讯详情页的大标题
 由于h1的权限较大，只能出现在以上两个地方

3.p标签，段落标签，它里面一般包含一段文字

4.无序列表
     ul>li
     可以设置它的 list-style-type 属性
     square：实心方块
     circle：空心圆
     dotted：实心圆
     none  ：取消列表样式
     disc  ：高版本系统下的默认样式

5.有序列表
     ol>li
     可以设置它的 list-style-type 属性
     lower-alpha :小写字母
     upper-alpha : 大写字母
     lower-roman : 小写罗马文
     upper-roman : 大写罗马文
     ol,ul,li 都是块属性标签
     li 是列表项，并且 ol,ul的子元素，必须是li标签

6.定义列表
     dl>dt
     dl>dd
     dl : 块标签  定义列表的 父元素
     dt ：块标签，定义列表的 标题项
     dd ：块标签，定义列表的 列表项

7.address 地址标签，一般的，他的内容是一个地址

8.blockquote 引用标签，一般引用的是一段文字，他的cite属性表示该文字引用的文献名目

不要使用html 官方没有的标签，虽然也会被浏览器渲染，但是不符合w3c 规范

分割线 

换行符 

行标签

span 标记标签，没有实际意义，通常用来渲染文字

iframe框架
src="需要显示的页面地址"
height="设置高度"
width="设置宽度"

a标签

  href属性：用来设置超链接的地址
  target属性：设置标签页的打开方式
    _blank:在新标签页打开
    _self :默认值，在当前页打开

  作用：
   1.设置一个超链接
   2.设置锚点
     最常用的效果是回到顶部,即   href="#"
     如果在开发中需要设置a标签点击没有效果，则可以设置href属性为##，即  href="##"
不要设置href为空，这样会导致页面刷新
   3.下载文件
     a.如果设置的下载文件是音频，视频，图片，文档等，都需要经过压缩之后，再在href上设置文件的路径
     b.如果是文本类型的文件，可以直接把文件路径设置在href属性上，直接由浏览器打开

 例：
 黄色块
 绿色块
 回到顶部
 点不动
 下载文本
 下载文件

 strong 强调标签
 em     强调并且斜体
 b      文本加粗（不常用，h5中即将废弃）
 i      文本斜体
 var    文本斜体（不常用，h5中即将废弃）

 q标签   引用标签，他引用的内容都比较简短
 pre标签  格式化输出
 code 标签,  一般是嵌套代码使用
     <   在html中渲染为<
     >   在html中渲染为>
       在html中渲染为 空格

图片

img 标签, 是一个单标签
src 属性: 用来设置图片资源路径

文件资源路径 分为三种
   a.网络路径
   图片的网络地址
   b.绝对路径
   从服务器根目录开始直到找到需要的文件整个路径，一般不使用
   c.相对路径
   相当于当前文件所在的资源路径
   ./ 代表的是当前目录
   ../代表的是上一级目录
   （../../代表上上一级目录）
   相对路径在开发中最常用

alt属性：用来解释图片的内容
作用：
1.当图片没有被加载出来的时候，会显示alt的内容
2.通过alt属性，告诉浏览器当前图片的内容
width/height：设置图片的宽和高，在实际的开发中一般只设置单个的宽或者高，另一侧根据比例大小显示

行标签和块标签总结

1.块属性标签
 a.独自占据一行空间,支持宽和高的设置,设置完宽和高以后,仍然独占一行
 b.支持上下 padding 和 上下 margin

2.行属性标签
a.不会独自占据一行空间,从左至右横向排列
b.无法设置宽和高,他的宽和高由内容撑开
c.不支持上下 padding 和 上下 margin

emmet语法

E代表标签名 
E*n        创建n个标签名
E{内容}*n  创建n个内容为'...'的E标签
E{内容$}*n 创建n个内容为'...'+序号的E标签（$表示序号，从1开始）

>表示的是下一个层级的元素（子元素）
E>a  在E标签中添加子元素 a标签
+表示同级
E+P  同时创建兄弟元素E和P
^表示上一级
E >P^div 创建 div标签和 E标签同级，也就是创建P标签的上一级
使用[]设置属性

标签嵌套规则

1.块标签可以作为一个布局标签，嵌套所有的标签
2.行标签不能嵌套块标签

以下标签不能相互嵌套
1.p标签，h1-h6都不能相互嵌套，并且他们也不能嵌套块标签
2.a标签不能相互嵌套

css样式表

设置类名
.类名{
样式内容
}
text-align属性：文本排布，一般放在块标签上，用来控制块标签中 行标签和文本的对齐方式
值：

   left:   左对齐（默认）
   center：居中对齐
   right： 右对齐

css 层叠式样式表 他是用来给html结构添加样式的

css的引入方式：

1.行间引入
在标签上，设置style属性，在style中设置样式
2.内部样式表
在head中设置 style 标签，在标签中设置样式
3.外部样式表
开发中最常用

link和@import 引入css的区别:
1.@import是 css2.1之后才推出的，因此可能存在兼容问题，link不存在兼容问题
2.link不仅可以引入css，也可以引入其他类型的文件，功能更加强大
推荐使用 link

@import url(‘./css/goods.css’);

css文本操作

border属性：
 border-width 设置border的 宽度
 border-color 设置border的 颜色
 border-style 设置border的 样式

他们三个也可以合写：
border：width style color;

可以给单独某一个边设置border

 border-top    设置上边
 border-left   设置左边
 border-bottom 设置下边
 border-right  设置右边

常用的border-style 值，

 1.solid  实线
 2.dotted 圆点虚线
 3.dashed 短线虚线
 4.none   隐藏border
 5.double 双实线
 6.3d边框：
  groove 3d凹槽
  ridge  3d凸槽
  inset  内嵌
  outset 外嵌

color 属性，设置文本颜色
值

1.英文单词
2.16进制 0-f ，# 后面跟六位表示颜色的数字，前两位表示红色，中间两位表示绿色，后面两位表示蓝色  #aabbcc 如果两两相等，则可以简写为 #abc
3.rgb(),rgba() 设置颜色，括号当中设置对应的数字，0-255，0表示黑色，255表示白色
  rgb(255,0,0) 红色
rgba中的a表示透明度，取值范围是0-1，0表示完全透明，1表示完全不透明

text-decoration 文本修饰
值：

1.underline    下划线
2.overline     上划线
3.line-through 中划线（删除线）
4.none         去掉线（没有文本修饰线）

text-transfrom 文本转化

1.lowercase  全部小写
2.uppercase 全部大写
3.capitalize 单词首字母大写

line-height 行高
对于单行文本，line-height 设的高度如果和标签高度相同，则可以做 垂直居中效果
如果是多行文本，可以理解为行间距

direction 设置文字方向

 ltr   默认，从左向右
 rtl   从右向左

text-indent 首行缩进
他的值是具体的数值

word-spacing:30px;  
设置两个单词之间的距离
letter-spacing:5px;
设置两个字符之间的距离

overflow属性

处理子级内容超出当前容器的部分，主要是对父级元素添加该属性
值：

  hidden     超出部分隐藏
  scroll     滚动查看超出部分
  auto       自动渲染超出的部分
  overflow-x 控制x轴方向的超出部分
  overflow-y 控制y轴方向的超出部分

white-space属性：设置文本格式

 nowrap  强制不换行
 normal  强制换行

text-overflow：对超出的文本内容剪裁

 ellipsis  超出的内容变为省略号
 clip      直接裁掉超出的文本内容

单行文本超出添加省略号

  overflow：hidden；
  white-space:nowrap;
  text-overflow:ellipsis;

字体设置

font-style：设置字体的样式
值:

  italic 设置字体为斜体
  normal 设置字体正常

font-weight：设置字体是否加粗
值：

  normal 默认
  bold   加粗
  bolder 相对bold加粗
它的值也可以是具体的整百数字，范围是 100-900
  400-> normal
  700-> bold
  900-> bolder

font-size：设置所修饰的字体的大小
1.目前浏览器默认字体大小是 16px
pc端浏览器的最小字体大小可以设置为 12px

font-family 设置文字的字体
可以同时设置多个字体，形如：

  font-family：'a','b','c'...;

含义是 在客户端的设备上匹配 a字体，如果没有a字体，则继续匹配 b字体，依次进行匹配，直到匹配成功即可显示匹配到的字体

通用字体

1.serif 有衬线(类似锐化)
2.sans-serif 无衬线

font 也是一个 复合型 css 属性
可以直接按照下面的顺序书写
font：style weight size family;

注意，style 和 weight 不是必须写入的内容，如果简写至少必须要有 font-size 和 font-family 
 font:size family;

背景

background 设置标签元素的背景

background-color： 设置背景色
它的值可以是

1.英文单词
2.16进制表示颜色
3.rgb（）表示颜色

background-image： 设置背景图片
background-image： url（背景图地址）

background-repeat：背景图的平铺方式
值：

 repeat     默认， x轴y轴都平铺
 repeat-x： 沿x轴平铺
 repeat-y:  沿y轴平铺

background-position： 设置背景图定位

background-position：x轴方向的值  y轴方向的值；

值可以是：

 1.具体的数值
 2.方位名词组合
   left top right bottom center

background-attachment；设置背景图固定定位
值：
scroll 默认值，背景图片跟着页面一起滚动
fixed 根据浏览器可视区域，固定在具体的位置，它的定位参考点是 浏览器可视区域

background是一个复合型属性，可以写在一起，它的顺序是

background：color image repeat positio attachment 

可以单独写

 background：color；
 background：image；

display属性

display属性：可以用来控制标签元素的显示属性
值:

 block  把元素转化为块属性标签
 inline 把元素转化为行属性标签
 none；  隐藏标签元素

设置内联块元素（行内块元素）

display：display：inline-block；

它的本质是对内显示块标签属性，对外显示行标签属性

两个内联块元素之间的缝隙的处理方式

原因：两个内联块元素之间键入了回车，回车也是一个字符，它的大小跟父标签的font-size有关
解决办法：

1.去掉回车键
2.设置他们父元素的大小为0
（注意：字体大小是可以传递到子元素上的）

css选择器

基础选择器

1.通配选择器
*表示通配符，它可以匹配任何标签

*{
 css内容
}

2.标签名选择器
给所有标签名为E的元素设置css样式

E {
 css内容
}

3.类名选择器
使用时需要在标签上绑定 class=“类名”,如果有多个类名，使用空格隔开，类名最好不要超过5个

.类名{
 css内容
}

4.id选择器
在一个页面中，id是唯一的，只能绑定在一个标签上，也就是一个页面中没有同名的id

#id名{
  css内容
}

5.群组选择器

.wp,#abc,diiv{
  css内容
}

层次选择器

1.后代选择器
通过E选择器设置E标签中的M选择器的css内容,M可以是E的子级，也可以是E的后代中的某一个选择器

E M{
  css内容
}

2.父子选择器
通过E选择器找到E选择器的子级M选择器，设置css内容

E>M{
  css内容
}

3.兄弟选择器
通过E选择器找到该元素之后的所有选择器名为M的兄弟元素，并设置css样式

E>M{
  css内容
}

4.相邻兄弟选择器
通过E选择器找到该元素之后第一个兄弟元素M，并且对M设置
css样式

E+M{
  css内容
}

伪类选择器

a的伪类
伪类是系统创建好的内部的类，用来对标签的某一个时机设置样式

link:初始时候的状态
visited：点击之后的状态
hover：鼠标悬浮时候的状态
active：鼠标按下不松手时候的状态

顺序是l -> v -> h -> a (先爱后恨)

ie8以后，任何标签都可以添加：hover 伪类
可以根据hover触发元素本身，以及通过元素能找到的元素的变化

选择器优先级

什么时候考虑选择器优先级：
不同的选择器，同时作用于同一个标签元素，并且他们具有相同的css属性， 对该css属性设置了不同的值

选择器优先级的强弱顺序：

1.!important                             100000
2.行间样式，在标签上添加style属性           10000
3.id选择器                                1000
4.类名选择器，伪类选择器，属性选择器         100
5.元素（标签名）选择器，伪元素 选择器        10
6.通配符选择器                             1
7.系统默认提供的css属性                     0
（假设后面的数字是权重的值，那么在比较的时候，只需要把选择器的值相加，然后比较大小既是权重的大小，如果他们的值相同，后来者居上）

盒模型

盒模型：在html中每一个标签都具有一个盒模型

盒模型组成部分：

Content（内容），padding（内边距），border（边框），margin（外边距）

Content：标签元素内容，一般自定义宽和高，或者由子元素的内容撑开宽和高
padding：设置元素内容到元素边框之间的距离
border：指的是元素的边框
margin：设置 当前元素到相邻元素之间的距离

padding内边距

padding-top：num；   设置上边距
padding-right：num； 设置右边距
padding-bottom：num；设置下边距
padding-left：num；  设置左边距

合写为：
padding：上 右 下 左；

左！=右 上=下
padding：上 右 下 左；

左=右 上！=下
padding：上 右 下；

左=右 上=下
padding：上 右；

左=右=上=下
padding：上；

margin外边距

margin-top    设置元素上边的外边距
margin-right  设置元素右边的外边距
margin-bottom 设置元素下边的外边距
margin-left   设置元素左边的外边距

合写：
margin：上 右 下 左；

左！=右 上=下
margin：上 右 下 左；

左=右 上！=下
margin：上 右 下；

左=右 上=下
margin：上 右；

左=右=上=下
margin：上；

margin的经典bug

1.上下两个兄弟元素的margin重叠问题
上下两个兄弟标签，设置margin的时候，他们之间的距离不是相加，而是谁的margin值大就显示谁的距离，即为值大的覆盖小的
可以理解为，上面元素的margin-bottom和下面的margin-top，他们的值取最大的一个

解决方法：给下面的元素添加 display：inline-block；

2.父子级子元素的margin-top传递问题
在子元素中设置margin-top，表现的结果是该margin-top传递到了父级元素上，使得父元素距离他上面的元素为该margin-top值
解决方法
a.给父元素添加 overflow：hidden；
b.给父元素添加 border；