【前端三件套-CSS】Emmet语法,选择器的分类,三大属性

简介: 【前端三件套-CSS】Emmet语法,选择器的分类,三大属性

前言


CSS 是“Cascading Style Sheet”的缩写,中文意思为“层叠样式表”,它是一种标准的样式表语言,用于描述网页的表现形式


1.Emmet语法


①生成多个相同的标签eg:div*3(即生成三个div标签)


②包含的标签eg:ul>li*3(即生成一个包含三个li的ul标签)


③兄弟级标签eg:div+p(即生成一个div标签的同时也生成一个p标签{他俩是同级的})



④生成序列类名为demo的div标签($自增符号)



⑤在生成标签内部填写内容可以用“标签”{}即



快速格式化代码:shift+alt+f


2.选择器


2.1复合选择器

2.1.1后代选择器

即(元素一 元素二{修改样式}



元素1和元素2中间用空格隔开,元素1是父级,元素2是子级,最终选择的是元素2


2.1.2子元素选择器

元素1和元素2用大于号隔开 元素1是父级,元素二是子级 最终改变的是元素2 元素2必须包含在元素1当中



2.2并集选择器

并集选择器用“,”隔开,任何选择器都可以成为并集选择器的一部分且并集选择器通常用于集体声明。并集选择器通常竖着写,最后一个选择器/标签后面不需加“,”。


2.3伪类选择器

伪类选择器是用来向某些选择器中添加特殊效果,如给链接添加特殊效果,或者选第一个或第n个元素。伪类选择器用“:”来表示,伪类选择器有分为 链接伪类 结构伪类等


2.3.1链接伪类


①选择未访问的链接



②选择已被访问的链接



③选择鼠标指针悬浮在某链接上



④选择链接(鼠标按下并未弹起的状态)



注意事项:按LVHA(link,visited,hover,active)顺序声明,为确保链接伪类生效。


在实际操作中,链接样式要单独指定。一般常使用a:hover。


2.3.2:focus伪类选择器


总结:



3.CSS元素显示


元素显示模式:元素显示模式即是元素以什么方式进行显示eg: <div> 自己占一行,比如一行可以放多个 <span>


HTML中分为 行内元素和块元素两种类型。


常见的块元素:h1~h6,p,div,ul,ol,li,footer、header、section等。div是最经典的块元素。


3.1块元素

块元素的特点:


①自己独占一行


②宽度,高度,外边距,内边距都可以控制。


③宽度默认的是父级宽度的100%。


④是一个容器盒子,里面可以放行内块或者块级元素


注意事项:文字类元素内不能使用块元素,<p>标签主要存放于文字,<p>元素内不能放块元素(div)。h1~h6也是文字块级标签,故不能放其他块级元素。


3.2行内元素

常见的行内元素(内联元素)有:


a,strong,b,em,i,del,s,ins,u,span等span是典型的行内元素


行内元素特点:


①一行可以显示多个行内元素


②直接设置的高宽是无效的


③本身的宽度等于默认宽度


④行内元素只能容纳文本和其他的行内块元素


注意:a标签里面可以放块级元素,但是不能放a标签。


行内块元素:


特点行内块元素的特点:


①和相邻行内元素(行内块)在一行上,但是他们之间会有空白缝隙。一行可以显示多个 (行内元素特点)。


②默认宽度就是它本身内容的宽度(行内元素特点)。


③高度,行高、外边距以及内边距都可以控制(块级元素特点)。


元素显示总结


显示模式的转换


就是一种模式元素需要另外一种模式的特性


转为块元素(display:block)



转化为行内元素(display:inline)



转换位行内块元素:


单行文字剧中的原理:是把的height大小和link-height大小height设置相同



4.CSS三大属性


层叠性,继承性,优先级


层叠性:给同一个元素添加多个相同的样式,最终会以最后一次设定的样式来呈现。


继承性:例如div内有一个p,如果只给div设置样式那么div里面的p也会随之改变样式,特殊情况行高继承。


优先级:权重叠加若为复合选择器,则会有权重叠加,需要进行权重的计算。eg:


ul li (0,0,0,1+0,0,0,1)的权重大于li(0,0,0,1)


5.C3新增属性


①圆角边框(border-radius:length,length可以是px单位也可以是百分比):radius(圆的半径)原理:椭圆与边框交集形成圆角的效果;


②盒子阴影(box-shadow):



阴影:默认的是为外阴影(ouset),outset不需要写到样式内容里面,否则会使阴影样式不起作用


③文字阴影(就是用即可):


目录
相关文章
|
23天前
|
Web App开发 前端开发 JavaScript
揭秘!前端大牛们如何巧妙利用CSS3,打造炫酷视觉效果!
【10月更文挑战第31天】前端开发面临复杂布局的挑战,本文介绍了几种提升开发效率和代码质量的工具和技术。基础的HTML和CSS可以应对大部分布局需求,而Firefox开发者工具、VS Code、Vue、React等则能应对更复杂的布局,帮助开发者构建高性能、用户友好的网页应用。
25 4
|
1月前
|
Web App开发 前端开发 iOS开发
css所有缩写属性,CSS属性简写整理
css所有缩写属性,CSS属性简写整理
24 1
|
1月前
|
前端开发 JavaScript UED
深入理解与应用 CSS 伪类选择器
【10月更文挑战第23天】通过以上对 CSS 伪类选择器的深入探讨,我们可以更好地理解和应用它们,为网页设计和开发带来更丰富、更灵活的样式效果。同时,要注意在实际应用中根据具体情况合理选择和使用伪类选择器,以达到最佳的设计效果和用户体验。
35 2
|
2月前
|
前端开发 JavaScript
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
195 1
|
2月前
|
前端开发
CSS 中哪些属性可以继承
在 CSS 中,属性分为可继承与不可继承。可继承属性会在子元素中沿用父元素的样式设定。常见可继承属性包括:文本属性(如 `font-family`, `color`),列表属性(如 `list-style`),表格布局属性(如 `border-collapse`),以及其他如 `visibility` 和 `direction` 等属性。正确理解这些属性有助于更高效地进行样式设计。
|
2月前
|
前端开发 容器
前端技术分享:利用CSS Grid布局实现响应式设计
【10月更文挑战第1天】前端技术分享:利用CSS Grid布局实现响应式设计
|
1月前
|
前端开发
css简写属性
css简写属性
30 0
|
2月前
|
前端开发 JavaScript
如何在CSS中添加自定义属性
如何在CSS中添加自定义属性
16 0
|
2月前
|
前端开发
运用CSS伪类与属性,巧妙实现背景图片旋转效果
运用CSS伪类与属性,巧妙实现背景图片旋转效果
36 0
|
2月前
|
前端开发
哪些 CSS 属性可以继承?
哪些 CSS 属性可以继承?
48 0