CSS笔记---kalrry

最新推荐文章于 2024-07-24 22:39:14 发布
最新推荐文章于 2024-07-24 22:39:14 发布
阅读量192 收藏
点赞数
分类专栏： HTML/CSS 文章标签： css web
kalrry
本文链接：https://blog.csdn.net/weixin_45406712/article/details/117552245
版权

CSS笔记---kalrry

CSS引入方式

CSS引入方式分为三种：行内样式表；内部样式表；外部样式表

名称方式备注
行内样式表在标签内部写入style="#"属性便可权重高；适合简单样式的修改，控制一个标签
内部样式表部分结构与样式分离控制一个页面
外部样式表在<head>头部通过<link>标签引用格式：link rel="stylesheet" href="css name"
控制多个页面

元素的四种类型

内联(行内)元素：inline
块元素：block
内联(行内)块元素：inline-block
弹性元素：flex

CSS选择器

分为两大类：基础选择器和组合选择器

类别方法作用
基础选择器
分为四大类		标签选择器
无前缀		把某一标签选择并赋予样式
优点：快速为同类标签统一设置样式
缺点：不能设置差异化选择
calss类选择器
前缀为"."号		把某一类class名选出并赋予样式
可设置多类名写法<class="name1 name2">
灵活运用多类名写法，注意写法规则
id选择器
前缀为"#"号		样式用#号定义，结构用id调用
id的name不可被其它id重复使用，只能调用一次
一般搭配JavaScript使用
通配符选择器通配符选择器用"*"定义，表示选取所有元素
通配符不需要调用，自动给所有的元素使用样式
只有在特殊情况使用，如清除所有元素的内外边距
复合选择器
分为四大类		后代选择器(重要)方法:套娃式选择；教程传送门
子选择器(重要)方法:选儿子不选孙子；如：nav>a；教程传送门
并集选择器(重要)方法:任何选择器都可以作为并集选择器一部分
如：div, p, .pig li {}；教程传送门
并集选择器各元素间用,逗号隔开，最后一个元素不加逗号
伪类选择器为元素添加特殊效果，书写格式是前面加[:]冒号
a:link(把没有访问过的链接选出来更改样式)；
a:visited(把访问过的链接选出来更改样式)
a:hover(把鼠标经过链接选出来更改样式)
a:active(把鼠标正在按下还没有弹起来时的链接选出来更改样式)
:focus伪类选择器，用于选取获得焦点的表单元素；教程传送门
有严格的顺规则：LVHA；link、visited、over、active
教程传送门

CSS字体属性

属性作用备注
font-family定义字体集常用字体：‘Microsoft YaHei’，Tahoma，Arial，‘Hiragino Sans GB’
font-size定义字体尺寸浏览器默认大小一般为16px
font-weight定义字体加粗/变细可用<strong>代替；700=bold;400=normal
font-style定义字体风格，如倾斜等italic，normal
font字体属性简写规范font:font-style font-weight font-size/line-height font-family;
例如：font:italic 400 16px 20 'microsoft yahei'
有严格的逻辑顺序，size与family属性不可省略

CSS文本属性

属性作用备注
color定义字体颜色预定义颜色值表示；十六进制表示；RGB代码表示
text-align定义文本对齐方式left；center；right
text-decoration装饰文本none取消下划线；underline下划线；line-through删除线；overline上划线
text-indent定义文本缩进常用em相对单位设置
line-height定义文本行间距行间距等于文字高度与上下行间距之和

Emmet语法

用简写形式来提高html与css的编写速度

标题方法备注
快速生成HTML
的语法结构		输入标签名，按tab可快速生成标签对如：div tab
生成多个相同标签，标签名+*+num如：div*2；快速生成两对div
父子与兄弟级关系；父子用>号；兄弟用+号如父子：ul>li tab；兄弟:div+p
快速生成带有类和id名的标签；标签+./#+name如生成类名：div.name tab；生成id名：div#name tab
生成的div类名有顺序,如：标签+./#+name$*3如：div.name$*3；div#name$*3
生成的标签里面默认带文字；div{文字}*num如：div{文字}*5；如：div{name$}*5
快速生成CSStac快速生成text-align:center大都是以首字母缩写为简写格式
w200：width: 200px;
ti20em：text-indent: 20em
举一反三

CSS背景属性

属性作用备注
background-color定义背景颜色默认值：transparent(透明的)；
background-image: url()定义背景图片常用做图片插入，比标签插入法更适合图片定位布局
background-repeat定义背景图平铺规则repeat、no-repeat、repeat-x、repeat-y
background-position定义背景图片精确位置后面可跟方位名词如：left center；或者x、y坐标；或者混合：20px center
background-attachment定义背景是否滚动fixed；scroll
background简写
(重要)无顺序要求		简写背景属性代码如：background:blank url() no-repeat fixed center top

CSS三大特性

属性作用备注
层叠性在样式冲突情况下，遵循就近原则执行教程传送门
继承性子继承父样式属性：在子没有样式属性定义，则继承父级样式属性并不是所有样式都会继承，大部分指继承父级文本样式
行高的继承；教程传送门
优先级当给一个元素指定了多个选择器时，根据权重执行
权重：!important>行内>ID>类>标签选择器>继承和*
复合选择器有权重叠加的问题； 		行高的继承；教程传送门

CSS盒子模型

页面布局的三大核心：盒子模型，浮动和定位

属性作用备注
盒子包含：边框border，内边距padding，外边距margin，内容content
border简写没有顺序；如：border:1px solid red		border：-width；-style；-color
可指定border的四边：top bottom left right
padding问题：教程传送门
盒子圆角border-radius: 0px 0px 0px 0px;
盒子阴影box-shadow: 0px 0px 0px 0px color inset内阴影;教程传送门
盒子浮动float
清除浮动教程传送门
1.额外添加块级空标签法，这个盒子必须是块级元素；
2.给父级元素添加overflow:hidden；
3.给父级元素添加after伪元素:教程传送门
4.给父级元素添加双伪元素;教程传送门
定位float
盒子浮动float
盒子浮动float
盒子浮动float
盒子浮动float

VSCode格式化代码快捷键

方法一：

Win下格式化文档Shift+Alt+F
Mac下格式化文档Shift+Option+F

方法二：实现自动保存格式化代码,如下：
1、【文件】→【首选项】→【设置】
2、搜索emmet.include;
3、在setting.json下的【用户】中添加以下语句：

    "editor.formatOnType":true,
    "editor.formatOnSave":true

只需要设置一次，即可实现自动保存格式化代码
看不懂的进传送门.

常用的类名规范

头部：header
栏目标题：title
内容：content、container
版权：copyright
搜索：search
标签页：tab
文章列表：list
提示信息：msg
小技巧：tips
导航：nav
子导航：subnav
菜单：menu
子菜单：submenu
滚动：scroll
友情链接：friendlink
侧栏：sidebar
栏目：column
页面外围控制整体宽度：wrapper
左右中：left、right、center
功能区：shop
按钮：btn
当前的：current
图标：icon
注释：note
加入：joinus
指南：guild
服务：service
注册：regsiter
状态：status
投票：vote
合作伙伴：partner
登录：login
登陆条：loginbar
标志：logo
广告：banner
页面主体：main
热点：hot
新闻：new
下载：download
尾部/页脚：footer

kalrry
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
CSS笔记-011
08-03
【CSS笔记-011】 CSS，全称Cascading Style Sheet，层叠样式表，是一种用于控制网页外观样式的技术。CSS的主要目的是实现内容与样式的分离，这有利于团队协作，便于代码复用，简化网站的后期维护工作，并且允许对...
CSS笔记-选择器
07-08
本人清风，这次给大家分享本人学习的心得和笔记，记录点点滴滴，用的md格式，这是第一个，CSS选择器
CSS笔记-个人笔记-求权威绕
04-13
CSS笔记，个人笔记，X-mind格式
个人笔记--CSS
11-25
CSS个人笔记，如果有错误和意见，请在评论中提出！！！
学习笔记HTML-css-JS.zip
03-17
学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip 学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip 学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip学习笔记...
网站基本布局CSS
m0_46608027的博客
07-24 759
* 滚动条轨道样式 *//* 滚动条样式 *//* 滑块样式 */
【css】flex布局父元素宽度或高度无法被子元素撑开-bug记录
qq_2511276124的博客
07-24 258
flex布局父元素宽度或高度无法被子元素撑开问题。 解决方案： ==**手动计算子元素内容所占宽高，手动赋值给父元素即可。**==
WebKit引领潮流：CSS环境变量全解析
2401_85342379的博客
07-24 1093
CSS环境变量，也称为CSS自定义属性或CSS变量，是一种在CSS中使用的特殊类型的变量。CSS环境变量是一个强大的CSS特性，它为开发者提供了一种新的方式来创建可维护和可扩展的样式表。通过本文的介绍，读者应该已经了解了CSS环境变量的基本概念、基本语法、使用技巧、浏览器兼容性和性能考虑。通过本文的指导，读者可以开始在自己的项目中尝试使用CSS环境变量，享受更自由的样式定制体验。通过本文的指导，您可以开始在您的网页设计中使用CSS环境变量，提升设计的灵活性和可维护性。在这个例子中，我们定义了两个变量。
CSS实现表格无限轮播
像鱼的博客
07-24 190
在React中，用CSS实现表格无线轮播
【前端 02】新浪新闻项目-初步使用CSS来排版
delepaste的博客
07-23 1282
在CSS中，页面上的每个元素都可以被看作是一个盒子，这个盒子由四个部分组成：内容区域（content）、内边距区域（padding）、边框区域（border）和外边距区域（margin）。这四个部分共同构成了元素的盒模型，决定了元素在页面上的位置和大小。内容区域（Content）：元素的实际内容区域，如文本、图片等。内边距区域（Padding）：内容区域与边框之间的空白区域，用于控制内容与边框的距离。边框区域（Border）：围绕内边距和内容区域的边界，可以设置颜色、宽度和样式。
[微信小程序] css 解决纯数字或字母不自动换行的问题、控制文字行数
Lovely Ruby 的手账
07-24 327
作用：这个属性是一个非标准的Webkit特定属性，它使得元素使用弹性盒模型（Flexbox的前身）。这允许使用-webkit-line-clamp和-webkit-box-orient属性。示例场景：当你有一个固定宽度的容器，而其中的文本可能包含非常长的单词或URL时，这个属性可以防止文本溢出容器边界。作用：这个属性允许在单词内部进行换行，即使单词很长也不会溢出容器，而是会在必要的地方打断单词以适应容器宽度。示例场景：与-webkit-line-clamp一起使用，确保文本按垂直方向截断。
WebKit的CSS Aspect Ratio Box：重塑响应式设计
2401_85760095的博客
07-24 728
的属性，它允许开发者为元素定义一个理想的宽高比。在WebKit中，这个属性得到了良好的支持，使得开发者可以轻松实现响应式设计。属性在大多数现代浏览器中得到了良好的支持，包括基于WebKit的浏览器如Safari。属性是一个强大的工具，它可以帮助开发者在WebKit和其他现代浏览器中轻松实现响应式设计。属性对性能的影响通常很小，但在一些极端情况下，如大量使用或在性能受限的设备上，过度使用可能会对性能产生一定影响。在这个例子中，所有图片都将保持16:9的宽高比，并且宽度为100%。随着Web技术的发展，
CSS（四）——CSS Text(文本）
最新发布
m0_62701594的博客
07-24 1292
颜色属性被用来设置文字的颜色。
【CSS】盒子模型
小秀的博客
07-24 273
CSS 盒⼦模型中，盒⼦的总⼤⼩由这四个部分加起来决定，即 width + padding + border + margin。需要注意的是，CSS 盒⼦模型有两种，分别是标准盒⼦模型和怪异盒⼦模型。CSS 盒⼦模型将每个 HTML 元素表示为⼀个矩形的盒⼦，这个盒⼦包括内容（content）、内边距（padding）、边框（border）和外边距（margin）四个部分。
css快捷代码【超出一行文本显示省略号/超出三行显示省略号/超出n行...】
weixin_43811753的博客
07-24 241
css快捷代码【超出一行文本显示省略号/超出三行显示省略号/超出n行...】
玩转CSS：用ul li +JS 模拟select，避坑浏览器不兼容。
uu0216的博客
07-24 406
在前端的工作中，经常会遇到 selcet控件，但我们用css来写它的样式时候，总是不那么令人满意，各种浏览器不兼容啊有没有？那么，我本篇文章就给大家提供一个思路：用UL 和li 模拟 select 控件，让我们用起来可以避免令人心烦的调整样式问题。
css气泡背景特效
u011626414的专栏
07-23 346
动画是可选的，并且它实际上并不创建额外的气泡效果，而只是让整个背景有微妙的移动。如果你想要更多的气泡，并且希望它们随机出现和消失，你可能需要使用JavaScript或更复杂的CSS动画来生成它们。此外，你可以通过添加更多的伪元素、改变它们的尺寸、颜色、动画延迟和持续时间等来创建更复杂和多样化的气泡效果。要创建一个CSS气泡背景特效，你可以使用CSS的伪元素（属性来创建圆形或椭圆形的“气泡”，以及。属性来设置背景和动画效果。请注意，上述示例中的。
【前端学习笔记】CSS基础一
qq_46056318的博客
07-24 695
一、什么是CSS 1.CSS 介绍 CSS（Cascading Style Sheets，层叠样式表）是一种用来控制网页布局和设计外观的样式语言。它使得开发者可以分离网页的内容（HTML）和表现形式（样式），提高了内容的可访问性，提供了更强的灵活性和控制性，也使得网页的维护和修改变得更加容易。 CSS 如何与 HTML 一起工作： 结构与样式分离： HTML 用于构建网页的结构，定义网页的内容，如文本、图片、链接等。 CSS 用于定义这些结构的表现形式，比如布局、颜色、字体大小和样式等。 引入方
SAPUI5基础知识18 - 自定义CSS和主题色
SAP领域技术博客
07-24 602
本文展示了如何使用自定义的CSS类来调整SAPUI5的展示样式，并通过一个实际的例子，展示了其用法。
css clip-path path
01-07
CSS的clip-path属性用于创建元素的可显示区域，可以通过裁剪方式来显示区域内的部分，而隐藏区域外的部分。clip-path属性的基本语法如下： ```css clip-path: clip-source | basic-shape | geometry-box | none; ``` 其中，clip-source可以是以下几种类型之一： 1. URL：可以使用SVG图像作为裁剪路径。例如： ```css clip-path: url(path/to/clip-path.svg); ``` 2. 基本形状（basic-shape）：可以使用基本形状来定义裁剪路径。基本形状包括矩形（rectangle）、椭圆（ellipse）、圆（circle）、多边形（polygon）等。例如： ```css clip-path: circle(50% at 50% 50%); ``` 3. 几何框（geometry-box）：可以使用元素的边界框或者视口的边界框作为裁剪路径。例如： ```css clip-path: padding-box; ``` 4. none：表示不进行裁剪，元素将完全显示。 下面是一个使用clip-path属性的示例： ```css div { width: 200px; height: 200px; background-color: red; clip-path: circle(50% at 50% 50%); } ``` 以上代码将创建一个宽高为200px的红色正方形，并将其裁剪为一个圆形。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

kalrry

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值