【前端基础篇】CSS基础速通万字介绍(上篇)2

简介: 【前端基础篇】CSS基础速通万字介绍(上篇)

【前端基础篇】CSS基础速通万字介绍(上篇)1:https://developer.aliyun.com/article/1617317

复合选择器

后代选择器

又叫包含选择器. 选择某个父元素中的某个子元素.

元素1 元素2 {样式声明}
  • 元素 1 和 元素 2 要使用空格分割
  • 元素 1 是父级, 元素 2 是子级, 只选元素 2 , 不影响元素1

代码示例: 把 ol 中的 li 修改颜色, 不影响ol

<ul>
    <li>aaa</li>
    <li>bbb</li>
    <li>ccc</li>
</ul>
<ol>
    <li>ddd</li>
    <li>eee</li>
    <li>fff</li>
</ol>

ol li {
    color: red;
}

代码示例: 元素 2 不一定非是 儿子, 也可以是孙子.

<ul>
    <li>aaa</li>
    <li>bbb</li>
    <li><a href="#">ccc</a></li>
</ul>
ul li a {
color: yellow;
}
或者
ul a {
color: yellow;
}

代码示例:可以是任意基础选择器的组合. (包括类选择器, id 选择器)

<ol class="one">
    <li>ddd</li>
    <li>eee</li>
    <li><a href="#">fff</a></li>
    <li><a href="#">fff</a></li>
    <li><a href="#">fff</a></li>
</ol>
.one li a {
    color: green;
}

子代选择器

和后代选择器类似, 但是只能选择子标签.

元素1>元素2 { 样式声明 }
  • 使用大于号分割
  • 只选亲儿子, 不选孙子元素
<div class="two">
    <a href="#">链接1</a>
    <p><a href="#">链接2</a></p>
</div

后代选择器的写法, 会把链接1 和 2 都选中.

.two a {
    color: red;
}

子选择器的写法, 只选链接 1

.two>a {
    color: red;
}

并集选择器

用于选择多组标签. (集体声明)

元素1, 元素2 { 样式声明 }
  • 通过 逗号 分割等多个元素.
  • 表示同时选中元素 1 和 元素 2
  • 任何基础选择器都可以使用并集选择器.
  • 并集选择器建议竖着写. 每个选择器占一行. (最后一个选择器不能加逗号)

代码示例:

<div>苹果</div>
<h3>香蕉</h3>
<ul>
    <li>鸭梨</li>
    <li>橙子</li>
</ul>

1. 把苹果和香蕉颜色改成红色
div, h3 {
    color: red;
}

2. 把鸭梨和橙子也都一起改成红色
div,
h3,
ul>li {
    color: red;
}

伪类选择器

链接伪类选择器

a:link 选择未被访问过的链接
a:visited 选择已经被访问过的链接
a:hover 选择鼠标指针悬停上的链接
a:active 选择活动链接(鼠标按下了但是未弹起)

示例:

.html
<a href="#">小猫</a>

.css
a:link {
    color: black;
    /* 去掉 a 标签的下划线 */
    text-decoration: none;
}
a:visited {
    color: green;
}
a:hover {
    color: red;
}
a:active {
    color: blue;
}

如何让一个已经被访问过的链接恢复成未访问的状态?

清空浏览器历史记录即可. ctrl + shift + delete

注意事项:

  • 按照 LVHA 的顺序书写, 例如把 active 拿到前面去, 就会导致 active 失效. 记忆规则 “绿化”
  • 浏览器的 a 标签都有默认样式, 一般实际开发都需要单独制定样式.
  • 实际开发主要给链接做一个样式, 然后给 hover 做一个样式即可. link, visited, active 用的不多.
a {
    color: black;
}
a:hover {
    color: red;
}

force伪类选择器

选取获取焦点的 input 表单元素.

.html:
<div class="three">
    <input type="text">
    <input type="text">
    <input type="text">
    <input type="text">
</div>

.css:
.three>input:focus {
    color: red;
}

此时被选中的表单的字体就会变成红色.

选择器 作用 注意事项
后代选择器 选择后代元素 可以是孙子元素
子选择器 选择子元素 只能选亲儿子, 不能选孙子
并集选择器 选择相同样式的元素 更好的做到代码重用
链接伪类选择器 选择不同状态的链接 重点掌握 a:hover 的写法.
:focus伪类选择器 选择被选中的元素 重点掌握 input:focus

常用元素属性

CSS 属性有很多, 可以参考文档

CSS 参考手册 (w3school.com.cn)

字体属性

字体

body {
    font-family: '微软雅黑';
    font-family: 'Microsoft YaHei';
}
  • 字体名称可以使用中文,但是不建议
  • 多个字体之间使用逗号分隔. (从左到右查找字体, 如果都找不到, 会使用默认字体. )
  • 如果字体名有空格, 使用引号包裹.
  • 建议使用常见字体, 否则兼容性不好.
<style>
    .font-family .one {
        font-family: 'Microsoft YaHei';
   }
    .font-family .two {
        font-family: '宋体';
   }
</style>

<div class="font-family">
    <div class="one">
       这是微软雅黑
    </div>
    <div class="two">
       这是宋体
    </div>
</div>

大小

p {
    font-size: 20px;
}
  • 不同的浏览器默认字号不一样, 最好给一个明确值. (chrome 默认是 16px)
  • 可以给 body 标签使用 font-size
  • 要注意单位 px 不要忘记.
  • 标题标签需要单独指定大小

注意: 实际上它设置的是字体中字符框的高度;实际的字符字形可能比这些框高或矮

<style>
    .font-size .one {
        font-size: 40px;
   }
    .font-size .two {
        font-size: 20px;
   }
</style>
<div class="font-size">
    <div class="one">
       大大大
    </div>
    <div class="two">
       小小小
    </div>
</div>


粗细

p {
    font-weight: bold;
    font-weight: 700;
}
  • 可以使用数字表示粗细.
  • 700 == bold, 400 是不变粗, == normal
  • 取值范围是 100 -> 900
<style>
    .font-weight .one {
        font-weight: 900;
   }
    .font-weight .two {
        font-weight: 100;
   }
</style>
<div class="font-weight">
    <div class="one">
       粗粗粗
    </div>
    <div class="two">
       细细细
    </div>
</div>


 【前端基础篇】CSS基础速通万字介绍(上篇)3:https://developer.aliyun.com/article/1617334

目录
相关文章
|
11天前
|
Web App开发 前端开发 JavaScript
揭秘!前端大牛们如何巧妙利用CSS3,打造炫酷视觉效果!
【10月更文挑战第31天】前端开发面临复杂布局的挑战,本文介绍了几种提升开发效率和代码质量的工具和技术。基础的HTML和CSS可以应对大部分布局需求,而Firefox开发者工具、VS Code、Vue、React等则能应对更复杂的布局,帮助开发者构建高性能、用户友好的网页应用。
22 4
|
30天前
|
前端开发 JavaScript
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
149 1
|
1月前
|
前端开发 容器
前端技术分享:利用CSS Grid布局实现响应式设计
【10月更文挑战第1天】前端技术分享:利用CSS Grid布局实现响应式设计
|
1月前
|
前端开发 UED 容器
前端技术分享:利用 CSS Grid 实现响应式布局
【10月更文挑战第1天】前端技术分享:利用 CSS Grid 实现响应式布局
51 2
|
1月前
|
Web App开发 前端开发
【前端基础篇】CSS基础速通万字介绍(上篇)3
【前端基础篇】CSS基础速通万字介绍(上篇)
16 1
|
1月前
|
前端开发 JavaScript 容器
前端之CSS基础知识
前端之CSS基础知识
16 0
|
1月前
|
前端开发 容器
【前端基础篇】CSS基础速通万字介绍(下篇)3
【前端基础篇】CSS基础速通万字介绍(下篇)
17 0
|
1月前
|
Web App开发 存储 前端开发
【前端基础篇】CSS基础速通万字介绍(下篇)2
【前端基础篇】CSS基础速通万字介绍(下篇)
18 0
|
1月前
|
前端开发
【前端基础篇】CSS基础速通万字介绍(下篇)1
【前端基础篇】CSS基础速通万字介绍(下篇)
19 0
|
30天前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
127 2