css 总结

  1. 内部与内联样式

    内部样式:style属性
     <div style="background-color: aquamarine;">adfjk</div>
     
    内联样式:style标签
     <style>
            #div2{
                background-color: #000000;
            }
      </style>
     外部样式:
       <link rel="stylesheet" href="./common.css">
    
        <style>
            @import url('./common.css'); //不推荐
        </style>
        
    内部样式和外部样式优先级相同,如果设置了相同样式,那么后写的引入方式优先级高
    单一样式优先级:
    style内联样式 > id > class > tag > * > 继承
    权重:1000     100   10       1
    
    标签类型划分:布局一般用块标签,修饰文本一般用内联标签
    block:块
     独占一行
     支持所有样式
     不写宽的时候,跟父元素的宽相同
     所占区域是一个矩形
     
    inline:内联
     a span img(是替换元素,支持宽高设置)
     挨在一起
     有些样式不支持:width height margin padding
     不写宽的时候,宽度由内容决定
     所占区域不一定是矩形
     内联标签之间会有空隙,产生原因:换行产生的
     
    inline-block:内联块
     input
    
    标签内容划分:
    
    
    !important: 提升样式优先级,不建议使用
    
    标签+类 > 单一
    div .box{
                color:blue;
            }
    div{color:red;}
    
    
    盒模型:
    content -> padding -> border -> margin
    物品       填充物     包装盒     盒子与盒子之间的间距
    (width,height)
           内填充
    背景颜色会填充到margin以内的区域
    文字会在content区域
    padding不会出现负值,margin是可以出现负值
    
    问题解决:
    1) margin重叠
    上下两个元素这是margin会出现叠加的问题(只存在上下,不存在左右),会取上下中值较大的作为叠加的值
    解决方案:
    1. bfc规范
    2. 只给一个元素添加间距
    
    2)margin传递
    嵌套的结构中,margin-top会有传递的问题
    <div class="box1">
         <div class="box2">段落</p>
    </div>
    .box2{margin-top: 100px;}
    box1和box2一块往下移动
    解决方案:
    1)BFC规范
    2)给父容器加边框
    3)margin换成padding
    
    3)居中
    margin-left:auto;//盒子会靠右显示
    margin-right:auto;//盒子会靠左显示
    
    margin:auto; //居中显示
    width height 不设置的时候,会自动计算容器的大小,节省代码
    
    4)span标签之间有空隙
    解决方案:
    父级元素加:font-size:0
    span标签加:font-size:16px
         <style>
           div{font-size: 0;}
           span{font-size: 16px;}
           #content1{background-color: red;}
           #content2{background-color: blue;}
        </style>
        <div>
         <span id="content1">内联1内联1内联1内联1内联1内联1内联1内联1内联1内联1</span>
         <span id="content1">内联1</span>
        </div> 
    
  2. 颜色

    单词: red blue
    十六进制:#ffffff
    rgb: rgb(255,255,255)
    
    拾色工具:fehelper ps
    
  3. 背景样式

    background-color: #000000;
    background-image: url('./');
    background-repeat: repeat-x; //平铺方式
    background-position: top bottom; //图片位置
    background-attachment: fixed; //背景图随滚动条的移动方式 fix容器滚动,背景图不动
       scroll:背景位置是按照当前元素进行偏移
       fixed:背景位置是按照浏览器进行偏移
    
    
    
    background-image: url(./icon.png);
       width: 300px;
       height: 300px;
       background-repeat: no-repeat;
       background-position: -90px 10px;
       background-position: center center;
       background-position: 50% 50%;
       background-color: #000000;
       background-attachment: fixed; 
    
       background: red url(./1.png)  no-repeat center center;
    
       复合会把单一覆盖
       先复合再单一
    
  4. 边框样式

    border-style:solid dashed dotted
    boder-width
    boder-color: transparent
    
    border-left-style:
    
  5. 字体

font-family: 华文彩云,'Times New Roman', Simsun, 微软雅黑; //字体含有空格需要用引号
font-size: 16px; //不建议用奇数 数字|字母(medium等)
font-weight: normal|bold|number(100-500:nomal 600-900 bold);
font-style:italic|normal;
color:red;

复合写法:
font:30px 宋体
至少要有 size family (有顺序要求)
weight style size family
style weight size family
weight style size/line-height family


6. 文本修饰

 text-transform:lowercase|uppercase|capitalize;
 text-decoration: underline|overline|line-through|none;



7. 段落样式

首行缩进两个汉字:
text-indent:36px; font-size:18px;

1em始终等于字体大小,此处1em=18px
text-indent:2em;

text-align:left|justify


8. 行高

 

line-height: 上边距+字体+下边距 (上边距=下边距)
line-height:32px|2; font-size:16px;
2此处指2倍行高


9. 文本间距

letter-spacing: 10px; 字之间的间距
worder-spacing:10px (英文才有效); 词之间的间距

英文和数字不自动折行
word-break:break-all (强烈的折)
word-wrap:break-word (不强烈的折行,会出现空白问题, 长字符单词会整个在下一行显示)


9. 层次选择器

M N: 后代(包括所有子孙后代)
M>N:父子(只是父子)
M~N:当前标签下面的所有兄弟
div~h2{
color: red;
}
<div>div</div>
<p>p</p>
<h2>h2</h2>
<h2>h2</h2>
<h2>h2</h2>

M+N:相邻(只会找当前标签下面相邻的兄弟)


10. 属性选择器

 ```
 1) M[attr]: 选择所有带有attr属性元素
 
     a[target]
     {
     background-color:yellow;
     }
 
     <a href="//www.w3cschool.cc">w3cschool.cc</a>
     <a href="//www.disney.com" target="_blank">disney.com</a>
     <a href="//www.wikipedia.org" target="_top">wikipedia.org</a>
  2) M[attr=value]:  选择所有使用target="-blank"的元素
         a[target=_blank]
         {
         background-color:yellow;
         }
  3) M[attr*=value]: 选择每一个src属性的值包含子字符串"runoob"的元素a[src*="runoob"]
          div[class*="test"]
         {
             background:#ffff00;
         }
         <div class="first_test">这是第一个 div 元素。</div>
         <div class="test">这是第三个 div 元素。</div>
   4)M[attr^=value]:   a[src^="https"]选择每一个src属性的值以"https"开头的元素
           div[class^="test"]
         {
         background:#ffff00;
         }
   5)  M[attr$=value]: 结尾
           div[class$="test"]
         {
         background:#ffff00;
         }
    6) M[attr1][attr2]:
         div[class][id]:div标签中含有这两个属性的标签
         
 ```

11. 伪类选择器

 ```
 M:伪类{}
     a:link 访问前
     a:visited 访问后
     :hover  鼠标移入
     :active 鼠标按下
     如果四个伪类都生效,需要注意添加顺序: L V H A
     
     a{color:gray}
     a:hover{color:red}
     
     a:active
     {
         background-color:yellow;
     }
     div:hover{
         background-color:yellow;
     }
     div:active{
         background-color:yellow;
     }
     div:hover{
         background-color:yellow;
     }   
 ```

12. :after :before

 ```
 通过伪类的方式给元素添加文本内容
 清浮动 精灵图标 部分文字改变颜色 列表图标
 用法:
 https://www.cnblogs.com/liAnran/p/9714040.html
 
 
 ```

13. [:checked]

  [:disabled] 

  [:focus]

 ```
 input:checked
 {
      width:100px;
      height:200px;
 }
 :checked
 {
 width:100px;
 height:200px;
 }
 :focus{background:red;}
 
 <form action="">
     <input type="radio" checked="checked" value="male" name="gender" /> Male<br>
     <input type="radio" value="female" name="gender" /> Female<br>
     <input type="checkbox" checked="checked" value="Bike" /> I have a bike<br>
     <input type="checkbox" value="Car" /> I have a car 
 </form>
 ```

14. 结构类选择器

 ```
 :first-of-type
 :last-of-type
 :only-of-type
 :nth-of-type(n) : 从1开始
 
 li:nth-of-type(n+2){ //n: 从0到无穷大
     background-color: red;
 }
 
 li:last-of-type{
     color:blue;
 }
 li:first-of-type{
     color:rosybrown;
 }
 
  
     <ul>
         <li>fdfjkj</li>
         <li>fdfjkj</li>
         <li>fdfjkj</li>
         <li>fdfjkj</li>
         <li>fdfjkj</li>
     </ul>
 
 li:only-of-type{
     color:blue;
 } 
     <ul>
         <li>fdfjkj</li>
     </ul>
 
 :nth-child(n)
 :first-child
 :last-child
 :only-child
 
  li:first-child{
     background-color: red;
  }
 ```

15. 样式继承

 ```
 文字相关的样式可以被继承
 布局相关的样式:默认不会被继承,但可以设置inherit属性
 div{border:1px solid red;}
 p{border:inherit;}
 
 <div>
   <p>段落</p>
 </div>
 ```

推荐阅读更多精彩内容