CSS --- 基础知识 笔记

一.引入css的方式

    1.行间样式

    2.页面级css

    3.引入外部css文件  

二.选择器

    1.id选择器(id是一一对应的)  #

            #only{

            }

    2.class选择器(多对多关系)  .

           .demo{

           }

    3.标签选择器  div

            div{

            }

     4.通配符选择器（所有的标签）   *

            *{

           }

     5.属性选择器   [class="属性值"]  可以写属性名，或者写全（属性名与属性值都写）

 但是不能单独 写属性值

 

      6.！important  权限最大

 

三.选择器的权重

！important                   Infinity

行间样式                       1000

id                                    100

class|属性|伪类               10

标签|伪元素                     1

通配符                              0

 

父子选择器，或者叫派生选择器（标签必须是父子结构，但是父级不一定必须是标签，只要是父子关系成立即可）

浏览器的内部原理：遍历父子选择器的顺序，是自右向左，因为这样是最快的

div span{
    background-color: red;
}

.wrapper .box em{
    background-color: red;
}

 

直接子元素选择器（只跟自己紧接着的一级有关系，跟间接的没有关系）

div > em{
    background-color: red;
}

 

并列选择器

注意：并列选择器的中间是没有空格的，并且和标签一起出现的时候，标签要放到前面

div.demo{
    background-color: red;
}

 

分组选择器

em,
strong,
span{
    background-color: red;
}

 

一.字体设置

font-size: 50px;  设置字体大小    (跳转字体的高)

font-weight: bold;  设置字体加粗效果

font-style: italic;   设置字体样式，斜体

font-family: arial;  设置字体，宋体，楷体等

color: red;       设置字体颜色（公司里最常用的颜色编码和颜色代码）

text-align: center;   对齐方式

单行文本垂直居中的方法   line-height = height 

             height: 200px;

             line-height: 200px;

text-indent: 2em; 首行缩进   （1em等于一个font-size）

text-decoration: none;  去掉原有属性，例如del标签的横线

cursor: pointer;  光标值，当鼠标移动到时显示的形式

 

伪类选择器：当鼠标移动时，显示的变化

div:hover{
    background-color: orange;
}

 

border:1px solid black; 边框

    第一个值：框的大小  border-width: 1px;

    第二个值：框的格式  border-style: solid;

    第三个值 :  框的颜色   border-color: black; 

    border-left-color: transparent（这个值是透明色）  也可以分别设置4个方向的属性值
    border-top:;
    border-bottom: 
    border-right:;
 

 

1，行级元素
    特点：内容决定元素所占位置
          不可以通过css改变宽高

          span strong em a del 

    2, 块级元素
    特点： 独占一行
           可以通过CSS改变宽高

           div p ul li ol form adress  

    3,  行级块元素
    特点： 内容决定大小
           可以改宽高

           img 

 

注意：凡是带有inline 的元素，都有文字特性

经常用的开发思路：先定义功能，再选配

 

标签选择器，真正的功能是初始化标签

去掉标签原有的不需要的一些属性

 

*{
    padding: 0;
    margin: 0;
}

通配符最大左右，初始化所有的标签，因为权重最低，所以可以后期任意修改