CSS

CSS

CSS

120 文章 322 话题 8310 浏览

使用 calc() 创建 CSS 网格

calc() 是 CSS3 的一个属性,可以使用加、减、乘、除数学表达式进行运算,其基本语法如下: .article { float: left; width: calc(100% - 1em); } 你可以使用任何的长度值做为单位,如 em、px 或者百分比 %。 网格系统 在这篇文章中,我们主要使用 calc() 创建一个简单易用的网格系统。 HTML结构 就我个人而言,我比较喜欢 Seman…

清晨说ぺ晚安 2021-10-06 09:02:18 浏览 949 评论 0 收藏 0

CSS 学习笔记分享

一、CSS 注释 \/\*注释\*\/ 二、CSS 字体样式属性 1、font-size:子号大小 font-size属性用于设置字号,该属性的值可以使用相对长度单位,也可以使用绝对长度单位 其中相对长度单位比较常用,推荐使用像素单位px。网页中普遍使用14px,默认16px。 注:尽量使用偶数的数字字号。ie 等老式浏览器支持奇数会有 bug。 2、font-family:字体 font-fam…

JSmiles 2021-09-29 09:38:25 浏览 684 评论 0 收藏 0

从 Sass 过渡到 PostCSS

Sass 多年来一直是我的首选。最近我有一段时间,想尝试使用 PostCSS 的 cssnext 插件来处理CSS样式。我一直想使用工具尝试写一些CSS的新特性。同时自己的个人网站也是一个最佳测试这些新特性的实验地。 第一步先了解我使用Sass写的东西,需要知道我用了些什么功能,以确保找到一个替代的工具(PostCSS插件)。下面这个列表是我项目中用到的一些功能: 引入部分(partial imp…

清晨说ぺ晚安 2021-09-27 08:56:39 浏览 954 评论 0 收藏 0

Sass 基础 颜色函数

  • Sass 基础 颜色函数
  • Sass 基础 颜色函数
  • Sass 基础 颜色函数
  • Sass 基础 颜色函数

色彩是设计的一个美妙元素和一个至关重要的工具,同时他能帮助你更好的抓住您的客户。更为重要的是,色彩能帮你表达某些特定的情感,把用户视线带到特点的地方或者帮助你传达信息。在 Web 设计中,主要依靠颜色来表达你的色彩。 如果你只是直接丢一堆颜色给用户,他们也不会集中注意力在你的设计上的。色彩很微妙,所以为了让色彩成为可被利用的工具我们必须正确使用它。像其他设计元素一样,色彩也要好好利用才能发挥它的魔…

晚风撩人 2021-09-26 08:54:12 浏览 743 评论 0 收藏 0

使用 Sass 制作倾斜角度

最近,我不得不在一个网站大量使用倾斜角度作为其设计指南的一部分。倾斜角,是指一个区域它的顶部或底部边缘不是完全水平而是倾斜的。 实现这种效果有很多种方法。例如可以将base64编码的图片应用为背景,但这会使得它很难自定义(颜色,角度等)。 另一种方法是倾斜或旋转绝对定位的伪元素,然而倾斜变换是我最不愿意处理的一件事。 使用Sass时,可以使用动态编码生成 SVG 的 Angled Edges库。它…

清晨说ぺ晚安 2021-09-24 09:01:15 浏览 876 评论 0 收藏 0

前端工程师纳米学位 CSS 样式指南

该指南是你在项目进行过程中所需遵守的官方指南。优达学城的评估人员会根据该指南为你的项目打分。在前端网页开发的世界中,有很"最佳"样式供你选择。因此,为了减少学生在项目过程中因选择何种样式所产生的困惑,我们强烈建议所有学生在其项目中遵循这个样式指南。 一. 通用规则 1.1 编码 使用 UTF-8 。 确保你的编辑器将没有字节顺序标记的 UTF-8 用作字符编码。 1.2 字母大小写 仅使用小写。 …

JSmiles 2021-09-11 19:36:27 浏览 933 评论 0 收藏 0

编写如一 符合习惯的 CSS 的原则

以下文档将概述一个合理的 CSS 开发风格指导。本指导文件强烈鼓励开发者使用已经存在了的、常见的、合力的文风。您应该有选择地吸纳一些内容来创造您自己的风格指南。 1. 通用原则 “作为成功的项目的一员,很重要的一点是意识到只为自己写代码是很糟糕的行为。如果将有成千上万人使用你的代码, 那么你需要编写最具明确性的代码,而不是以自我的喜好来彰显自己的智商。” - Idan Gazit 别想着过早地优化…

JSmiles 2021-09-09 22:55:26 浏览 822 评论 0 收藏 0

Douban CSS 代码规范指南

1 CSS 浏览器支持标准 WinXP Win7 OS X IE9 B B IE8 A A IE7 B B IE6 B B Chrome16 A A A Chrome14 A A A Firefox10 A A A Firefox9 A A A Safari B B B Opera C C C (注:根据2012年4月数据整理) A级-交互和视觉完全符全设计的要求 B级-视觉上允许有所差异,但不破…

JSmiles 2021-09-06 22:43:30 浏览 856 评论 0 收藏 0

React-Native 样式指南

React-Native 的样式基本上是实现了 CSS 的一个子集,并且属性名不完全一致,所以当你开始在编写 React-Native 之前,可以先简要了解一下。 当前对应 RN 版本:v0.44。 Properties 属性 Text 文本(18) 属性名 取值 描述 color <color> 对应 CSS color 属性 fontFamily string 对应 CSS fon…

JSmiles 2021-09-03 22:36:22 浏览 755 评论 0 收藏 0

使用 Sass 混合宏来声明 CSS 伪类选择器

  • 使用 Sass 混合宏来声明 CSS 伪类选择器
  • 使用 Sass 混合宏来声明 CSS 伪类选择器
  • 使用 Sass 混合宏来声明 CSS 伪类选择器
  • 使用 Sass 混合宏来声明 CSS 伪类选择器

CSS3在选择器方面添加伪类选择器这方面的特性,比如 :nth-child(n)、:nth-of-type(n) 这样的选择器,其好处在这里就不多说了。 而今天我们要说的是在 Sass 中如何更灵巧的使用 CSS3 的一些伪类选择器。 为什么使用混合宏来定义伪类选择器 CSS3中伪类选择器怎么使用,我想不是什么大问题,但大家在使用伪类选择器时,或多或少感觉到了其不太方便与灵巧。不过不要急,现在借助…

偏爱自由 2021-09-01 23:48:03 浏览 895 评论 0 收藏 0

将你的 CSS 项目转换成 Sass

在过去的一年里,我花了很多的时间在学习 Sass知识 以及提高 Sass 的技术水平。在与别人的交谈中,我发现从 CSS 项目转到 CSS 预处理器时,都有这样的担忧: 我不知道从哪里,从什么时候开始,将 CSS 项目转换成 Sass。 有大量的文档和技术诀窍介绍使用Sass和Compass来创建一个新的项目,但考虑到如何将一个CSS项目转换成Sass项目对部分同学有所帮助的时,我整理了这样的一个…

晚风撩人 2021-08-29 01:08:45 浏览 813 评论 0 收藏 0

关于 Sass 3.4 你应该知道的一些事情

Sass 3.4 并不是离开 Sass 3.3 的一个开创性版本,并没有做过多的改变,但有一些小变化还是需要留意的。这些功能在Sass3.3测试版本就有显露出一些,但后面会得到更好的细化。我们来看看这些东西,这些东西对于Sass爱好者还是非常值得期待的。 在 Sass 3.4 中最终可以使用 & 来访问父选择器: ul { li { background: blue; &:hove…

晚风撩人 2021-08-17 19:32:35 浏览 909 评论 0 收藏 0

如何使用 Sass 和 SMACSS 维护 CSS

我们一直以来都是 SMACSS 的忠实粉丝,然而一个纯 SMACSS 方法最适合于一个全新的项目中的普通CSS。我们的市场网站,我们使用了Sass编写样式,而且里面还有好几年的CSS遗留物。 我们最近在精减我们的CSS,让我们的团队更方便的维护,而在精减过程中,我们团队并没有扔掉我们现有的样式或者从零开始。 我们基于SMACSS方法着手解决SMACSS和 OOCSS 的问题,但从 BEM 和 To…

夜无邪 2021-08-15 20:43:37 浏览 1002 评论 0 收藏 0

Sass 中连体符(&)的运用

在 CSS 中,要想给一个元素赋予一定的样式,我们必须得先取到这个元素。那么就得需要选择器,通过选择器来选择指定元素,然后赋予所需的样式。而CSS选择器有很多种,比如层次选择器中的后代选择器、兄弟选择器、通用兄弟选择器等。而这些选择器都通过元素与元素之间的关系来确定的,比如: .parent .child {...} 除了这些选择器,还有 伪类选择器: .ele:after{...} 有时候还有 …

偏爱自由 2021-08-11 20:32:38 浏览 1066 评论 0 收藏 0

编写 Sass 的八个技巧

Sass 可以编译出非常优秀的 CSS 样式表,或者说,这就是 Sass 要做的事情。 有效的使用Sass可以帮助你构建出干净的有效的 CSS,但如果运用不好,Sass 其实会让你的 CSS 文件变得更大,并且添加一些不必要的和重复的 CSS 代码。 下面一些编写Sass小技巧,可以有效帮助你编写出更好的Sass。 1、你的 Sass 结构 在你的项目中使用 Sass,管理好网站的结构是对每一个项…

浮生未歇 2021-08-05 13:27:59 浏览 940 评论 0 收藏 0

简介

CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。

更多

推荐作者

酷科技中心

文章 0 评论 0

奢华的一滴泪

文章 0 评论 1060

wee19851625867

文章 0 评论 0

highfish

文章 0 评论 0