CSS基础知识点总结、一

发布日期：2021-04-30 21:00:35 浏览次数：154 分类：精选文章

本文共 1335 字，大约阅读时间需要 4 分钟。

CSS基础入门

1. CSS是什么？

CSS（层叠样式表）是一种用于增强网页样式和结构的标记性语言。它允许将样式信息与网页内容分离，使HTML代码更加简洁高效。

2. CSS的作用

CSS的主要作用是为HTML元素添加样式，使网页更加美观且功能性强。它可以控制网页的布局、字体、颜色、背景等属性。

3. 使用CSS的三种方式

1. 内联定义

在HTML元素的开始标签中直接设置style属性。

优点：样式定义简单，控制范围有限。缺点：当样式较多时，会导致HTML代码冗长。

2. 内部样式块

在HTML的<head>标签中添加<style>标签定义样式。

优点：适合样式较多的情况。缺点：内部样式文件会变得庞大。

3. 链接外部样式表

在HTML的<head>标签中使用<link>标签引入外部CSS文件。

优点：样式管理便捷，适合大量样式定义。缺点：需要维护外部样式文件。

4. CSS选择器

CSS选择器用于指定要应用样式的HTML元素。

1. 元素选择器

根据元素名称选择元素。

table {    width: 300px;    height: 200px;}

2. ID选择器

根据元素的唯一ID选择元素。

#table1 {    width: 500px;    height: 300px;}

3. 类选择器

根据类属性选择多个元素。

.table1 {    width: 500px;    height: 300px;}

4. 包含选择器

选择父元素包含的所有子元素。

div {    width: 400px;    height: 200px;    background-color: blue;}div h1 {    background-color: black;    color: white;}

5. 属性选择器

根据元素的属性值选择元素。

p[id] {    background-color: black;}p[id="p3"] {    font-size: 30px;}

6. 子元素选择器

选择父元素的所有子元素。

div ul li p {    color: aqua;}div ol>li p {    color: blue;}

7. 选择器分组

将多个选择器分组，统一设置样式。

ul li[id="l1"], .olp {    color: red;}

5. 常用伪类

1. :link

设置未被访问的链接样式。

a:link {    font-size: 30px;    color: blue;}

2. :hover

设置鼠标悬停时的样式。

a:hover {    font-size: 80px;    color: red;}

3. :active

设置鼠标点击与释放之间的样式。

a:active {    font-size: 80px;    color: black;}

6. CSS的实际应用

通过合理使用CSS选择器，可以实现网页的布局设计、样式统一以及交互效果。建议在实际开发中多使用外部样式表和嵌入样式块，避免在HTML标签中直接设置样式。

上一篇：Leetcode--172. 阶乘后的零

下一篇：Java多线程01：多线程编程+线程的常用操作方法

发表评论

关于作者

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！

-- 愿君每日到此一游！