前端基础--css基础

喜欢ヅ旅行 2021-09-23 08:56 401阅读 0赞

### CSS基础 ###

*  一、CSS代码语法
 *   *   *  1. 组成
         *  2. 注释
 *  二、CSS样式
 *   *   *  1. 内嵌式
         *  2. 嵌入式
         *  3. 外部式
         *  4. 三种方式的比较
 *  三、选择器
 *   *   *  1. 标签选择器
         *  2. 类选择器
         *  3. ID选择器
         *  4. 类选择器和ID选择器的区别
         *  5. 子选择器
         *  6. 包含(后代)选择器
         *  7. 通用选择器
         *  8. 伪类选择器
         *  9. 分组选择符

> CSS全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式。

# 一、CSS代码语法 #

### 1. 组成 ###

css 样式由选择符和声明组成，而声明又由属性和值组成。

p{ color:blue;font-size:12px;}

其中：p表示选择符，又称选择器，指明网页中要应用样式规则的元素；color表示属性，：表示声明，在英文大括号“｛｝”中的的就是声明，属性和值之间用英文冒号“：”分隔，当有多条声明时，中间可以英文分号“;”分隔；blue表示值。

### 2. 注释 ###

在CSS中也有注释语句：用`/*注释语句*/`来标明（Html中使用``)

# 二、CSS样式 #

从CSS 样式代码插入的形式来看基本可以分为以下3种：内联式、嵌入式和外部式三种。

### 1. 内嵌式 ###

css样式表就是把css代码直接写在现有的HTML标签中。写在style=""双引号中，如果有多条css样式代码设置可以写在一起，中间用分号隔开。

<p style="font-size:20">设置字体大小。</p>

### 2. 嵌入式 ###

把css样式代码写在`<style type="text/css"></style>`标签之间，并且放在`<head></head>`之间。

<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>HelloWorld</title>
        <style type="text/css">
            h1{ 
               font-size: 32px;
               color: red;
               text-align: center;
            }
        </style>
    </head>

### 3. 外部式 ###

外部式css样式(也可称为外联式)，就是把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在`<head>`内使用`<link>`标签将css样式文件链接到HTML文件内。引入如下：

注意：  
1、css样式文件名称以有意义的英文字母命名，如 main.css。  
2、`rel="stylesheet" type="text/css"` 是固定写法不可修改。  
3、`<link>`标签位置一般写在`<head>`标签之内。

### 4. 三种方式的比较 ###

这三种样式的优先级：内联式 > 嵌入式 > 外部式，就是**就近原则**（离被设置元素越近优先级别越高）。

# 三、选择器 #

每一条css样式声明（定义）由两部分组成，形式如下：

选择器{ 
        样式;
    }

在\{\}之前的部分就是“选择器”，“选择器”指明了\{\}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素。

### 1. 标签选择器 ###

标签选择器其实就是html代码中的标签，如`<html>、<body>、<h1>、<p>、<img>`等。

### 2. 类选择器 ###