css (具体代码看笔记本)

CSS
  1. CSS语法
   选择器 {属性1：值1;...;}
  2. CSS导入方式
   1. 行内样式-->把css样式写到标签的style属性里
   2. style标签中定义
   3. 写在单独的css文件中，通过link标签导入
  3. CSS选择器
   1. 基本选择器
    1. ID选择器      --> HTML标签都有唯一的ID
    2. 类选择器      --> HTML标签可以设置class属性
    3. 标签选择器    --> 大范围使用
    4. 通用选择器 *
   2. 组合选择器
    1. div p    后代选择器
    2. div>p    儿子选择器
    3. div+p    毗邻选择器
    4. div~p    弟弟选择器
   3. 分组和嵌套（全班都没想起来的）
    div, p {}
    div.c1 {}
   4. 属性选择器
    1. div[s14]              找到有s14这个属性的div标签
    2. input[type='email']   找到type是email的input标签
   5. 伪类选择器
    1. :hover     --> 鼠标移动到标签上时应用的样式
    2. :focus     --> input标签获取焦点时应用的样式
   6. 伪元素选择器
    p:before {    --> 在P标签内部的最前面追加一个内容
     content: "*";
     color: red;
    }
    p:after {     --> 在P标签内部的最后面追加一个内容
     
    }
    清除浮动：
    .clearfix:after{
     content: "";
     clear: both;
     display: block;
    }
  4. CSS选择器的优先级
   1. 样式名一样的话
    类似 变量覆盖 最后加载的那个样式生效
   2. 样式名不一样
    根据 权重计算
    内联样式(1000)>ID选择器(100)>类选择器(10)>元素选择器(1)>继承(0)
   3. 不讲道理的
    !important
  5. CSS属性
   1. 文字属性相关
    1. font-family: "字体1", "字体2",
    2. font-size        字体大小
    3. font-weight  字体粗细
    4. color            字体颜色
     1. 英文的颜色名    red
     2. 16进制颜色代码  #FF0000
     3. RGB             rgb(255, 0, 0)
     4. rgba(255, 0, 0, 0.4)
   2. 宽和高
    1. width             宽
    2. height    高
     只有块儿级标签设置宽和高才有效
   3. 背景
    background
    
    background-color: red
    background-image: url(...)
   4. 文本样式
    1. 水平居中
     text-align: center
    2. 单行文本的垂直居中
     line-height=父标签的高度
    3. 文本装饰线
     text-decoration: none/under-line/over-line/line-through
   5. CSS盒子模型
    内容-->padding-->border-->margin
   6. 浮动
    float: left/right
    浮动的副作用
   7. 定位
    1. 相对定位     --> 相对自己原来在的位置做定位
    2. 绝对定位     --> 相对自己已经定位过的祖先标签
    3. 固定定位     --> 相对于屏幕做定位
   8. 溢出
    overflow: hidden/scroll/auto
   9. 边框
    border: 1px solid red;
    border-radius: 50%
   10. display
    1. block
    2. inline
    3. inline-block
    4. none