建站软件 优化软件 编程软件 网页辅助 站群程序 网站程序 图像处理 资源教程 字体下载 推荐软件


您的位置:首页 > div+css > CSS基础属性总结

CSS基础属性总结

时间:2015-06-05 10:33:37  来源:免费模板网 作者:风雪 阅读次数 tagscss基础

什么是CSS

     CSS(Cascading Style Sheet,层叠样式表)是一种格式化网页的标准方式,它扩展了 HTML 的功能,使网页设计者能够以更有效的设置网页格式。

6.1.2 CSS的属性单位

6.1.2.1 长度单位

     在CSS中用于描述长度的单位包括:

  • cm 厘米
  • mm 毫米
  • em 当前字体中m字母的宽度
  • ex 当前字体中x字母的高度
  • in 英寸
  • pc 1pc=12点
  • pt 点,1pt=1/72英寸
  • px 像素

6.1.2.2 百分比单位

     在CSS中除了可以使用绝对数来指定单位(如上面所介绍的),还可以用相对数来指定单位。例如:

P{line-height:150%}

     表示该段行高是标准行高的1.5倍。

6.1.2.3 颜色

     层叠样式表允许网页设计者使用以下方式中的一种指定颜色:

  • 颜色名 直接使用标准颜色名称
  • #RRGGBB 使用6位十六进制数表示颜色
  • #RGB 使用3位十六进制数表示颜色,它是#RRGGBB方式的快捷方式。例如:#00FFEE可以表示为#0FE。
  • grb(rrr,ggg,bbb) 使用十进制数表示颜色。
  • grb(rrr%,ggg%,bbb%)使用百分数表示颜色。

6.2 CSS样式定义

     样式表项的组成如下:

selector{property1:value1;property2:value2;......}

     其中selector表示需要应用样式的内容,property表示由CSS标准定义的样式属性,value表示样式属性的值。

     Selector 类型:HTML 标记符、用户定义的 class 类样式、自定义的 ID、虚类 等。

6.2.1 HTML标记符selector

     HTML标记符是最典型的selector类型,网页设计者可以为某个或某些具体的HTML元素应用样式定义。例如:

H1{text-align:center;font-family:楷体_gb2312}

     若将相同的样式应用于不同的selector,可以采用编组的方法简化样式定义。例如:

H1 {color:#ff0000}

H2 {color:#ff0000}

H3 {color:#ff0000}

     可以简化为:

H1,H2,H3 {color:#ff0000}

6.2.2 具有上下文关系的HTML标记符selector

     如果需要为位于某个标记符内的标记符设置特定的样式规则,则应将selector指定为具有上下文关系的HTML标记符。例如:要使位于P标记符内的CODE标记符内的B元素具有红色属性,则应使用如下格式:

P CODE B {color:red}

6.2.3 用户定义的类 selector

     可以使用类(class)来为单一HTML标记符创建多个样式。其语法格式如下:

selector.classname{property:value;...}

例如:H1.rr {color:red}

   然后在网页中需要处引用,所下所示:

<H1 class="rr">此标题为红色</H1>

     如果要定义应用于所有标记符的类,可以直接用句点后跟类名即可。其语法格式如下:

.classname{property:value;...}

例如:.rr{color:red} , 然后在网页中需要处引用,所下所示:

<p class="rr">本段落文字为红色</P>

<H1 class="rr">本标题为红色</H1>

6.2.4 用户定义ID selector

     要将一个ID样式包括在样式定义中,应以一个井号“#”作为ID名称的前缀,其语法格式如下:

#IDname{property:value;...}

     定义了ID样式后,在引用该样式的标记符内使用id属性。例如:

#rr {color:red}

<P id="rr">本段落文字为红色</P>

<H1 id="rr">本标题为红色</H1>

注意:使用.classname和使用#IDname这两种方式在效果上没有区别,但最好只使用其中之一,以免造成混淆。

6.2.5 虚类 selector

     对于A标记符,可以用虚类的方式设置不同类型超链接的显示方式。所谓不同类型超链接,是指访问过的、未访问过的、激活的以及鼠标指针悬停于其上的4种状态的超链接。其虚类的selector如下:

本文地址:https://www.freemoban.com/bjrm/2015/0605/2102.html

猜你喜欢
栏目推荐
模板推荐

Copyright:www.freemoban.com 免费模板网 All Rights Reserved 网站备案:辽ICP备19014872号-2   辽公网安备 21010602000376号  辽公网安备:42900402000182号

免责声明:本站部分资源来自互联网收集,版权归原创者所有,如果侵犯了你的权益,我们会及时删除侵权内容,联系QQ:1615187561 谢谢合作!