【前端】CSS

Wed, 04 Sep 2019 00:00:00 +0000

1. CSS介绍

CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素。

当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。

2. CSS语法

2.1 CSS实例

每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。

2.2 CSS注释

/*这是注释*/

3. CSS的几种引入方式

3.1 行内样式

行内式是在标记的style属性中设定CSS样式。不推荐大规模使用。

<p style="color: red">Hello world.</p>

3.2内部样式

嵌入式是将CSS样式集中写在网页的标签对的标签对中。格式如下：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            background-color: #2b99ff;
        }
    </style></head>

3.3 外部样式

外部样式就是将css写在一个单独的文件中，然后在页面进行引入即可。推荐使用此方式。

<link href="mystyle.css" rel="stylesheet" type="text/css"/>

4. CSS选择器

4.1 基本选择器

元素选择器

/*元素选择器*/
p {color: "red";}

/*ID选择器*/
#i1 {
  background-color: red;
}

/*类选择器*/
.c1 {
  font-size: 14px;
}
p.c1 {
  color: red;
}
/*注意：
样式类名不要用数字开头（有的浏览器不认）。
标签中的class属性如果有多个，要用空格分隔。*/

/*通用选择器*/
* {
  color: white;
}

4.2 组合选择器

7 on 中二青年

【前端】CSS