CSS简介、导入方式及选择器

目录

一、CSS简介

二、CSS导入方式

三、CSS选择器

四、CSS属性

---

一、CSS简介

CSS 是一种描述 HTML 文档样式的语言，CSS 描述应该如何显示 HTML 元素，用于控制网页表现的一种语言。

CSS（Casscading Style Sheet）：层叠样式表

W3C标准：网页主要由三部分组成

结构：HTML

表现：CSS

行为：JavaScript

二、CSS导入方式

CSS导入HTML有三种方式：

1、内联样式：在标签内部使用style属性，属性值是css属性值对（不常用，html和css耦合在一块，不利于后期维护）

<div style="color: red">hello css</div>

2、内部样式：定义<style>标签，在标签内部定义css样式

    <style>
        span{
            color: red;
        }
    </style>

    <span>hello css</span>

3、外部样式：定义link标签，引入外部的css文件

<link href="../css/demo.css" rel="stylesheet">

<p>hello css</p>

demo.css文件：

p{
    color: red;
}

运行结果一样：

三、CSS选择器

概念：选择器是选取需设置样式的元素（标签）

div{color: red;}

分类：

1、元素选择器

元素名称{color：red;}

代码示例：

div{color: red;}

2、id选择器

#属性值{color：red;}

代码示例：

#name{color: blue;}

<div id="name">hello css2</div>

3、类选择器

.class属性值{color：red;}

代码示例：

.cls{color: pink;}

<div class="cls">div3</div>

四、CSS属性

1、字体、文本

font-size：字体大小

color：文本颜色

text-align：对齐方式

line-height：行高

2、背景

backgrou：

3、边框

border：设置边框，符合属性

4、尺寸

width：宽度

height：高度

5、盒子模型：控制布局

margin：外边距

padding：内边距

        默认情况下内边距会影响整个盒子的大小

        box-sizing：border-box；设置盒子的属性，让width和height就是最终盒子的大小

float：浮动

        left

        right