CSS学习

CSS
层叠样式表

1. 在html中应用
   css嵌入到html的头部的style标签内
   css嵌入到元素style属性内
   css规则与html结构分离（解耦）
   css规则可以复用
   css单独写入到.css文件，通过link引入到html
2. 语法
   注释： /* 注释内容 */
   语法：
   选择器 {
   样式规则
   }
   .box {
   background-color:lightcoral;
   color: #fff;
   width: 300px;
   margin-bottom: 1em;
   }
3. 选择器

1. 核心选择器
   id选择器 利用了html元素的id属性，唯一
   #one {} 选中id为one的元素
   class选择器 利用html元素的class属性，非唯一
   .box {} 选中class为box的元素
   标签选择器 利用标签名进行选择
   div {} 选中所有的div元素
   并且选择器
   div.box {} 选中div元素，并且这个div的class为box
   和选择器
   div,.box{} 选中div元素和class为box的元素
   普遍选择器
   • {} 选中所有元素
2. 层次选择器( 两个选择器配合使用)
   子选择器 通过父元素选择子元素
   .menu > li {}
   后代选择器
   空格
   .menu li {}

兄弟选择器

当前元素之后的所有兄弟
ul.rank > li:nth-child(2) ~ *{}
第二个li之后的所有li
+当前元素之后的下一个兄弟
ul.rank > li:nth-child(2) ~ *{}
第三个li

3. 属性选择器(属性过滤器)，一般应用在表单元素
   input[name]
   具有name属性input元素
   input[name=‘username’]
   具有name属性，并且name属性值为username的input元素
   input[name^=‘u’]
   具有name属性，并且name属性值以’u’作为开始
   input[name*=‘u’]
   具有name属性，并且name属性值包含’u’
   input[name$=‘u’]
   具有name属性，并且name属性值以’u’作为结尾
4. 伪类选择器(伪类过滤器)
   :first-child
   :last-child
   :nth-child(n) 第n个孩子阶段

:visited 访问过的
:hover 光标悬浮上去
:active a标签
:focus 聚焦
5. 伪元素选择器
::after
ul.menu::after {

}
在class为menu的ul元素中追加一个子元素

 

  
one
  
two
      ::after
    

  ul.menu::before {

  }

在class为menu的ul元素中插入一个子元素

::before
• one
• two

4) 计算选择器优先级
当多个选择器中的相同规则作用于同一个元素的时候，我们纠结到底这个元素上使用哪个规则的时候。

公务员 -> 考研211+ -> 进入BAT（30%） -> 进入中小型私企（0）

1. 权重（积分）
   1000 style
   100 id
   10 class、伪类
   1 元素选择器、伪元素

   1+10 + 1 + 10 + 1+ 10 + 1
   ul.menu > li.menu_item > ul.sub_menu > li {
   color: lightcyan; /* 34*/
   }
   #introduce {
   color:lightcoral /100/
   }
   .si {
   color: gray !important;
   }

2. 顺序（排名）
   当权重值相同的情况下，后者覆盖前者

3. 特权（!important）
   脱离了权重和顺序规则

5. 样式规则

1. 字体规则
   可被继承
   font-family 字体
   字体栈 “Microsoft YaHei”,“宋体”
   在浏览器所在pc从字体栈顶到底寻找字体，找不到使用默认字体
   font-size 字体大小
   12px
   font-weight 字体粗细程度
   100~900
   bold
   bolder
   font-style 是否是斜体
   italic
   normal
   color 字体颜色
   line-height 行高
   长度的相对单位
   1px
   em 相对于当前元素上的字号
   rem 相对于根元素上的字号
   font 速写形式
   font: font-style font-weight font-size/line-height font-family
   font: normal normal 14px/1.2 ‘宋体’,‘微软雅黑’;
   font: 14px/1.2 ‘宋体’,‘微软雅黑’;

   网络字体(iconfont)
   应用
   分析实现过程
   @font-face {
   font-family:“iconfont”
   src:
   }

   .iconfont {
     font-family:"iconfont"
   }
   .icon-Backward-Button:before {
     content: "\e82e";
   }
   

2. 文本规则
   text-align 文本在容器中显示方式
   center
   text-decoration-line:underline;
   text-decoration-style: double;
   text-decoration-color: lightsalmon;
   text-decoration: none;
   text-indent 缩进
   text-transform 控制大小写
   white-space：容器内的文本是否会主动换行
   nowrap 不换行
   overflow: 容器内的内容超出部分如何处理？
   hidden
   text-overflow: 文本超出部分如何显示提示？
   ellipsis ‘…’

3. 列表规则
   用于设置有序列表、无需列表、自定义列表的显示方式 ul、ol、dl
   list-style:none;

4. 其他规则
   cursor:pointer;
   visibility:hidden
   opacity:0.2
   display:none; 【三十年河东三十年河西】
   改变元素的显示方式
   none
   block 将行内元素转换为块元素
   inline 将块元素转换为行内元素
   inline-block 行内块元素
   与其他行内元素共享一行空间
   可以指定宽高
   面试题：
   如何将一个文本在块元素进行水平居中？
   text-align:center
   如何将一个文本在块元素进行垂直居中？
   如何将一个块元素进行水平居中？【3种】

  overflow:
    overflow-x,overflow-y速写
    overflow:hidden;
    overflow:scroll; 
    overflow:auto;
    容器，容器的内容的大小超过容器本身
  outline
    外圈线框
  outline-color: pink;
  outline-width: 2px;
  outline-style: solid;
  outline-offset: 1px;
  outline:

5. 盒子规则
   盒子 - 块元素
   margin 外边距（盒子外边框距离其他元素的距离）
   margin: 10px; 上右下左
   margin: 10px 20px; 上下，左右
   margin: 10px 20px 30px; 上 左右 下
   margin: 10px 20px 30px 40px; 下 右 下 左
   速写形式，外边距，上下外边距会进行重叠
   margin-top
   margin-right
   margin-bottom
   margin-left
   border 边框
   border-width
   border-top-width
   border-right-width
   border-bottom-width
   border-left-width
   border-style
   border-top-style
   border-right-style
   border-bottom-style
   border-left-style
   border-color
   border-top-color
   border-right-color
   border-bottom-color
   border-left-color
   border 速写
   border: 2px solid #ccc;
   padding 内边距(内容距离盒子内边框的距离)
   padding: 10px; 上右下左
   padding: 10px 20px; 上下，左右
   padding: 10px 20px 30px; 上 左右 下
   padding: 10px 20px 30px 40px; 下 右 下 左
   速写形式，外边距，上下外边距会进行重叠
   padding-top
   padding-right
   padding-bottom
   padding-left
   width/height
   宽高
   box-sizing(盒子模式)
   内容盒子（普通盒子 ， 默认盒子）
   content-box;
   盒子实际占据的宽度 2borderWidth + 2padding + width
   盒子实际占据的高度 2borderWidth + 2padding + height
   边框盒子（怪异盒子 ie低版本）
   border-box;
   盒子实际占据的宽度 :width
   width = 2borderWidth + 2padding + 内容宽
   盒子实际占据的高度 :height
   border-radius:2px
   外圆 300px
   内圆 200px
   期望 内圆由200 变化到250，并且，中心点不变
   background
   background-color
   background-image
   background-repeat
   background-size
   background-position
   background-clip
   background-orign
   background-attachment
   background 速写形式