CSS

CSS(Cascading Style Sheets)层叠样式表
通过仅仅编辑一个简单的CSS文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观

• 使用CSS

  • 在HTML网页中，加入一个style标签，在这个style标签里写CSS代码
  • 直接把style里面的代码放到一个单独的文件中，通过Link标签去引入
  • 直接在HTML开始标签的style属性里面去写CSS代码

• 书写规则

  选择器{
     属性名称：属性值
     ......
  }
  

• 选择器

  1. id选择器：#name(id) 唯一的元素或者出现次数很少
  2. class选择器：.name(class) 修饰同一类具有相同样式的元素
  3. 标签选择器：标签名 选中所有同名标签
  4. 相邻选择器：选择某个元素后面相邻的元素(用+）
  5. 多元素选择器：合并各个选择器之间相同的部分，选择器用,隔开
  6. 后代选择器：选中某标签后代所有指定标签，两个选择器间用空格隔开
  7. 子元素选择器：选择子元素中符合条件的元素，两个选择器用>隔开
  8. 属性选择器：选择具有某属性的标签.标签名[属性名]
^表示以某值开头的元素，$表示以某值结束的元素.标签名[属性名^=xxx]

• 伪元素：用来添加一些选择器的特殊效果。伪元素可以创建一些文档语言无法创建的虚拟元素。比如：文档语言没有一种机制可以描述元素内容的第一个字母或第一行，但伪元素可以做到(::first-letter、::first-line)。同时，伪元素还可以创建源文档不存在的内容，比如使用 ::before 或 ::after。

  • :first-line 向文本的首行设置特殊样式
  • :first-letter 向文本的首字母设置特殊样式
  • :before 在元素的内容前面插入新内容
  • :after 在元素的内容之后插入新内容
  • :link 选择所有未访问链接
  • :visited 选择所有访问过的链接
  • :active 选择正在活动的链接
  • :hover 把鼠标放在链接上的状态
  • :focus 选择元素输入后具有焦点(如给input设置点击出现红色背景)

• 伪类：用来添加一些选择器的特殊效果。伪类存在的意义是为了通过选择器，格式化DOM树以外的信息以及不能被常规CSS选择器获取到的信息。
  通过上面的概念我们知道了伪类的功能有两种：

  1. 格式化DOM树以外的信息。比如： <a> 标签的:link、:visited 等。这些信息不存在于DOM树中。
  2. 不能被常规CSS选择器获取到的信息。比如：要获取第一个子元素，我们无法用常规的CSS选择器获取，但可以通过 :first-child 来获取到。
  • :checked 选择所有选中的表单元素
  • :disabled 选择所有禁用的表单元素
  • :empty 选择所有没有子元素的P元素
  • :enabled 选择所有启用的表单元素
  • :invalid 选择所有无效的元素
  • :valid 选择所有有效值的属性

• overflow 控制内容溢出元素框时在对应的元素区间内添加滚动条

  • visible 内容会被修剪，会呈现在元素框之外
  • hidden 内容会被修剪，并且其余内容是不可见的
  • scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容
  • auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容
  • inherit 规定应该从父元素继承overflow的值

• margin 外边距

  • margin有默认值
  • 如果设置了上下两个盒子的margin，距离以大的为准
  • 盒子居中：margin:auto
  • myibn简写：
    一个参数：上下左右
    两个参数：上下+左右
    三个参数：上+左右+下
    四个参数：上+右+下+左

• padding 会扩大盒子的大小，所以padding增加多少相应盒子的高度就要减少多少

• display 可以表示块级元素和行级元素

• 设置最小宽度：如果缩放到最小宽度，会出现滚动条，大于最小宽度会撑满整个窗口

• ul进行CSS设置时每个li长度为最长的长度，如果没有内容，则默认为1个的大小

• 清除浮动一般形式：

  .clearfix{ *zoom:1;}
  .clearfix:after{ content:".";display:block;height:0;visibility:hidden;clear:both;}
  

  其中的visibility:hidden和display:none有区别：任然占据空间只是看不到
  整段代码相当于在浮动元素后面跟了个宽高为0的空div，然后设定它clear:both来达到清除浮动的效果

• 常见元素：

  • inline：a,span,br,i,em,strong,label,q,var,cite,code

  • inline-block：img,input

  • block：p,div,p,h1…h6,ol,ul,dl,table,address,blockquote,form

• cursor:pointer 移动鼠标上去变成手的状态

• letter-spacing 字间距

• line-height 行间距