6.jpg 0
前端程序猿

专注于前端的程序猿

2022-04-13

css笔记04-css常用样式

2022-04-20 0 85 web前端社区

6.jpg 0 前端程序猿

list样式

列表list

1. list-style-type

使用 list-style-type 属性可以设置列表中每个列表项前标记的样式:

描述
none 无标记
disc 默认值,标记为实心圆
circle 将标记设置为空心圆
square 将标记设置为实心方块
decimal 将标记设置为数字
decimal-leading-zero 将标记设置为以 0 开头的数字标记,例如 01、02、03
lower-roman 将标记设置为小写罗马数字,例如 i、ii、iii、iv、v
upper-roman 将标记设置为大写罗马数字,例如 I、II、III、IV、V
lower-alpha 将标记设置为小写英文字母,例如 a、b、c、d、e
upper-alpha 将标记设置为大写英文字母,例如 A、B、C、D、E
lower-greek 将标记设置为小写希腊字母,例如 α、β、γ、δ、ε
lower-latin 将标记设置为小写拉丁字母,例如 a、b、c、d、e
upper-latin 将标记设置为大写拉丁字母,例如 A、B、C、D、E
hebrew 将标记设置为传统的希伯来编号
armenian 将标记设置为传统的亚美尼亚编号
georgian 将标记设置为传统的乔治亚编号
cjk-ideographic 将标记设置为中文数字,例如 一、二、三、四、五
hiragana 将标记设置为日文平假名字符,例如 あ、い、う、え、お
katakana 将标记设置为日文片假名字符,例如 ア、イ、ウ、エ、オ
hiragana-iroha 将标记设置为日文平假名序号
katakana-iroha 将标记设置为日文片假名序号

2. list-style-position

使用 list-style-position 属性可以设置在何处放置列表项前的标记:

描述
inside 列表项前的标记放置在之后的文本以内,列表项中的文本会根据标记对齐
outside 默认值,保持标记位于文本的左侧,列表项前的标记放置在文本以外,并且列表项中的文本不会根据标记对齐
inherit 从父元素继承 list-style-position 属性的值

3. list-style-image

通过 list-style-image 属性可以将列表项前的标记替换为一个图像:

描述
URL 图像的路径
none 默认值,不显示任何图像
inherit 从父元素继承 list-style-image 属性的值

4. list-style

list-style 属性是上述三个属性(list-style-type、list-style-position、list-style-image)的简写,使用 list-style 可以同时设置上面的三个属性,其语法格式如下:

list-style: list-style-type || list-style-position || list-style-image;

在使用 list-style 属性时,需要按照上面的顺序来为参数赋值,只要遵守参数的顺序,即使忽略其中的一项或多项也是可以的,例如list-style: none;list-style:circle inside;,被忽略的参数会设置为参数对应的默认值。

鼠标样式cursor

通过 CSS 中的 cursor 属性来改变网页中鼠标(光标)的样式,下表中列举了 cursor 属性的可选值:

属性值 示意图 描述
auto 默认值,由浏览器根据当前上下文确定要显示的光标样式
default 默认光标 默认光标,不考虑上下文,通常是一个箭头
none 不显示光标
initial 将此属性设置为其默认值
inherit 从父元素基础 cursor 属性的值
context-menu 上下文菜单光标 表示上下文菜单可用
help 帮助光标 表示有帮助
pointer 指针光标 表示一个链接
progress 进度游标 进度指示器,表示程序正在执行一些处理,但是您仍然可以在该界面进行一些操作(与 wait 不同)
wait 等待光标 表示程序繁忙,您应该等待程序指向完成
cell 单元游标 表示可以选择一个单元格(或一组单元格)
crosshair 十字准线光标 一个简单的十字准线
text 文字游标 表示可以选择的文本
vertical-text 垂直文本光标 表示可以选择的垂直文本
alias 别名光标 表示要创建别名或快捷方式
copy 复制光标 表示可以复制某些内容
move 移动光标 表示可以移动鼠标下方的对象
no-drop 无丢游标 表示所拖动的项目不能放置在当前位置
not-allowed 不允许的游标 表示无法完成某事
all-scroll 全滚动光标 表示对象可以沿任何方向滚动(平移)
col-resize 彩色游标 表示可以水平调整列的大小
row-resize 行大小调整游标 表示可以垂直调整行的大小
n-resize N尺寸游标 表示对象的边缘可以向上(向北)移动
e-resize 电子调整游标 表示对象的边缘可以向右(向东)移动
s-resize S调整游标 表示对象的边缘可以向下(向南)移动
w-resize W尺寸游标 表示对象的边缘可以向左(向西)移动
ne-resize NE调整大小的游标 表示对象的边缘可以向上和向右(北/东)移动
nw-resize NW调整游标 表示对象的边缘可以向上和向左(北/西)移动
se-resize SE调整游标 表示对象的边缘可以向下和向右(向南/向东)移动
sw-resize SW调整游标 表示对象的边缘可以向下和向左(南/西)移动
ew-resize EW调整游标 表示可以双向调整对象大小的光标
ns-resize NS调整大小的游标
nesw-resize NESW调整大小的游标
nwse-resize NWSE调整大小的游标
zoom-in 放大光标 表示可以放大某些内容
zoom-out 缩小光标 表示可以缩小某些内容
grab 抓取光标 表示可以抓取(拖动)某些东西
grabbing 抓取光标 表示已经抓取到某些东西
url(“”) 自定义光标的样式,括号中的内容为光标图像的源文件路径

由于计算机系统的不同,鼠标的样式会存在一定的差异。

定位position

CSS 中的 position 属性用来设置元素在页面中的位置,通过该属性您可以把任何属性放置在任何您认为合适的位置。position 属性有 5 个可选值,分别对应 5 种不同的定位方式,如:

取值 说明
static 默认值,静态定位,表示没有定位,元素会按照正常的位置显示,此时 top、bottom、left 和 right 4 个定位属性也不会被应用。
relative 相对定位,即相对于元素的正常位置进行定位,您可以通过 top、right、bottom、left 这 4 个属性来设置元素相对于正常位置的偏移量,在此过程中不会对其它元素造成影响。
absolute 绝对定位,相对于第一个非 static 定位的父级元素进行定位,可以通过 top、right、bottom、left 这 4 个属性来设置元素相对于父级元素位置的偏移量。如果没有满足条件的父级元素,则会相对于浏览器窗口来进行定位。使用绝对定位的元素不会对其它元素造成影响。
fixed 固定定位,相对于浏览器的创建进行定位,可以使用 top、right、bottom、left 这 4 个属性来定义元素相对于浏览器窗口的位置。使用固定定位的元素无论如何滚动浏览器窗口元素的位置都是固定不变的。
sticky 粘性定位,它是 relative 和 fixed 的结合体,能够实线类似吸附的效果,当滚动页面时它的效果与 relative 相同,当要滚动到屏幕之外时则会自动变成 fixed 的效果。

1. 静态定位:static

static 是 position 属性的默认值,表示没有定位,使用静态定位的元素会按照元素正常的位置显示,并且不会受到 top、bottom、left、right 和 z-index 属性的影响。示例代码如下:

2. 相对定位:relative

相对定位就是元素相对于自己默认的位置来进行位置上的调整,您可以通过 top、bottom、left 和 right 四个属性的组合来设置元素相对于默认位置在不同方向上的偏移量。

相对定位的元素可以移动并与其他元素重叠,但会保留元素默认位置处的空间。

3. 绝对定位:absolute

绝对定位就是元素相对于第一个非静态定位(static)的父级元素进行定位,如果找不到符合条件的父级元素则会相对与浏览器窗口来进行定位。同样可以使用 top、bottom、left 和 right 四个属性来设置元素相对于父元素或浏览器窗口不同方向上的偏移量。

使用绝对定位的元素会脱离原来的位置,不再占用网页上的空间。与相对定位相同,使用绝对定位的元素同样会与页面中的其它元素发声重叠,另外使用绝对定位的元素可以有外边距,并且外边距不会与其它元素的外边距发生重叠。

4. 固定定位:fixed

固定定位就是将元素相对于浏览器窗口进行定位,使用固定定位的元素不会因为浏览器窗口的滚动而移动,就像是固定在了页面上一样,我们经常在网页上看到的返回顶部按钮就是使用固定定位实现的。

5. 粘性定位:sticky

粘性定位与前面介绍的四种定位方式不太一下,它像是相对定位和固定定位的结合体,当滚动页面时它的效果与相对定位相同,当元素滚动到一定程度时它又会呈现出固定定位的效果。比如一些网页上的导航菜单,当页面加载完成时它在自己默认的位置,当我们向下滚动页面时它又会固定在页面的最顶端。

在使用粘性定位时,需要注意以下几点:

  • 在设置position:sticky;时,必须再定义 top、bottom、right、left 四个属性之一,否则只会处于相对定位;
  • 使用固定定位元素的父元素不能定义overflow:hidden或者overflow:auto属性;
  • 父元素的高度不能低于固定定位元素的高度;
  • 固定定位的元素仅在其父元素内有效。

元素重叠排序z-index

通常我们可能会认为 HTML 网页是个二维的平面,因为页面中的文本、图像或者其它元素都是按照一定顺序排列在页面上的,每个元素之间都有一定的间隙,不会重叠。然而,实际的网页其实是三维的,元素之间可能会发生堆叠(重叠),您可以通过 CSS 中的 z-index 属性来设置元素的堆叠顺序,如:

每个元素都有一个默认的 z-index 属性,将 z-index 属性与 position 属性相结合可以创建出类似 PhotoShop 中的图层效果。z-index 属性可以设置元素的层叠级别(当元素出现重叠时,该元素在其它元素之上还是之下),拥有更高层叠级别的元素会处于层叠级别较低的元素的前面(或者说上面)。

通过 z-index 属性您可以创建更加复杂的网页布局,z-index 属性的可选值如下表所示:

描述
auto 默认值,堆叠顺序与父元素相等
number 使用具体数值(整数)设置元素的堆叠顺序
inherit 从父元素继承 z-index 属性的值

关于元素的层级关系有以下几点需要注意:

  • 对于未设置 position 属性的元素或者 position 属性的值为 static 时,后定义的元素会覆盖前面的元素;
  • 对于设置有 position 属性且属性值不为 static 的元素,这些元素会覆盖没有设置 position 属性或者 position 属性值为 static 的元素;
  • 对于 position 属性值不为 static 且定义了 z-index 属性的元素,z-index 属性值大的元素会覆盖 z-index 属性值小的元素,即 z-index 属性值越大优先级越高,若 z-index 属性值相同,则后定义的元素会覆盖前面定义的元素;
  • z-index 属性仅在元素定义了 position 属性且属性值不为 static 时才有效。

@font-face

@font-face 用于从远程服务器或者用户本地加载指定的字体,语法格式如下:

@font-face {
font-family: ;
src: [format()] [, [format()]]*;
;
}

参数说明如下:

  • :字体名称;
  • :使用 url()(远程字体)或者 local()(本地字体)来指定字体的存放路径,可以是相对路径也可以是绝对路径;
  • :用来指定自定义字体的格式,例如以下几种类型 truetype、opentype、embedded-opentype、svg 等;
  • :定义字体相关样式。

@font-face 可以放在 css 样式表的顶部,也可以放在其它嵌套规则中。如果同时使用 local() 函数和 url() 函数加载字体,则会优先加载 local() 函数中定义的本地字体,如果没有找到则会加载 url() 函数中定义的远程字体。

  1. /* 定义 @font-face 规则 */
  2. @font-face {
  3. /* 指定字体名称 */
  4. font-family: "Open Sans";
  5. /* 指定字体文件的路径 */
  6. src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
  7. url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
  8. }
  9. /* 字体的应用 */
  10. p {
  11. font-family: "Open Sans";
  12. }

阴影

CSS3 出现之后,我们通过 text-shadow 和 box-shadow 两个属性就可以为文本或元素添加阴影效果,不需要借助任何图像。

1. text-shadow

使用 CSS 的 text-shadow 属性我们可以为文本设置阴影效果,属性的语法格式如下:

text-shadow: offset-x offset-y blur color;

语法说明如下:

  • offset-x:必填参数,设置阴影的水平偏移量,可以为负值;
  • offset-y:必填参数,设置阴影的垂直偏移量,可以为负值;
  • blur:可选参数,设置模糊的半径,值越大,模糊越大,阴影的边缘越模糊,不允许使用负值;
  • color:可选参数,设置阴影的颜色,如果省略或未指定该值,则采用 color 属性的值。

使用 text-shadow 属性可以同时设定多组阴影效果,每组之间使用逗号分隔,定义的多组阴影效果会按照定义顺序依次罗列,第一个阴影在最上面,以此类推。另外,若要取消文本的阴影效果则可以将 text-shadow 属性的值设置为 none。

2. box-shadow

使用 CSS 的 box-shadow 属性我们可以为 HTML 元素设置阴影效果,属性的语法格式如下:

box-shadow: h-shadow v-shadow blur spread color inset;

语法说明如下:

  • h-shadow:必填参数,设置阴影水平方向的偏移量,可以为负值;
  • v-shadow:必填参数,设置阴影垂直方向的偏移量,可以为负值;
  • blur:可选参数,设置模糊的半径,值越大,模糊越大,阴影的边缘越模糊,不允许使用负值;
  • spread:可选参数,设置阴影的尺寸;
  • color:可选参数,设置阴影的颜色;
  • inset:可选参数,将默认的外部阴影 (outset) 改为内部阴影。

与 text-shadow 属性相似,box-shadow 属性也可以同时设定多组阴影效果,每组之间使用逗号分隔,定义的多组阴影效果会按照定义顺序依次罗列,第一个阴影在最上面,以此类推。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. div {
  6. width: 100px;
  7. height: 100px;
  8. border-radius: 10px;
  9. background-color: #CCC;
  10. float: left;
  11. margin: 5px;
  12. }
  13. div.one {
  14. box-shadow: 2px 2px 5px #000;
  15. }
  16. div.two {
  17. box-shadow: 2px 2px 5px #000 inset;
  18. }
  19. div.three {
  20. margin-left: 10px;
  21. box-shadow: 0px 0px 0px 3px #bb0a0a,
  22. 0px 0px 0px 6px #2e56bf,
  23. 0px 0px 0px 9px #ea982e;
  24. }
  25. </style>
  26. </head>
  27. <body>
  28. <div class="one"></div>
  29. <div class="two"></div>
  30. <div class="three"></div>
  31. </body>
  32. </html>

为什么需要BEM

如果编写项目的 CSS 代码只有你一个人,或者项目的 CSS 代码量很小,你可以用你喜欢,习惯的方式去组织你的 CSS 代码。但是项目更大,更复杂,有多人编写项目的 CSS 代码(每个人有自己的风格),代码量大的时候,就需要一种统一形式去组织 CSS 代码,这时候 BEM 就派上用场了。

什么是BEM

BEM(Block Element Modifier) 是一种命名CSS class的模式,使用这种模式可以让 CSS 代码更加利于维护。标准的 BEM 写法是 .block-name__element-name--modifier-name

Block

页面上逻辑和功能独立的,可复用的组件,可以嵌套并相互交互,但在语义上它们保持平等,可以存在页面上不同的位置或不同项目中,保持样式不变。

可以使用字母,数字,连字符进行命名,任何html元素都可以成为一个block,不依赖于页面上的其他block或者element。

  1. <header class="header"></header>
  2. 复制代码
  3. .header {
  4. color: #333;
  5. background: #f5f5f5;
  6. }

Element

组成块的一部分,内部的任何元素都与块有关联,不能在块的外部使用。

  1. <article class="article">
  2. <h2 class="article__title"></h2>
  3. <p class="article__content"></p>
  4. </article>
  5. .article {
  6. padding: 12px;
  7. }
  8. .article__title {
  9. font-size: 1rem;
  10. }
  11. .article__content {
  12. font-size: .9rem;
  13. }

Modifier

用来表示块或者元素的状态,外观或者行为,不必须,可以选择使用。

  1. <button class="btn btn--disabled"></button>
  2. 复制代码
  3. .btn {
  4. color: #333;
  5. background-color: #fff;
  6. }
  7. .btn--disabled {
  8. color: #fff;
  9. background-color: #6c757d;
  10. }

常见class关键词

布局类:header, footer, container, main, content, aside, page, section
包裹类:wrap, inner
区块类:region, block, box
结构类:hd, bd, ft, top, bottom, left, right, middle, col, row, grid, span
列表类:list, item, field
主次类:primary, secondary, sub, minor
大小类:s, m, l, xl, large, small
状态类:active, current, checked, hover, fail, success, warn, error, on, off
导航类:nav, prev, next, breadcrumb, forward, back, indicator, paging, first, last
交互类:tips, alert, modal, pop, panel, tabs, accordion, slide, scroll, overlay
星级类:rate, star
分割类:group, seperate, divider
等分类:full, half, third, quarter
表格类:table, tr, td, cell, row
图片类:img, thumbnail, original, album, gallery
语言类:cn, en
论坛类:forum, bbs, topic, post
方向类:up, down, left, right
其他语义类:btn, close, ok, cancel, switch; link, title, info, intro, more, icon; form, label, search, contact, phone, date, email, user; view, loading…

页面结构

容器: container/wrap
整体宽度:wrapper
页头:header
内容:content
页面主体:main
页尾:footer
导航:nav
侧栏:sidebar
栏目:column
中间内容:center

导航

导航:nav
导航:mainnav/globalnav
子导航:subnav
顶导航:topnav
边导航:sidebar
左导航:leftsidebar
右导航:rightsidebar
边导航图标:sidebarIcon
菜单:menu
子菜单:submenu
标题: title

功能

标志:logo
登录:login
登录条:loginbar
注册:regsiter
产品:products
产品价格:productsPrices
产品评论:productsReview
编辑评论:editor-review
最新产品:news-release
广告/标语:banner
摘要:summary
生产商:publisher
缩略图:screenshot
常见问题:faqs
关键词:keyword
博客:blog
论坛:forum
搜索:search
搜索输入框:search-input
搜索输出:search-output
搜索结果:search-results
加入我们:joinus
状态:status
按钮:btn
滚动:scroll
标签页:tab
文章列表:list
提示信息:msg/message
当前的: current
小技巧:tips
皮肤:skin
充值:pay
活动:activities
推广:promotion
公告:announcement
排行:ranking
公司简介:companyProfile
公司设备:equipment
公司荣誉:glories
企业文化:culture
企业规模:scaleScale
营销网络:salesNetwork
组织机构:organization
技术力量:technology
分支机构:branches
企业资质:EnterpriseQualification
公司实力:strengthStrength
经营理念:operationPrinciple
经理致辞:manager_oration
发展历程:developmentHistory
工程案例:EngineeringProjects
分类浏览:browseByCategory
应用领域:applicationFields
人力资源:humanResourceHr
领导致辞: leader_oration
客户留言:customerMessage
客户服务:customerService
您的要求:yourRequirements
销售信息:salesInformation
招商:EnterpriseEstablishing
教育培训:EducationTraining
在线交流:onlineCommunication
质量认证:qualityCertification
合作加盟:joinInCooperation
产品描述:productsDescription
业务范围:businessScope
产品销售:salesSales
联系我们:contactUs
信息发布:Information
返回首页:homepage
产品定购:order
电子商务:E-business
版权所有:copy Right
友情连结:hot Link
行业新闻:tradeNews
行业动态:trends
邮编:postalCodeZipcode
新闻动态:newsTrends
公司名称:companyName
销售热线:salesHot_Line
联系人:contactPerson
建设中:InConstruction
证书:certificate
地址:ADD/Add
电话:TEL/Tel
传真:FAX/Fax
产品名称:productName
产品说明:description
价格:price
品牌:brand
规格:specification
尺寸:size
生产厂家:manufacuturer
型号:model
产品标号:Item No
技术指标:techniqueData
产品描述:description
产地:productionPlace
用途:application
论坛:Forum
在线订购:on_lineOrder
招标:bidInviting
综述:general
业绩:achievements
大事:greatEvent
动态:trends
服务:service
投资:Investment
行业:Industry
规划:programming
环境:environment
发送:delivery
提交:submit
重写:reset
社区:community
业务:business
在线调查:onlineInquiry
下载中心:download
意见反馈:feedback
常见问题:FAQ
中心概况:generalProfile
游乐园:amusementPark
专题报道:specialReport
图标: icon
注释:note
指南:guild
服务:service
热点:hot
新闻:news
下载:download
投票:vote
商 标:label/branding
当前位置:breadcrumb/loc
购物车:shop
标签:tag
信誉:siteinfo-credits
网站信息:siteinfo
法律声明:siteinfo-legal
合作伙伴:partner
友情链接:friendlink
版权:copyright

css如何优化并提高性能

方法:1、压缩css,减少文件体积;2、使用link引入css文件;3、合理设计CSS布局,注意复用样式,减少渲染上花的时间;4、少用“*”选择器;5、慎用浮动、定位等高性能属性;6、尽量减少页面重排、重绘;7、属性值为0时,不加单位等等。

CSS优化主要是4个方面:

  • 加载性能

    主要是从减少文件体积,减少阻塞加载,提高并发方面入手

  • 选择器性能

  • 渲染性能

  • 可维护性、健壮性

下面给大家具体介绍一下。

加载性能:

1、css压缩:将写好的css进行打包压缩,可以减少很多的体积;

2、css单一样式:当需要下边距和左边距的时候,

很多时候选择:margin: top 0 bottom 0;

margin-bottom: bottom;margin-left: left;执行的效率更高;

3、减少使用 @import, 而建议使用link, 因为后者在页面加载时一起加载,前者是等待页面加载完成之后再进行加载;

4、合理设计CSS 布局,注意复用样式,减少渲染上花的时间。class和ID的选择,少用*这种全局匹配,合理设置基本样式(如设置table{})提高复用。

选择器性能:

CSS选择符是从右到左进行匹配的。当使用后代选择器的时候,浏览器会遍历所有子元素来确定是否是指定的元素等等;

\避免使用通配规则**

如*{} 计算次数惊人!只对需要用到的元素进行选择

\尽量少的去对标签进行选择,而是用class**

如:#nav li{},可以为li加上nav_item的类名,如下选择.nav_item{}

\不要去用标签限定ID或者类选择符**

如:ul#nav,应该简化为#nav

\尽量少的去使用后代选择器,降低选择器的权重值**

后代选择器的开销是最高的,尽量将选择器的深度降到最低,最高不要超过三层,更多的使用类来关联每一个标签元素

\考虑继承**

了解哪些属性是可以通过继承而来的,然后避免对这些属性重复指定规则

渲染性能:

1、慎重使用高性能属性:浮动、定位;

2、尽量减少页面重排、重绘;

重排按照css的书写顺序:

  • 位置:positon、top、left、z-index、float、dispay
  • 大小:width、height、margin、padding
  • 文字系列: font、line-height、color、letter-spacing
  • 背景边框:background、 border
  • 其它:anmation、transition
  • 重绘:border、outline、background、box-shadow,能使用background-color,就尽量不要使用background;

3、去除空规则:{};

4、属性值为0时,不加单位;

5、属性值为浮动小数0.**,可以省略小数点之前的0;

6、标准化各种浏览器前缀:带浏览器前缀的在前。标准属性在后;

7、不使用@import前缀,它会影响css的加载速度;

8、充分利用css继承属性,减少代码量;

9、抽象提取公共样式,减少代码量;

10、选择器优化嵌套,尽量避免层级过深;

11、css雪碧图,同一页面相近部分的小图标,方便使用,减少页面的请求次数,但是同时图片本身会变大,使用时,优劣考虑清楚,再使用;

12、将css文件放在页面最上面

可维护性、健壮性:

1、将具有相同属性的样式抽离出来,整合并通过class在页面中进行使用,提高css的可维护性;

2、继上一条,oocss也是提高css性能的途径之一,通过定义可复用的、语义化良好的基础类,然后添加到html中,这也是很多ui框架都在使用的一种方法,例如:class=”btn btn-active btn-blue”;

3、样式与内容分离:讲css代码定义到外部css中;

4、容器与样式分离;

0

Copyright (C) 2021-2026 98社区 All Rights Reserved 蜀ICP备20012692号-3