CSS基础知识汇总

最新推荐文章于 2024-10-07 21:54:14 发布

凌小渊

最新推荐文章于 2024-10-07 21:54:14 发布

阅读量362

点赞数

文章标签： css html html5

本文链接：https://blog.csdn.net/xyAbysm/article/details/119931890

版权

这篇博客汇总了CSS的基础理论和常用知识点，包括CSS的引入方式（内联、内部和外部样式），基础选择器（元素、类、ID选择器）及其优先级，其他选择器如分组、属性和后代选择器，以及核心概念盒子模型和浮动效果的应用，如入门案例和图文混排。

摘要由CSDN通过智能技术生成

CSS知识点汇总

1、基础理论

`CSS`定义：

CSS 是层叠样式表，主要是用来美化HTML页面的。
HTML 页面相当于 有装修的房子，只有框架，没有装修，叫做毛坯房。
CSS 相当于是在做装修, 可叠加在一起。有不同的风格, 地中海风格、北欧风格、中式风格...

2、常用知识点

汇总

CSS的引入方式：

(1)内部样式, style 属性
(2)内联样式, 在<head> 标签当中添加<style> css 代码
(3)外部文件, 可以定义css文件, 在<head>标签当中引入 css 文件

基础选择器格式：

元素选择器：

标签的名称{
       
    css的样式代码
}

类选择器：

.class属性名称{
       
	css样式
}
/* 备注: class属性在页面当中可以定义多个 */

ID选择器：

#id的属性值{
       
	css样式
}
/* 备注: id属性在页面当中,只可以定义一个*/

三种选择的优先级：

优先: ID选择器 > 类选择器 > 元素选择器

其他选择器格式：

分组选择器：

元素名称1, 元素名称2, 元素名称3{
       
	css样式
}

属性选择器：

元素名称[属性名称]{
       
	css样式
}

后代选择器：

选择器名称1  选择器名称2{
       
	css样式
}

伪类选择器

元素名称:伪类的名称{
       	css样式}

盒子模型：

可以给元素添加 边框（`border`）、内边距（`padding`）、外边距（`margin`）。

浮动效果：

定义：

浮动，可以实现 旧报纸的 文字和图片环绕的效果。

浮动的方式会使得 元素脱离原始的文档流，相当于是 飘起来。

分类：

float:left   左边浮动
float:right  右边浮动
float:none   消除浮动

案例代码

1、css的引入方式:

01_.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css的引入方式</title>

    <style>
        #second{
     
            background-color: aqua;
            font-size: 40px;
        }
    </style>
    <!--导入式-->
    <style type="text/css">@import "./01_.css";</style>         <!--链接式-->
    <link href="./01_.css" rel="stylesheet" type="text/css" />  
</head>
<body>
<!--
    CSS的引入方式三种：
        (1)内部样式 — style 属性
        (2)内联样式 — 在<head>标签当中添加<style> css 代码
        (3)外部文件 — 可以定义css文件，在<head>标签当中引入 css 文件
-->
<!-- 引入方式一 -->
    <div id="first" style="background-color: aquamarine; font-size: 25px">好久不见</div>
<!-- 引入方式二 -->
    <div id=