代码小笔记-css

最新推荐文章于 2024-05-23 13:56:44 发布

mt23

最新推荐文章于 2024-05-23 13:56:44 发布

阅读量126

点赞数

分类专栏：代码小笔记文章标签： css html vue.js

本文链接：https://blog.youkuaiyun.com/mathcoder23/article/details/120665556

版权

代码小笔记专栏收录该内容

7 篇文章

订阅专栏

scss笔记

选中当前节点的仅下一级节点

& > div {
    padding: 15px 20px 10px;
    margin-right: 10px;
    border: 1px solid #ddd;
    border-radius: 1px;
}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

mt23

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

CSS 选择器

qq_46291038的博客

08-19

581

一：选择器的种类 1.标签选择器通过标签的名字，修改 css 样式 div{ width:200px; height:300px; } 2.通配符选择器 • 选择页面中所有的元素 *{ margin:0; padding:0; } 3.属性选择器例子：例如<td>标签的一些符号含义： td[class] 带有class属性的td标签 td[class = ”a”] 类名为“a”的d.

CSS子元素选择器

听海边涛声

06-01

368

CSS子元素选择器

参与评论您还未登录，请先登录后发表或查看评论

scss的基本用法

qq_37822457的博客

05-23

1884

node版本与sass版本对应关系，不对应会报错哦。在vue.config.js里配置scss全局样式。mixin.scss编写全局变量。页面的style中直接使用。text.scss声明变量。

c3基础 CSS基础选择器总结

hfdxmz_3的博客

05-27

169

基础选择器作用特点使用情况用法标签选择器可以选出所有相同的标签，比如p 不能差异化选择较多 p {color：red;} 类选择器可以选出1个或多个标签可以根据需求选择非常多 .nav {color: red;} id选择器一次只能选择一个标签 ID属性只能在每个HTML中出现一次一般和js搭配 #nav{color:red;} 通配符选择器选择所有标签选择

scss子组合选择器和同层组合选择器：＞ + ~

yy168888的博客

10-26

1万+

子组合选择器> 子组合选择器>：选择一个元素的直接子元素 //选择了.search这类下的所有直接子元素div(不会选择到子div下面的孙div) .search{ > div{ border:1px red solid } } 同层相邻组合选择器 + 同层相邻组合选择器+: 选择同级的并紧跟在后的元素 //选择header同级的并且紧跟着header之后的p元素 header +p{ font-size: 2em } 同层全体组合选择器 ~ 同层全体组合选择器~:

SCSS的基本使用指南

qq_26584937的博客

05-23

795

SCSS（Sassy CSS）是Sass（Syntactically Awesome Stylesheets）的扩展语法，是一种CSS预处理器，允许你编写更简洁、结构化和易维护的CSS代码。SCSS使得CSS的编写更加高效和可维护，通过变量、嵌套、混合器、继承和运算等特性，你可以更方便地管理和组织你的样式代码。通过上述步骤，你应该能够开始在你的项目中使用SCSS。如果你使用Webpack进行项目构建，可以使用sass-loader加载SCSS文件。通过上述配置，你就可以在项目中直接使用SCSS文件了。

EPICSSNS-CSS-4.5.0-LINUX 32位版本 EPICS Control System Studio (CS

03-24

在压缩包`sns-css-4.5.0`中，可能包含了以下内容： - 安装脚本和指南：指导用户如何在Linux系统上安装和配置CSS。 - CSS可执行文件和库：包含运行CSS所需的二进制文件和动态链接库。 - 示例和模板：提供预配置的...

前端学习笔记-CSS(1)

08-22

前端学习笔记-CSS(1) CSS笔记，包括代码，更详细的需要查看CSS的API。

谷歌师兄的leetcode刷题笔记-html-javascript-css-jquery-assassins-creed-card-memor

06-30

谷歌师兄的leetcode刷题笔记HTML/CSS/JavaScript - 刺客信条卡片记忆游戏一个简单的卡片记忆游戏，灵感来自我的兄弟 Pasja Informatyki 和刺客信条游戏系列。目录基本信息我制作的这款小游戏是送给喜欢刺客信条...

斑码教育大前端课堂笔记-css第一天

11-24

预处理器如Sass、Less和Stylus，提供更高级的功能如变量、嵌套规则、混合和函数，简化CSS编写，提高代码复用性和可维护性。九、Flexbox布局 Flexbox（弹性盒布局）是现代CSS布局的标准，适用于单行或单列的弹性...

谷歌师兄的leetcode刷题笔记-cssi-1-html-lab-student-walkthrough:CSSi-1-html-lab-s

06-30

复制下面的样板代码！ <!DOCTYPE html> <html> <head> <title> My personal webpage! </title> </head> <body> <h1>Heading Some text about you! </body> </...

scss语法

MISS_zhang_0110的博客

08-04

2261

SASS允许用户编写自己的函数。

CSS 预处理语言之 Scss 篇

blog_Y的博客

10-11

441

简介 1. Sass 和 Scss Sass 和 Scss 其实是同一种东西，我们平时都称之为 Sass；Scss 是 Sass 3 引入新的语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能。也就是说，任何标准的 CSS3 样式表都是具有相同语义的有效的 Scss文件。两者之间不同之处有以下两点：文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 Scss 是以“...

SASS的基本语法

别来...无恙*的博客

02-27

658

了解 sass sass是 css 的预编译语言，可以把文件编译成 css 文件。 sass可以定义变量、可以定义函数、可以有 if 语句可以有 for 循环语句，能使你敲代码的速度的变得更高更快更强。 .sass 文件和 .scss 文件的区别 + 在 .scss 文件里面和写 css 的语法基本一致 + 在 .sass 文件里面就没有大括号和分号, 全部依靠缩进来维持关系 + 这两个...

scss/sass 快速入门

12-21

3979

1.1.定义变量 $开头就可以定义点亮：比如$sidebar-width、$highlight-color 1.2.变量引用 1.3下划线 '_' 和中划线 '-' sass的变量名可以与css中的属性名和选择器名称相同，包括中划线和下划线 2.1嵌套规则 css中重复写选择器是非常恼人的。如果要写一大串指向页面中同一块的样式时，往往需要一遍又一遍地写同一个ID...

CSS 选择所有子元素添加样式

最新发布

03-30

### 关于CSS代码学习笔记、教程与示例 #### CSS基础知识概述对于初学者来说，掌握CSS并不困难，但由于其属性繁多，逐一记忆并非明智之举。建议通过实践结合在线资源逐步熟悉常用属性及其功能[^1]。以下是几个重要的概念以及对应的代码实例： --- #### 1. **CSS盒子模型** CSS盒子模型是理解布局的核心部分之一。每个HTML元素都可以看作是一个矩形框，由内容区(content)、填充(padding)、边框(border)和外边距(margin)组成[^2]。 ```css /* 示例 */ .box { width: 200px; height: 100px; padding: 10px; border: 2px solid black; margin: 20px; } ``` 上述代码定义了一个具有固定宽度和高度的盒子，并设置了内部间距、外部边界线及周围空白区域。 --- #### 2. **层叠性 (Cascading)** 层叠性是指当多个规则应用于同一个元素时，浏览器会按照优先级决定最终应用哪条规则。具体顺序如下： - 浏览器默认样式 - 外部样式表 - 内嵌样式 (<style>标签内的样式) - 行内样式 (`style` 属性) 更高权重的选择器可以覆盖低权重规则。 ```html  <div style="color: red;">这是一个红色文字</div> <style> div { color: blue; } </style> ``` 在这个例子中，“red”作为行内样式的颜色值会被保留下来，而忽略掉蓝色声明。 --- #### 3. **并集选择器** 并集选择器允许我们一次性为多个类名或者ID设定相同的样式。为了增强代码可维护性和清晰度，推荐每一项单独占一行书写[^3]。 ```css .haha1, .haha2, .haha3 { font-size: 30px; font-family: 楷体; } ``` 以上片段展示了如何利用逗号分隔不同类别名称来统一它们的文字大小与字体族属特性。 --- #### 4. **背景图像与重复模式** background-image用于加载一张图片到指定区域内显示；同时可以通过调整background-repeat控制该图案是否平铺整个容器表面[^4]。 ```css .example { background-image: url('image.jpg'); background-repeat: no-repeat; /* 或 repeat-x / repeat-y */ } ``` 这里指定了一个名为'image.jpg' 的图形文件地址，并且禁用了自动复制行为。 --- #### 5. **伪元素 (::before 和 ::after)** 这些特殊标记能够让我们向现有DOM结构注入额外的内容而不改变原始文档流。值得注意的是，在创建之前需要明确指定content参数值[^5]。 ```css p::before { content: '提示:'; } p::after { content: ''; } ``` 此段落前加上了“提示:”，而后附加了一串空字符串表示结束标志。 --- ### 总结综上所述，从基础语法到高级技巧，合理运用各种工具和技术手段可以帮助开发者更高效地完成网页设计工作。希望所提供的信息能对你有所帮助！