CSS教程之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不能够在大部分浏览器改变大小，所以要少用，可以用在边框的大小上。

赞 (0)

相关推荐

  • CSS教程之css选择器 、属性、值

    body {      font-size: 0.8em;      color: navy;  }  上面的意思是为body选择器设置font-size字体大小和color字体颜色. 所以基本的,当它作用与HTML页面时,在body标签(整个窗口中的内容)之间的文字颜色是navy字体大小是0.8ems. 长度和百分比 CSS里面有许多属性值要指定单位,但有些基本单位被使用在一些属性上,在这之前值得属性下它们.  em比如font-size:2em给于字体计算出的大小,所以2em就是实际字体大小

  • CSS教程之CSS的应用

    一.In-line 行内 行内样式是在html标签里直接使用style属性 <p style="color: red">text</p>  设定段落文字红色.  但要记住,最后的HTML应该是独立出来,使用表现文档,所以行内样式应该在任何地方避免. 二.Internal 内部 使用于整个页面的植入内部样式在head标签里面,style标签包围样式. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Stri

  • js获取页面引用的css样式表中的属性值方法(推荐)

    如下所示: function getStyle(node, property){ if (node.style[property]) { return node.style[property]; } else if (node.currentStyle) { return node.currentStyle[property]; } else if (document.defaultView && document.defaultView.getComputedStyle) { var s

  • js获取某元素的class里面的css属性值代码

    js获取某元素的class里面的css属性值代码

    用js如何获取div中css的 margin.padding.height.border等.你可能说可以直接用document.getElementById("id").style.margin获取.但是你说的只能获取直接在标签中写的style的属性,无法获取标签style外的属性(如css文件中的属性).而下面方法则两者值都可以获取.实例效果图如下: js在获取css属性时如果标签中无style则无法直接获取css中的属性,所以需要一个方法可以做到这点.getStyle(obj,at

  • JS使用getComputedStyle()方法获取CSS属性值

    在对网页进行调试的过程中,经常会用到js来获取元素的CSS样式,方法有很多很多,现在仅把我经常用的方法总结如下: 1. obj.style:这个方法只能JS只能获取写在html标签中的写在style属性中的值(style="-"),而无法获取定义在<style type="text/css">里面的属性. 复制代码 代码如下: <span style="font-family:Arial;font-size:14px;">

  • 在vue中动态修改css其中一个属性值操作

    我就废话不多说了,大家还是直接看代码吧~ <template> <!--此div的高度取屏幕可视区域的高度--> <div class="hello" :style="{'height':getClientHeight}"> <h5>{{ msg }}</h5> </div> </template> <script> export default { data() { r

  • javascript 获取特定的 CSS属性值

    <link id="system_style" type="text/css" href="global.css" rel="stylesheet"/>  <div id="myArticle"> ... </div> 在global.css中声明了 #myArticle{ width:400px;  height:300px; } 这样的情况下,直接通过JS进行getE

  • Angular4学习教程之DOM属性绑定详解

    Angular4学习教程之DOM属性绑定详解

    前言 DOM 元素触发的一些事件通过 DOM 层级结构传播,事件首先由最内层的元素开始,然后传播到外部元素,直到它们到根元素,这种传播过程称为事件冒泡.本文主要介绍了关于Angular4 DOM属性绑定的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 简介 使用插值表达式将一个表达式的值显示在模版上 <img src="{{imgUrl}}" alt=""> <h1>{{productTitle}}</h1&

  • Angular4学习教程之HTML属性绑定的方法

    Angular4学习教程之HTML属性绑定的方法

    前言 本文主要给大家介绍了关于Angular4 HTML属性绑定的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 简介 基本HTML属性 <td [attr.colspan]="tableColspan"></td> Css 类绑定 <!-- 第一种情况 class 类全部替换 --> <div [class]="divClass">CSS 类绑定,[class] 全部替换的例子</d

  • 推荐个Css的filter常用滤波器属性及语句大全

    Css的filter常用滤波器属性及语句大全 语法:STYLE="filter:filtername(fparameter1, fparameter2...)"  (Filtername为滤镜的名称,fparameter1.fparameter2等是滤镜的参数) 滤镜说明: Alpha:设置透明层次  blur:创建高速度移动效果,即模糊效果  Chroma:制作专用颜色透明  DropShadow:创建对象的固定影子  FlipH:创建水平镜像图片  FlipV:创建垂直镜像图片 

随机推荐