【前端三件套-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不需要写到样式内容里面,否则会使阴影样式不起作用


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


目录
相关文章
|
13天前
|
前端开发 JavaScript 开发者
前端 CSS 优化:提升页面美学与性能
前端CSS优化旨在提升页面美学与性能。通过简化选择器(如避免复杂后代选择器、减少通用选择器使用)、合并样式表、合理组织媒体查询,可减少浏览器计算成本和HTTP请求。利用硬件加速和优化动画帧率,确保动画流畅。定期清理冗余代码并使用缩写属性,进一步精简代码。这些策略不仅加快页面加载和渲染速度,还提升了视觉效果,为用户带来更优质的浏览体验。
|
10天前
|
前端开发 开发者 UED
《前端技术基础》第02章 CSS基础【合集】
层叠样式表(Cascading Style Sheets,简称CSS)是一种用于描述网页视觉表现的语言。该语言与HTML协同工作,其中HTML负责构建网页的结构,而CSS则负责定义网页的外观和格式。CSS通过一系列规则来实现样式的应用,这些规则由选择器(Selectors)和声明块(Declaration Blocks)构成。选择器的作用是明确指出哪些HTML元素将受到特定样式规则的影响,而声明块则包含了具体的样式声明,这些声明定义了元素的视觉属性和相应的值。
28 1
|
2月前
|
Web App开发 前端开发 JavaScript
揭秘!前端大牛们如何巧妙利用CSS3,打造炫酷视觉效果!
【10月更文挑战第31天】前端开发面临复杂布局的挑战,本文介绍了几种提升开发效率和代码质量的工具和技术。基础的HTML和CSS可以应对大部分布局需求,而Firefox开发者工具、VS Code、Vue、React等则能应对更复杂的布局,帮助开发者构建高性能、用户友好的网页应用。
54 4
|
8月前
|
前端开发
web前端开发---CSS基础选择器
web前端开发---CSS基础选择器
56 1
|
4月前
|
前端开发
前端基础(四)_CSS层叠样式表_什么是css_css样式的引入方式_样式表的优先级_样式选择器
本文详细介绍了CSS(层叠样式表)的基本概念、语法规则、引入方式、样式表的优先级和样式选择器。文章解释了CSS的作用,展示了如何在HTML中通过行内样式、内部样式和外部样式引入CSS,讨论了不同CSS选择器的优先级和如何确定最终的样式应用。此外,还强调了使用`!important`规则时的优先级高于行内样式。
154 1
|
6月前
|
前端开发
前端 CSS 经典:好用的 CSS 选择器
前端 CSS 经典:好用的 CSS 选择器
35 0
|
8月前
|
前端开发
前端 css 经典:选择器速记
前端 css 经典:选择器速记
54 0
|
8月前
|
前端开发
【Web前端】CSS基本语法规范和引入方式&&常见选择器用法&&常见元素属性
【Web前端】CSS基本语法规范和引入方式&&常见选择器用法&&常见元素属性
|
8月前
|
前端开发 JavaScript 开发者
前端的CSS选择器
前端的CSS选择器
68 1
|
前端开发
前端基础 - CSS选择器
前端基础 - CSS选择器
61 0

热门文章

最新文章