css学习笔记

前端三要素：html：搭建
css：美化
javascript：动态展示

css:
一.什么是css？
cascading style sheets 层叠样式表
特点：从上到下依次解析 、对大小写敏感

二.css的语法
  a.属性名和属性值之间使用：隔开
  多对属性之间使用；隔开
  最后一对属性可以不加分号
  id="one"
  class="one"
  style="根据css语法设置"
  title="one"

  


  
  

  b.速记写法
    简写形式
    border:1px solid red;
      border-width:1px;
       border-top-width
       border-left-width
       borfer-right-width
       border-bottom-width
      border-style:
       ...


    盒子=内容区+内边距+边框+外边距
               padding     margin
        padding:10px;
        padding-top/left/right/bottom
        ---->
        padding:10px;//上下左右均为10px
        padding:10px 20px;//上下10px 左右20px
        padding:10px 20px 30px;//上10 左右20 下30
        padding：10px 20px 30px 40px;//上右下左

        margin:同上


  c.注释
     1.注释的写法
       /*注释内容*/
     2.注释的作用
       解释说明
       更好地维护管理
     3.注释能不能嵌套--html不能 同理css不能


三.html中引入css的方式
   1.行内样式（尽量不用）
    style属性
    

   2.内联样式(head)
     style标签
   
   写在body

   3.外部引入
    ① 创建.css为后缀名文件
--> ②link标签(style标签外部)：先加载css
      
      创建一个文件
      div{
        width: 300px;
        height: 300px;
        background-color: blue;
     }
-->③ @import url()   ——>不建议使用，先加载html
    style标签里 @import url('./outer.css')

引入css的优先级问题：
行内>内联=外部引入（靠下 优先级越高）
就近原则：哪一种设置方式更靠近元素，哪一种方式的优先级更高

四.选择器
   1.标签选择器/元素选择器
      根据标签名称选择一类元素
   2.id选择器
      通过id属性选择一个元素
      #value
   3. 类选择器：
       class
       .value
   4.普遍选择器
       *:所有 用于取消
   5.后代选择器：
       selector1>selector2:选择直接子元素  div>p{选择div的直接子元素p
       selector1 selector2:选择所有后代元素，包含孙代元素 div p{
   6.兄弟选择器：
       +：选择当前元素之后的一个兄弟元素 选择id为one后的一个div兄弟
       ~：选择当前元素之后的所有兄弟元素

#one+div{
background-color: orange;
}
.two~div{
background-color: pink;
}

   7.属性选择器：
       [class]:选择当前页面中具有class属性的元素
       [class='one']:选择当前页面中具有class属性，并且属性值为one的元素
       [class~='one']:选择当前页面中具有class属性，并且属性值之一为one的元素
       [class^='o']:选择当前页面中具有class属性，并且属性值以o开头的元素
       [class$='o']:选择当前页面中具有class属性，并且属性值以o结尾的元素
       [class*='o']:选择当前页面中具有class属性，并且属性值有o的元素
   8.多选择器：
       使用逗号隔开多个选择器
       div{
        width:100px;
    } 
    p{
     width:100px;
    }
    div,p{
     width:100px;
    }
    one,.two,p{
    }
    div .one,div .two{}
   9.组合选择器：
      将多个选择器组合到一起使用 选择所有div中class为one
      div.one{}  只选中div中的class为one
   10.伪类选择器：
      :伪类名称
      :first-child  
      :last-child
      :nth-child(number/odd基数/even偶数)
      
          
      
      
          

              hello
          
      百度一下
      百度一下2
          

              

          
          

              

              

          
          


          
          

              

              

              

          
      


       


      *{
          margin:0px;
          padding:0px;
      }
      

      #one

      
          
      
      
          

              
outer1
                  

                      
inner
                  
              
              
outer2
              
outer3

          
          

          

          

          

          


      

1. 如何选择元素？
2. 如何设置样式？
   div p{
   width: 50px;
   /* height: 50px; /
   height: inherit;/继承父类的height属性/
   border: 1px solid royalblue;
   / color: black; */
   color: initial;/不继承父类的color属性/
   }
   继承

颜色单位：1.关键字
Blue lightblue
2.rgb(r,g,b) : 0-255之间
3.rgba(r,g,b,a)️0-1之间 : 0代表完全透明 1代表完全不透明
4.16进制的颜色值
拾色器/取色器：
尺寸单位：1.px 绝对单位
Width:100px;
2.em 相对单位 1em=16px
3.百分比相对单位

占父类大小100%

网络字体：

1. 下载对应字体
2. 设置/声明字体@font-face
3. 引用字体
   div:nth-child(5){
   font-family: “自己随意”; 使用
   }
   @font-face {
   font-family: “自己随意” ; 声明
   src: url(’./Fonts/Salantina.otf’);
   }
   字体图标库：fontawesome:
   .css
   引入外部样式文件（link标签）
   使用行内元素设置（span/ i）
   
   
   Out.css
   .one{color;red}
   Index.html:

Head部分：

Iconfont:
.css 1.引入css 2.使用( span /i)
Body内图标名称

文本样式：

position:inside outside

Ol: start属性 reversed:布尔值 设置方式属性名=属性值 属性名=属性名
标题列表：dl
dt:标题项
dd：列表项

你最喜欢的水果

苹果

香蕉

葡萄

Word-spacing:单词之间的间距
Letter-spacing:字符之间的间距
Word-wrap: break-word: 超出父元素宽度是否换行显示
/* wrap: off(关闭换行功能) Soft/hard软换行硬换行 */
Overflow:超出父元素部分如何设置
hidden隐藏 、scroll以滚动条形式展示

max-width/height:不可超出，超出默认最大值
min-width/height

元素的隐藏和显示：
display：none:元素的隐藏 占据的空间被隐藏
block:元素的显示
visibility：hidden:元素的隐藏 空间不被隐藏 相当于修改元素透明度
visiable:元素的显示

设置表格汇总的单元素合并：
table{ border-collapse: collapse;}

caption设置标题
设置表格标题位置:Caption-side: bottom/left /right/top
写在所有tr之上
代表一列

 

盒子模型：
盒子宽度=content+padding+border
标准盒子/默认盒子/w3c盒子
box-sizing:content-box;

特点：width元素内容 边框盒子/怪异盒子： Box-sizing: border-box; 特点: width盒子 Border-radius：20px 圆角