简单学习了解CSS的选择器 、属性、值

css

  HTML有标签,CSS有选择器。选择器是给内部和外部样式里面的样式命名。

  每个选择器都有属性在{}里面,比如简单点像color,font-weight或background-color。

  值在冒号(不是等号)后面,分号分离属性。

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

时间: 2024-09-30 23:12:46

简单学习了解CSS的选择器 、属性、值的相关文章

简单的JS获取元素样式属性值的方法

简单的js获取元素样式属性值的方法 function attrstyle(elem,attr){  if(elem.style[attr]){   //若样式存在于html中,优先获取   return elem.style[attr];  }else if(elem.currentstyle){   //ie下获取css教程属性最终样式(同于css优先级)   return elem.currentstyle[attr];  }else if(document.defaultview &&

css display属性值求解

问题描述 css display属性值求解 display属性值求解 run-in:根据上下文决定对象是内联对象还是块级对象.(CSS3) box:将对象作为弹性伸缩盒显示.(伸缩盒最老版本)(CSS3) inline-box:将对象作为内联块级弹性伸缩盒显示.(伸缩盒最老版本)(CSS3) flexbox:将对象作为弹性伸缩盒显示.(伸缩盒过渡版本)(CSS3) inline-flexbox:将对象作为内联块级弹性伸缩盒显示.(伸缩盒过渡版本)(CSS3) flex:将对象作为弹性伸缩盒显示.

新手来简单学习CSS的display属性

css 操作HTML元素的诀窍在于明白它们工作的方法在于没有特定的形式.一些由标签组成的大部分页面可以设定任何样式.浏览器默认的样式里的大部分html元素由字体样式.margin,padding组成,本质上是显示类型. display属性基本上分为inline,block,和none. inline就像它的本意--显示为inline的元素为行.strong,anchor锚和em强调元素默认是行. block元素前后换行.标题和段落元素是块元素. none,意思不显示元素,在可用性上可以实现漂亮的

JS使用getComputedStyle()方法获取CSS属性值_javascript技巧

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

深入理解CSS属性值语法

万维网联盟(W3C) 使用了一套特别的语法来定义 CSS 的属性值,能让所有的 CSS 属性都用.如果你曾看过 CSS 规范,你可能已经见过这套语法了.就像 border-image-slice 的语法 ,让我们看看: <'border-image-slice'> = [<number> | <percentage>]{1,4} && fill? 如果你不知道这些符号以及它们如何工作的话,这套语法可能非常难理解.然而,这值得花时间来学.如果你理解 W3C

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

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

[原创]XSL学习心得 - 调用属性值

 [原创]XSL学习心得 - 调用属性值也许这个问题很简单吧,但是刚才查了好多篇入门教程都没有涉及,幸好hsower发的xsl语法介绍中有详细的说明.    <xsl:value-of select="元素名称/@属性名称"/>    比如一段XML代码是这样的:   <王朔 网址="www.wangshuo.com">知名作家加著名评论家王朔先生的地方</王朔>    我们可以用<xsl:value-of select=&

CSS设计模式,使用属性值

属性值有以下几种格式:常量文本.常量数字.长度.百分比.函数和逗号分隔的一组值.每个属性可按受其中的一种或多种值. 1.color:blacki把常量值black赋给了color属性.大多数属性拥有唯一的常量值.举个例子,可以给color属性赋上170多种表示颜色的常量,从http://www.aliyun.com/zixun/aggregation/6144.html">papayawhip到ThreeDDark -Shadow. 2.background-color:white,把常量

jQuery 顺便学习下CSS选择器 奇偶匹配nth-child(even)_jquery

对此,我把CSS3标准中nth-child()用法大致介绍下: CSS3伪类选择器:nth-child() 简单的归纳下nth-child()的几种用法. 第一:nth-child(number) 直接匹配第number个元素.参数number必须为大于0的整数. (EG) li:nth-child(3){background:orange;}/*把第3个LI的背景设为橙色*/ 第二:nth-child(an) 匹配所有倍数为a的元素.其中参数an中的字母n不可缺省,它是倍数写法的标志,如3n.