【海贼王航海日志:前端技术探索】CSS你了解多少?(一)

简介: 【海贼王航海日志:前端技术探索】CSS你了解多少?(一)

1 -> CSS是什么

层叠样式表(Cascading Style Sheets)。

CSS能够对网页中元素位置的排版进行像素级精确控制,实现美化页面的效果。能够做到页面的样式和结构分离。

2 -> 基本语法规范

选择器 + {一条/N条声明}

  • 选择器决定针对谁修改。
  • 声明决定修改什么。
  • 声明的属性是键值对。使用:区分键值对,使用:区分键和值。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 
    <style>
    p {
        /* 设置字体颜色 */
        color: red;
        /* 设置字体大小 */
        font-size: 30px;
    }
    </style>
 
</head>
 
<body>
    
    <p>One Piece</p>
 
</body>
</html>

展示结果:

注意:

  • CSS要写到style标签中。
  • style标签可以放到页面任意位置。一般放到head标签内。
  • CSS使用 /* */ 作为注释。(使用ctrl + /快速切换)。

3 -> 引入方式

3.1 -> 内部样式表

写在 style 标签中。嵌入到 html 内部。理论上来说style放到html的哪里都行。但是一般都是放到 head 标签中。


优点:这样做能够让样式和页面结构分离。


缺点:分离的还不够彻底,尤其是CSS内容多的时候。


前面写的代码主要都是使用了这种方式。实际开发中不常用。

3.2 -> 行内样式表

通过style属性,来指定某个标签的样式。

只适合于写简单样式。只针对某个标签生效。

缺点:不能写太复杂的样式。

这种写法优先级较高,会覆盖其他的样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 
    <style>
    div {
        color: red;
    }
    </style>
 
</head>
 
<body>
 
    <div style="color:skyblue">One Piece是真实存在的!!!</div>
    
</body>
</html>

展示结果:

可以看到,red颜色被覆盖了。

3.3 -> 外部样式

实际开发中最常用的方式。

  1. 创建一个css文件。
  2. 使用link标签引入css。
<link rel="stylesheet" href="[CSS文件路径]">

创建test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>外部样式</title>
    <link rel="stylesheet" href="style.css">
</head>
 
<body>
    
    <div>One Piece是真实存在的!!!</div>
 
</body>
</html>

创建style.css

div {
    color: skyblue;
}

展示结果:

注意:不要忘记link标签调用CSS,否则不生效。


优点:样式和结构彻底分离了。


缺点:受到浏览器缓存影响,修改之后不一定立刻生效。


关于缓存:


这是计算机中一种常见的提升性能的技术手段。


网页依赖的资源(图片/CSS/JS等)通常是从服务器上获取的。如果频繁访问该网站,那么这些外部资源就没必要反复从服务器获取。就可以使用缓存先存起来(就是存在本地磁盘上了)。从而提高访问效率。


可以通过 ctrl + F5 强制刷新页面,强制浏览器重新获取css文件。

4 -> 代码风格

4.1 -> 样式格式

1. 紧凑风格

p { color: red; font-size: 30px;}

2. 展开风格

p {
    color: red;
    font-size: 30px;
}

样式大小写

虽然CSS不区分大小写,我们开发时统一使用小写字母。

空格规范

  • 冒号后面带空格。
  • 选择器和 { 之间也有一个空格。

5 -> 选择器

5.1 -> 选择器的功能

选中页面中指定的标签元素。

要先选中元素,才能设置元素的属性。就好比SC2,War3这样的游戏,需要先选中单位,再指挥该单位行动。

5.2 -> 选择器的种类

以下内容只是CSS2标准中支持的选择器,在CSS3中还做出了一些补充。

1. 基础选择器:单个选择器构成的。

  • 标签选择器
  • 类选择器
  • id选择器
  • 通配符选择器

2. 复合选择器:把多种基础选择器综合运用起来。

  • 后代选择器
  • 子选择器
  • 并集选择器
  • 伪类选择器

CSS选择器参考手册

5.3 -> 基础选择器

5.3.1 -> 标签选择器

特点:

  • 能快速为同一类型的标签都选择出来。
  • 但是不能差异化选择。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            color: red;
        }
        div {
            color: green;
        }
    </style>
 
</head>
 
<body>
    
    <p>王路飞</p>
    <p>王路飞</p>
    <p>王路飞</p>
 
    <div>刘索隆</div>
    <div>刘索隆</div>
    <div>刘索隆</div>
 
</body>
</html>

展示结果:

5.3.2 -> 类选择器

特点:

  • 差异化表示不同的标签。
  • 可以让多个标签的都使用同一个标签。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    .blue {
        color: skyblue;
    }
    </style>
 
</head>
<body>
    
       <div class="blue">王路飞</div>
       <div>王路飞</div>
 
</body>
</html>

展示结果:

语法细节:


类名用 . 开头的。

下方的标签使用class属性来调用。

一个类可以被多个标签使用,一个标签也能使用多个类(多个类名要使用空格分割,这种做法可以让代码更好复用)。

如果是长的类名,可以使用 - 分割。

不要使用纯数字,或者中文,以及标签名来命名类名。

代码示例:使用多个类名。

注意:

一个标签可以同时使用多个类名。这样做可以把相同的属性提取出来,达到简化代码的效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    .box {
        width: 200px;
        height: 150px;
    }
    .red {
        background-color: red;
    }
    .green {
        background-color: green;
    }
    </style>
 
</head>
<body>
    
       <div class="box red"></div>
       <div class="box green"></div>
       <div class="box red"></div>
 
</body>
</html>

展示结果:

5.3.3 -> id选择器

和类选择器类似。

  • CSS中使用#开头表示id选择器。
  • id选择器的值和html中某个元素的id值相同。
  • html的元素id不必带#。
  • id是唯一的,不能被多个标签使用(和类选择器最大的区别)。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    #shh {
        color: pink;
    }
    </style>
 
</head>
 
<body>
 
       <div id="shh">沈哈哈</div>
    
</body>
</html>

展示结果:

类比:

姓名是类选择器,可以重复。

身份证号码是id选择器,是唯一的。

5.3.4 -> 通配符选择器

使用*的定义,选取所有的标签。

1. * {
2. color: red;
3. }

页面的所有内容都会被改成红色。不需要被页面结构调用。

5.3.5 -> 基础选择器小结

image.png

5.4 -> 复合选择器

5.4.1 -> 后代选择器

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

元素1 元素2 {样式声明}

  • 元素1和元素2要使用空格分割。
  • 元素1是父级,元素2是子级,只选元素2,不影响元素1。

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

test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
 
<body>
    
    <ul>
        <li>王路飞</li>
        <li>王路飞</li>
        <li>王路飞</li>
    </ul>
 
    <ol>
        <li>刘索隆</li>
        <li>刘索隆</li>
        <li>刘索隆</li>
    </ol>
 
</body>
</html>

style.css

1. ol li {
2. color: red;
3. }

展示结果:

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

test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
 
<body>
    
    <ul>
        <li>王路飞</li>
        <li>刘索隆</li>
        <li>
            <a href="#">山治君</a>
        </li>
    </ul>
 
</body>
</html>

style.css

ul li a {
    color: yellow;
}
/* 或者 */
ul a {
    color: yellow;
}

展示结果:

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

test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
 
<body>
    
    <ol class="one">
        <li>王路飞</li>
        <li>山治君</li>
        <li>
            <a href="#">刘索隆</a>
        </li>
        <li>
            <a href="#">刘索隆</a>
        </li>
        <li>
            <a href="#">刘索隆</a>
        </li>
    </ol>
 
</body>
</html>

style.css

.one li a {
    color: green;
}

展示结果:

5.4.2 -> 子选择器

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

元素1>元素2 { 样式声明 }

  • 使用大于号分割。
  • 只选亲儿子,不选孙子元素。

test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    <div class="two">
        <a href="#">王路飞</a>
        <p><a href="#">刘索隆</a></p>
    </div>
 
</body>
</html>

后代选择器的写法,会把“王路飞”和“刘索隆”都选中。  

style.css

1. .two a {
2. color: red;
3. }

展示结果:

子选择器的写法,只选“王路飞”。

style.css

.two>a {
    color: red;
}

展示结果:

5.4.3 -> 并集选择器

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

元素1, 元素2 { 样式声明 }

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

代码示例:

test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    <div>王路飞</div>
    <h3>刘索隆</h3>
    <ul>
        <li>山治君</li>
        <li>山治君</li>
    </ul>
 
</body>
</html>

1. 把“王路飞”和“刘索隆”颜色改成红色。

style.css

1. div, h3 {
2. color: red;
3. }

展示结果:

2. 把“山治君”一起改成红色。

style.css

div,
h3,
ul>li {
    color: red;
}

展示结果:

5.4.4 -> 伪类选择器

1. 链接伪类选择器

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

示例:

test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
 
<body>
    
    <a href="#">王路飞</a>
 
</body>
</html>

style.css

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

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


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


注意:


按照LVHA的顺序书写,例如把active拿到前面去,就会导致active失效。(记忆规则“绿化”)

浏览器的a标签都有默认样式,一般实际开发都需要单独制定样式。

实际开发主要给链接做一个样式,然后给hover做一个样式即可。link、visited和active用的并不多。

a {
    color: black;
}
a:hover {
    color: red;
}

2. :focuse伪类选择器

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

test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
 
<body>
    
    <div class="three">
        <input type="text">
        <input type="text">
        <input type="text">
        <input type="text">
    </div>
 
</body>
</html>

style.css

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

展示结果:

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

5.4.5 -> 复合选择器小结

image.png

目录
打赏
0
2
2
0
20
分享
相关文章
|
10天前
|
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
29 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
CSS 居中技术完全指南:从基础到高级应用
本文详细介绍了 CSS 中常用的居中方法,涵盖水平居中、垂直居中及同时实现两者的方法。
50 12
《前端技术基础》第02章 CSS基础【合集】
层叠样式表(Cascading Style Sheets,简称CSS)是一种用于描述网页视觉表现的语言。该语言与HTML协同工作,其中HTML负责构建网页的结构,而CSS则负责定义网页的外观和格式。CSS通过一系列规则来实现样式的应用,这些规则由选择器(Selectors)和声明块(Declaration Blocks)构成。选择器的作用是明确指出哪些HTML元素将受到特定样式规则的影响,而声明块则包含了具体的样式声明,这些声明定义了元素的视觉属性和相应的值。
54 1
前端 CSS 优化:提升页面美学与性能
前端CSS优化旨在提升页面美学与性能。通过简化选择器(如避免复杂后代选择器、减少通用选择器使用)、合并样式表、合理组织媒体查询,可减少浏览器计算成本和HTTP请求。利用硬件加速和优化动画帧率,确保动画流畅。定期清理冗余代码并使用缩写属性,进一步精简代码。这些策略不仅加快页面加载和渲染速度,还提升了视觉效果,为用户带来更优质的浏览体验。
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
69 6
Flutter前端开发中的调试技巧与工具使用方法,涵盖调试的重要性、基本技巧如打印日志与断点调试、常用调试工具如Android Studio/VS Code调试器和Flutter Inspector的介绍
本文深入探讨了Flutter前端开发中的调试技巧与工具使用方法,涵盖调试的重要性、基本技巧如打印日志与断点调试、常用调试工具如Android Studio/VS Code调试器和Flutter Inspector的介绍,以及具体操作步骤、常见问题解决、高级调试技巧、团队协作中的调试应用和未来发展趋势,旨在帮助开发者提高调试效率,提升应用质量。
90 8
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
90 5
前端懒加载:提升页面性能的关键技术
前端懒加载是一种优化网页加载速度的技术,通过延迟加载非首屏内容,减少初始加载时间,提高用户访问体验和页面性能。
除了 CSS3,还有哪些技术可以实现动画效果?
除了 CSS3,还有哪些技术可以实现动画效果?
157 63

热门文章

最新文章

  • 1
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    12
  • 2
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    39
  • 3
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    3
  • 4
    详解智能编码在前端研发的创新应用
    14
  • 5
    巧用通义灵码,提升前端研发效率
    19
  • 6
    智能编码在前端研发的创新应用
    34
  • 7
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    9
  • 8
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
    31
  • 9
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    11
  • 10
    以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
    21
  • AI助理

    你好,我是AI助理

    可以解答问题、推荐解决方案等