在HTML基础的文章中说过,HTML就犹如一栋房子,body就好比一栋没装修的房子,而CSS就是用来装修房子的

一、使用CSS的方法

• 内部样式表

  #在head中的title标签下导入
  <style type="text/css">
  /** css语句*/
  </style>
  

• 内联样式

  <p style="">测试</p> // 在style中写入对应css语句,用;隔开
  

• 外部导入

  #在.css文件中写css语句然后在head中的title标签下导入
  <link rel="stylesheet" type="text/css" href=""/> // href中填入指定的css文件的路径
  

  ​

二、选择器和选择符

• 选择器

  • class类别选择器

    #html下
    <div class="choose">
        class
    </div>
    #对应的css
    语法:
    .class值{
    
    }
    # 类别选择器可以被多个标签同时使用
    

  • id选择器

    #html下
    <div id="choose">
        class
    </div>
    #对应的css
    语法:
    #id值{
    
    } // #+id值
    # id是唯一的,一个id只能被一个标签使用
    

• 选择符

  • 包含选择符

    语法:
    父类选择器 子类选择器 ...{
      
    }
    #html下
    <div id="first">
        <div class="second">
            <p>子类</p>
            <a href=""></a>
        </div>
    </div>
    #对应的css
    #first .second p{
    
    }
    

  • 群组选择符

    语法:
    选择器1,选择器2...{
      
    }
    #html下
            <div class="a">
                a
            </div>
            <div id="b">
                b
            </div>
            <div class="c">
                c
            </div>
            <p>p</p>
    #css下
    .a,.b,.c,p{
    
    }
    

  • 通配选择符

    语法:
    *{
      
    }
    #对所有标签作用
    

  三、css常用的属性

  width:100px //宽度为100像素,px是像素的意思
  height:100px //高度为100像素
  background-color:red //背景颜色设为红色,或者可以用#颜色的16进制码
  background-image:url() //背景图片
  background-repeat:no-repeat // 背景图片是否平铺,no-repeat为不平铺,repeat为平铺
  font-size:12px //字体为12像素
  line-height:30px //行高为30px
  font-weight:500 //字体的粗度
  color:red //字体颜色
  text-align:middle//水平对齐方式
  #列表属性
  list-style-type: //无序列表前面的那个图标
  list-style-position: //列表图片显示的位置,有outside何inside
  list-style-image: //图标设为对应图片
  #文本属性
  text-decoration: //修饰文本
  
  

  ​