前端基础(2)CSS

1、CSS简介

• CSS：层叠样式表 (Cascading Style Sheets，缩写为 CSS）

• 作用

  • 渲染网页样式
  • 实现网页内容和网页样式分离

2、语法

选择器{
    属性：属性值；
    属性：属性值；
}
注释用：/*这里是注释*/

3、CSS与HTML三种结合方式

1. 在HTML标签中用style属性值设置“key：value1，value2...；key：value1，value2...”

<div style="border: 1px soild red; color=bule;">
    我是内容
</div>

• 缺点
  • 代码多
  • 复用性差

2. 在html代码的head标签中用style标签来定义css样式（要用到选择器,这里先用标签选择器）

<style>
    div{
        border: 1px soild red;
        color=bule;
    }
    span{
        border: 1px soild red;
        color=bule;
    }
</style>

• 缺点
  • 能复用，但是仅限于一个页面

3. 把css样式写成单独的css文件（要用到选择器），再在HTML头标签中用link标签引入(注意：这里没有style标签)

• CSS代码部分

div{
    border: 1px soild red;
    color=bule;
}

span{
	border: 1px soild red;
    color=bule;
}

• HTML代码部分（头标签中）

<link ref="stylesheet" type="text/css" href="css路径"/>

4、CSS四种选择器

1. 标签选择器

标签名{
    属性：属性值；
    属性：属性值；
}

2. id选择器

#id{
    属性：值；
    属性：值；
}

3. class选择器

.class的值{
    属性：值；
    属性：值；
}

4. 组合选择器

选择器 1，选择器 2，选择器 n{ 
    属性：值; 
    属性：值；
}