• 售前

  • 售后

热门帖子
入门百科

详解CSS开发过程中的20个快速提拔本事

[复制链接]
xinting_6ym 显示全部楼层 发表于 2021-8-16 11:32:14 |阅读模式 打印 上一主题 下一主题
目录


  • 1、使用CSS重置(reset)
  • 2、继续盒模子
  • 3、使用flexbox布局来避免margin的题目 (Get Rid of Margin hacks width Flexbox)
  • 4、使用:not() 解决lists边框的题目
  • 5、body上加入line-height样式
  • 6、垂直居中任何元素 (vertical-center anything)
  • 7、使用SVG icons
  • 8、使用 “OWL选择器”
  • 9、一致的垂直布局(Consistent Vertical Rhythm)
  • 10、对更漂亮的换行文本使用 box-decoration-break
  • 11、等宽表格单元格
  • 12、强制使用属性选择器表现空链接
  • 13、样式“默认”链接
  • 14、比率框
  • 15、风格破碎的图像
  • 16、使用rem进行全局巨细调解;使用em进行局部巨细调解
  • 17、潜伏未静音的主动播放视频
  • 18、灵活运用root范例
  • 19、在表单元素上设置字体巨细,以得到更好的移动体验
  • 20、CSS变量

1、使用CSS重置(reset)

css重置库如normalize.css已经被使用很多年了,它们可以为你的网站样式提供一个比力清晰的尺度,来确保跨欣赏器之间的一致性。
大多数项目并不必要这些库包罗的所有规则,可以通过一条简单的规则来应用于布局中的所有元素,删除所有的margin、padding改变欣赏器默认的盒模子。
  1. *{box-sizing:border-box;margin:0;padding:0}
复制代码
使用box-sizing声明是可选择,假如你使用下面继续的盒模子情势可以跳过它。

2、继续盒模子

让盒模子从html 继续:
  1. html {    box-sizing: border-box;  }    *, *:before, *:after {    box-sizing: inherit;  }
复制代码
3、使用flexbox布局来避免margin的题目 (Get Rid of Margin hacks width Flexbox)

当你多少次试着去设计栅格布局如:组合大概图片画廊,假如使用浮动的方式,那么就必要去清除浮动和重置外边距来使其分解成所必要行数。为了避免nth-、first-、last-child 题目 ,可以使用flexbox 的space-between 属性值
  1. .flex-container{display:flex;justify-content:space-between;}.flex-container .item{              flex-basis:23%;}
复制代码
4、使用:not() 解决lists边框的题目

在web设计中,我们通常使用:last-child nth-child 选择器来覆盖原先声明应在父选择器上的样式。好比说一个导航菜单,通过使用borders 来给每个链接Link创建分割符,然后再在加上一条规则 解除末了一个link的border
  1. .nav li {    border-right: 1px solid #666;  }.nav li:last-child {    border-right: none;  }
复制代码
这是一种很紊乱的方式,它不但强制欣赏器以一种方式渲染,然后又通过特定的选择器来打消它。如许覆盖样式是不可避免的。然而,最重要的是,我们可以通过使用:not伪类(pseudo-class) 在你想声明的元素上仅仅只使用一种样式:
  1. .nav li:not(:last-child) {    border-right: 1px solid #666;  }
复制代码
上面就是,除了末了一个li以外,所有的 .nav li 都加上了border样式,是不是很简单!
当然,你也可以使用 .nav li+li大概 .nav li:first-child ~li ,但是 :not是更有语义化(semantic)和容易明确的。

5、body上加入line-height样式

导致低样式效率(inefficient stylesheets)的一件事就是不停的重复声明。最好是做下项目规划和组合规则,如许CSS会更流畅。实现这一点,就必要我们明确级联(cascade),以及怎样在通用选择器写的样式可以继续在其他地方。
行间距(line-height)可以作为给你的整个项目设置的一个属性,不但可以减小代码量,而且可以让你的网站的样式给一个尺度的外观
  1. body {line-height: 1.5;}
复制代码
请注意,这里的声明没有单元,我们只是告诉欣赏器 让它渲染行高是 渲染字体巨细的1.5倍

6、垂直居中任何元素 (vertical-center anything)

在没有准备使用CSSGrid 布局的时间,设置垂直居中布局的全局规则是一个很好的方式,可以为优雅(elegantly)的设置内容布局奠定一个基础
  1. html, body {height: 100%;    margin: 0;  }    body {    -webkit-align-items: center;    -ms-flex-align: center;    align-items: center;    display: -webkit-flex;    display: flex;  }
复制代码
7、使用SVG icons

SVG使用于所有分辨类,而且所有欣赏器也都支持。以是可以将.png .jpg .gif 等文件 丢弃。FontAwsome5中 也提供了SVG的图标字体。设置SVG的格式就跟其他图片范例一样:
  1. .logo {    background: url("logo.svg");  }
复制代码
温馨提示:假如将SVG用在可交互的元素上好比说button,SVG 会产生无法加载的题目。可以通过下面这个规则来确保SVG可以访问到(确保在HTML中已设置得当的aria属性)
  1. .no-svg .icon-only:after {    content: attr(aria-label);  }
复制代码
8、使用 “OWL选择器”

使用通用选择器(universal selector)* 和相邻的兄弟选择器(adjacent sibling selector)+ 可以提供一个强大的的CSS功能,给紧跟其他元素中的文档流中的所有元素设置统一的规则
  1. * + * {    margin-top: 1.5rem;  }
复制代码
这是一个很棒的技巧,可以帮你创建更加均匀的范例跟间距。在上面的列子中,跟在其他元素后面的元素,好比说H3后面的H4,大概一个段落之后的一个段落,他们之间至少1.5rems的间距(约莫为30px)

9、一致的垂直布局(Consistent Vertical Rhythm)

一致的垂直节奏提供了一种视觉美学,使内容更具可读性。假如owl选择器过于通用,请在元素内使用通用选择器(*)为布局的特定部门创建一致的垂直节奏:
  1. .intro > * {   margin-bottom: 1.25rem;  }
复制代码
10、对更漂亮的换行文本使用 box-decoration-break

假设您盼望对换行到多行的长文本行应用统一的间距、边距、突出表现或配景色,但不盼望整个段落或标题看起来像一个大块。Box Decoration Break属性答应您仅对文本应用样式,同时保持填充和页边距的完备性。
假如要在悬停时应用突出表现,或在滑块中设置子文本样式以具有突出表现的外观,则此功能尤其有效:
  1. .p {display: inline-block;box-decoration-break: clone;-o-box-decoration-break: clone;-webkit-box-decoration-break: clone;}
复制代码
内联块声明答应将颜色、配景、页边距和填充应用于每行文本,而不是整个元素,克隆声明确保将这些样式均匀地应用于每行。

11、等宽表格单元格

表格大概很难处置惩罚,以是实验使用table-layout:fixed来保持单元格相等宽度:
  1. .calendar {    table-layout: fixed;  }
复制代码
12、强制使用属性选择器表现空链接

这对于通过CMS插入的链接特别有效,CMS通常不具有类属性,并帮助您在不影响级联的环境下对其进行特定样式设置。比方,<a>元素没有文本值,但href属性有一个链接:
  1. a[href^="http"]:empty::before {    content: attr(href);  }
复制代码
13、样式“默认”链接

说到链接样式,您可以在险些每个样式表中找到一个通用的A样式。这迫使您为子元素中的任何链接编写额外的覆盖和样式规则,而且在使用像WordPress如许的CMS时,大概会导致您的主链接样式比按钮文本颜色更容易出现题目。
实验这种较少干扰的方式为“默认”链接添加样式
  1. a[href]:not([class]) {    color: #999;    text-decoration: none;  transition: all ease-in-out .3s;}
复制代码
14、比率框

要创建具有固有比率的框,您必要做的就是将顶部或底部填充应用于div
  1. .container {    height: 0;    padding-bottom: 20%;    position: relative;  }    .container div {    border: 2px dashed #ddd;    height: 100%;    left: 0;    position: absolute;    top: 0;    width: 100%;  }
复制代码
使用20%进行填充使得框的高度即是其宽度的20%。无论视口的宽度怎样,子div都将保持其纵横比(100%/ 20%= 5:1)。

15、风格破碎的图像

这个技巧不是关于代码缩减,而是关于细化设计细节的。破碎的图像发生的缘故原由有很多,要么不雅观,要么导致紊乱(只是一个空元素)。用这个小小的CSS创建更美观的效果:
  1. img {    display: block;    font-family: Helvetica, Arial, sans-serif;    font-weight: 300;    height: auto;    line-height: 2;    position: relative;    text-align: center;    width: 100%;  }img:before {    content: "We're sorry, the image below is missing :(";    display: block;    margin-bottom: 10px;  }    img:after {    content: "(url: " attr(src) ")";   display: block;    font-size: 12px;  }
复制代码
16、使用rem进行全局巨细调解;使用em进行局部巨细调解

在设置根目录的基本字体巨细后,比方html字体巨细:15px;,可以将包罗元素的字体巨细设置为rem:
  1. article {    font-size: 1.25rem;  }    aside {    font-size: .9rem;  }
复制代码
然后将文本元素的字体巨细设置为em
  1. h2 {    font-size: 2em;  }    p {    font-size: 1em;  }
复制代码
如今,每个包罗的元素都变得分区化,更易于样式化、更易于维护和灵活。

17、潜伏未静音的主动播放视频

当您处置惩罚无法从源代码轻松控制的内容时,这对于自界说用户样式表来说是一个很好的技巧。这个技巧将帮助您避免在加载页面时主动播放视频中的声音干扰访问者,并再次提供了出色的:not()伪选择器:
  1. video[autoplay]:not([muted]) {    display: none;  }
复制代码
18、灵活运用root范例

相应布局中的字体巨细应该能够主动调解到视区,从而生存编写媒体查询的工作,以处置惩罚字体巨细。可以使用:not和视区单元,根据视区高度和宽度盘算字体巨细:
  1. :root {    font-size: calc(1vw + 1vh + .5vmin);  }
复制代码
如今,您可以使用根em单元,该单元基于:not:
  1. body {    font: 1rem/1.6 sans-serif;  }
复制代码
联合上面的rem/em技巧以得到更好的控制。

19、在表单元素上设置字体巨细,以得到更好的移动体验

为了避免移动欣赏器(iOS Safari等)在点击<select>下拉列表时放大HTML表单元素,请在添加font-size样式:
  1. input[type="text"],  input[type="number"],  select,  textarea {    font-size: 16px;  }
复制代码
20、CSS变量

末了,最强大的CSS级别来自于CSS变量,它答应您声明一组公共属性值,这些值可以通过样式表中任何位置的关键字重用。你大概有一套颜色在整个项目中使用,以保持一致性。
在CSS中反复重复这些颜色值不但是件烦人的变乱,而且还容易堕落。假如某个颜色在某个时刻必要改变,你就不得不去探求和替换,这是不可靠或不快速的,当为终极用户构建产物时,变量使得定制变得容易得多。比方:
  1. :root {--main-color: #06c;--accent-color: #999;}h1, h2, h3 {color: var(--main-color);}a[href]:not([class]) ,p,footer span{color: var(--accent-color);}
复制代码
以上就是详解CSS开发过程中的20个快速提升技巧的详细内容,更多关于CSS开发过程中的20个快速提升技巧的资料请关注脚本之家别的相关文章!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作