CSS 知识点及使用案例

1. CSS 三种引入方式

1.1 行内样式

直接在 HTML 元素上通过 style 属性定义样式。

html 复制代码
<p style="color: red; font-size: 20px;">这是行内样式。</p>
1.2 内部样式表

在 HTML 文档的 <head> 部分使用 <style> 标签定义样式。

html 复制代码
<head>  
    <style>  
        p {  
            color: blue;  
            font-size: 18px;  
        }  
    </style>  
</head>  
<body>  
    <p>这是内部样式。</p>  
</body>
1.3 外部样式表

通过 <link> 标签在 HTML 文档的 <head> 部分链接外部 CSS 文件。

html 复制代码
1.3 外部样式表
通过 <link> 标签在 HTML 文档的 <head> 部分链接外部 CSS 文件。

styles.css 文件内容:

css 复制代码
p {  
    color: green;  
    font-size: 22px;  
}
2. CSS 选择器
2.1 基本选择器
  • 元素选择器:选择所有指定类型的元素。
html 复制代码
p {  
    color: gray;  
}
  • 类选择器:选择所有具有指定类的元素。
html 复制代码
.highlight {  
    background-color: yellow;  
}
  • ID 选择器:选择具有指定 ID 的元素。
html 复制代码
#unique {  
    border: 1px solid black;  
}
2.2 符号选择器
  • 交集选择器:选择具有特定父元素的后代元素。
css 复制代码
#parent .child {  
    font-size: 14px;  
}
  • 并集选择器:为多个选择器指定相同的样式。
css 复制代码
h1, h2, h3 {  
    color: purple;  
}
2.3 属性选择器

选择具有特定属性或属性值的元素。

css 复制代码
a[target="_blank"] {  
    color: orange;  
}
2.4 伪类选择器

选择处于特定状态的元素。

css 复制代码
a:hover {  
    color: red;  
}
3. 常用样式
3.1 文本样式
  • 颜色:使用颜色名称、十六进制代码、RGB、RGBA 等。
css 复制代码
p {  
    color: #333; /* 十六进制颜色 */  
}
  • 文本对齐:设置文本的水平对齐方式。
css 复制代码
.text-center {  
    text-align: center;  
}
  • 文本装饰:设置或删除文本的装饰线。
css 复制代码
a {  
    text-decoration: none;  
}
3.2 字体样式
  • 字体家族:设置文本的字体。
css 复制代码
body {  
    font-family: Arial, sans-serif;  
}
  • 字体粗细:设置文本的粗细。
css 复制代码
.bold-text {  
    font-weight: bold;  
}
  • 字体风格:设置文本的斜体。
css 复制代码
.italic-text {  
    font-style: italic;  
}
3.3 列表样式
  • 列表样式类型:设置列表项前面的标记类型。
css 复制代码
ul {  
    list-style-type: none; /* 移除列表项前的标记 */  
}
3.4 背景样式
  • 背景颜色:设置元素的背景颜色。
css 复制代码
.bg-color {  
    background-color: lightblue;  
}
  • 背景图片:设置元素的背景图片。
css 复制代码
.bg-image {  
    background-image: url('background.jpg');  
}
4. 显示属性
  • display:控制元素的显示类型。
css 复制代码
.hidden {  
    display: none; /* 隐藏元素 */  
}
相关推荐
黑云压城After3 小时前
H5使用环信实现视频或语音通话
前端·javascript·vue.js
rit84324994 小时前
基于MATLAB的模糊图像复原
开发语言·matlab
fie88894 小时前
基于MATLAB的声呐图像特征提取与显示
开发语言·人工智能
未来之窗软件服务4 小时前
自己写算法(九)网页数字动画函数——东方仙盟化神期
前端·javascript·算法·仙盟创梦ide·东方仙盟·东方仙盟算法
_extraordinary_5 小时前
Java SpringMVC(二) --- 响应,综合性练习
java·开发语言
你的人类朋友5 小时前
什么是断言?
前端·后端·安全
FIN66686 小时前
昂瑞微:实现精准突破,攻坚射频“卡脖子”难题
前端·人工智能·安全·前端框架·信息与通信
椎4956 小时前
苍穹外卖前端nginx错误之一解决
运维·前端·nginx
@。1246 小时前
对于灰度发布(金丝雀发布)的了解
开发语言·前端
我有一棵树6 小时前
前端图片加载失败、 img 出现裂图的原因全解析
前端