CSS基础

最新推荐文章于 2023-08-18 20:40:23 发布

@清雅绝尘

最新推荐文章于 2023-08-18 20:40:23 发布

阅读量48

点赞数

分类专栏：前端 css 文章标签： css html 前端

本文链接：https://blog.csdn.net/qq_45560461/article/details/129288227

版权

前端同时被 2 个专栏收录

6 篇文章 1 订阅

订阅专栏

css

2 篇文章 0 订阅

订阅专栏

CSS

CSS（Cascading Style Sheets）层叠样式表，又叫级联样式表，简称样式表，文件后缀名为 .css，CSS用于HTML文档中元素样式的定义。
注：HTML是页面的内容组成，CSS是页面的表现

CSS 构成：选择器，一条或多条声明，每条声明由一个属性和一个值组成
例如：

p{
    font-size: 14px;
}

CSS的引入方式

内联样式（行内样式）
在相关的标签内使用样式（style）属性。维护成本高。

<p style="background: red; font-size: 24px;">啊啊啊<p>

内部样式
单个文档需要特殊的样式，使用 <style> 标签在文档头部定义内部样式表。多个页面之间容易出现混乱。

<head>
    <style>
       p {
           background: red;
       }
    </style>
</head>

外部样式（最佳）
每个页面使用 <link> 标签链接到样式表。

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

导入式
会影响加载速度

<style type="text/css">
   @import url("css文件路径");
</style>

CSS样式表特征

继承性
内部标签继承外部标签样式。
层叠性
对一个元素多次设置同一个样式，最后一次设置起作用。
优先级
行内样式>内部（外部）样式

CSS注释

/* 注释 */

选择器

/* 全局选择器 */
*{
    margin: 0;
    padding: 0;

}
/* 元素选择器 */
p{
    font-size: 14px;
}

/* 类选择器 */
/* <p class="it"></p> */
.it{
    font: optional;
}
/*不能以数字开头*/

/* ID选择器 */
/* <h2 id="root"></h2> */
#root{
    border: 1;
}

/* 合并选择器 */
.header,.footer{
    height: 30px;
}

选择器的优先级：行内样式 > ID选择器 > 类选择器 > 元素选择器

CSS布局

上中下结构
上中下-左右

@清雅绝尘

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS基础

CSS（Cascading Style Sheets）层叠样式表，又叫级联样式表，简称样式表，文件后缀名为 .css，CSS用于HTML文档中元素样式的定义。选择器的优先级：行内样式 > ID选择器 > 类选择器 > 元素选择器。：选择器，一条或多条声明，每条声明由一个属性和一个值组成。注：HTML是页面的内容组成，CSS是页面的表现。
复制链接

扫一扫