HTML有标签,CSS有选择器。选择器是给内部和外部样式里面的样式命名。
每个选择器都有属性在{}
里面,比如简单点像color
,font-weight
或background-color
。
值在冒号(不是等号)后面,分号分离属性。
css 代码
- body {
- font-size: 0.8em;
- color: navy;
- }
上面的意思是为body
选择器设置font-size
字体大小和color字体颜色
。
所以基本的,当它作用与HTML页面时,在body
标签(整个窗口中的内容)之间的文字颜色是navy字体大小是0.8ems。
长度和百分比
CSS里面有许多属性值要指定单位,但有些基本单位被使用在一些属性上,在这之前值得属性下它们。
em比如font-size:2em
给于字体计算出的大小,所以2em就是实际字体大小的两倍。
px比如font-size:12px
是pixel像素的单位。
pt比如font-size:12px
是points镑的单位。
%比如font-size:80%
是百分比
其他单位包括pc(12点西文活字)、cm(厘米)、mm(毫米)和in(英寸)
当值是零的时候,不需要单位,例如:border:0
意思没有边框。
网页不是静态的、绝对的媒体。这意味着内能伸缩变形,用户应该被允许调整自己喜欢的方式,包括字体大小和屏幕大小。
因为这样,建议使用"em"和"%"在font-size上(宽度和高度),相比下px不能够在大部分浏览器改变大小,所以要少用,可以用在边框的大小上。
分享到:
相关推荐
postcss-icss-selectors, 用于本地范围类和id的css模块的PostCSS插件 postcss-icss-selectors 用于本地范围类和id的css模块的PostCSS插件用法postcss([ require('postcss-icss-selectors')(options) ])有关环
Postcss合并重复的选择器 自动检测并合并重复CSS选择器,因此您不必 :grinning_face_with_smiling_eyes:用法要求为了使用此功能,您将需要安装 。 根据是否要使用CLI,需要安装 。 npm install --save-dev postcss ...
testcafe-react-selectors, 用于响应应用的TestCafe选择器扩展 testcafe-react-selectors这个插件提供了选择器扩展,使得使用 TestCafe 测试ReactJS组件变得更容易。 这些扩展允许你以React的方式选择页面元素。安装...
Tailwindcss-伪选择器Tailwind CSS插件,将所有不同的伪选择器添加为变体安装NPM npm install tailwindcss-pseudo-selectors --save-dev纱yarn add tailwindcss-pseudo-selectors -D用法配置将插件添加到您的...
This CSS Reference lists all standard CSS properties, pseudo-classes and pseudo-elements, @-rules, and selectors in alphabetic order. It allows you to quickly access detailed information for each of ...
在使用rename-css-selectors处理它之后执行此操作此模块重命名给定文件中的所有CSS选择器。 它将从给定CSS文件中收集所有选择器。 不必担心选择器, rcs会为您完成选择。 你也可以使用一个配置文件与组合和 ,如果...
list-selectors 可以列出你在 CSS 使用的 selector,它可作为一个独立的函数,CLI, 或者 PostCSS 插件。使用示例:var listSelectors = require('list-selectors'); listSelectors( ['style/**/*.css', '!...
咖啡馆React选择器 这个插件提供了选择器扩展,使使用测试ReactJS组件变得更加容易。 这些扩展允许您以React固有的方式选择页面元素。 安装 $ npm install testcafe-react-selectors 用法 等待应用程序准备运行测试...
条带变化选择器 strip-variation- selectors从字符串中删除Unicode变体选择器。安装通过 : npm install strip-variation-selectors 在浏览器中: < script src =" strip-variation-selectors.js " > </ ...
资源分类:Python库 所属语言:Python 资源全名:rf-se-dtl-selectors-plugin-0.3.0.tar.gz 资源来源:官方 安装方法:https://lanzao.blog.csdn.net/article/details/101784059
Gulp插件转换CSS选择器 用法 首先,安装gulp-transform-selectors作为开发依赖项: npm install --save-dev gulp-transform-selectors 然后,将其添加到您的gulpfile.js : var transformSelectors = require ...
postcss选择器解析器 选择器解析器,具有用于处理选择器字符串的内置方法。 安装 使用可以: npm install postcss-selector-parser 快速开始 const parser = require ( 'postcss-selector-parser' ) ; const ...
CSS样式表和嵌套选择器目标<link>到index.html外部样式表style.css 。 使用嵌套的元素选择器来设置“破冰船”首页的导航样式。 玩边框,高度,填充,边距,行内显示和浮动。指示我们将设置“破冰船”网站导航...
grunt-shrink-selectors CSS 重命名工具 入门 这个插件需要 Grunt ~0.4.5 如果您以前从未使用过 ,请务必查看《指南》,因为它说明了如何创建以及安装和使用Grunt插件。 熟悉该过程后,可以使用以下命令安装此插件...
PostCSS添加根选择器 插件将根选择器添加到所有其他规则中。 输入: . foo { color : red; } a . foo , section { color : red; } @media ( max-width : 700 px ) { # some-id { color : red; } } /* html and...
使用伪选择器和ID选择器的样式链接目标<link>到index.html外部样式表style.css 。 将id属性添加到HTML标记。 构建问题div一类的questions 。 通过提供一个创建“丸”式的按键a标签的btn类。 使用ID选择器为...
testcafe-aurelia-选择器 该插件提供选择器扩展,使使用轻松测试Aurelia应用程序。 这些扩展允许您以Aurelia固有的方式选择页面元素。 安装 npm install testcafe-aurelia-selectors 选择器扩展 按值绑定 选择其...
eslint插件测试选择器 强制在交互式DOM元素上存在data-test-id属性,以帮助进行UI测试。 :cross_mark: <button>Download</button> :check_mark_button: <button data-test-id="download-button"&...
testcafe-角度选择器 该插件提供了扩展,使使用轻松测试Angular应用程序。 这些扩展允许您创建一个Selector ,以Angular应用程序固有的方式在页面上查找元素。 安装 npm install testcafe-angular-selectors 用法 该...
Desktop-only websites just aren’t ...Learn how to use the latest features of CSS including custom fonts, nth-child selectors (and some CSS4 selectors), CSS custom properties (variables), and CSS calc