CSS初级教程 选择符 属性和值

HTML有标签(tag),CSS就有选择符(selector)。选择符就是赋予内部或者外部样式表的名字。在 CSS初级指南中,我们致力于HTML选择符,即是HTML的标签,用来改变一个指定标签的样式。
每个选择符都有属性(properties)在大括号{}中,里面包括诸如color、font-weighth或者 background-color形式的字样。
值(value)在半角英文引号:后面,用半角英文分号;隔离。
body { font-size: 0.8em; color: navy; } 
如上,这给body选择符里的font-size和color属性赋值。
基本上,这应用在HTML文档的话,在body标签之间(整个窗口的内容)文本将会有0.8em大小,显示为深蓝色。
长度和百分比
CSS中有很多专有的属性单位,也有很多能够用在大量属性的常规单位,在你继续学习之前,它们值得你熟悉一下。
em(比如font-size: 2em)是一个大致与一个字符高度相同的单位。
px(font-size: 12px)是一个像素的单位。
pt(font-size: 12pt)是一个磅的单位。
%(font-size: 80%)是一个……单位,等等,哦,是百分比。
其他单位还包括pc(活字),cm(厘米),mm(毫米)和in(英寸)。
一个值是0的时候你不必为它声明一个单位。比如,你不想要边界,可以这样设置:border: 0 。
注意
网页不是静态、绝对的媒体。这意味着,网页具有灵活性,用户被允许按他们的喜好方式浏览网页,包括字体尺寸和屏幕的大小等等。
因此,为font-size属性赋值的单位中,最佳的是em或者%,而px在多数浏览器中会导致文本具有不可缩放性,也会导致贫乏、乏味的文本。

时间: 2024-11-08 21:56:02

CSS初级教程 选择符 属性和值的相关文章

入门:学习网页样式CSS选择符 、属性和值的应用

css|网页 HTML有标签,CSS有选择器.选择器是给内部和外部样式里面的样式命名. 每个选择器都有属性在{}里面,比如简单点像color,font-weight或background-color. 值在冒号(不是等号)后面,分号分离属性. body {    font-size: 0.8em;    color: navy;} 上面的意思是为body选择器设置font-size字体大小和color字体颜色. 所以基本的,当它作用与HTML页面时,在body标签(整个窗口中的内容)之间的文字颜

七 CSS初级教程总结:属性结合起来使用

css|教程 如果你学完HTML初级教程即可学习CSS初级教程,使用CSS处理HTML样式. 下面的代码覆盖了初级教程的所有方面,保存下面的CSS文件并且在浏览器里观看连接的HTML,你可以明白各个CSS属性的用法.最好的学习方法就是理解作用在HTML上的CSS文件,改变CSS HTML会发生什么变化. body {font-family: arial, helvetica, sans-serif;font-size: 80%;color: black;background-color: #ff

CSS selector 选择符有哪些 如何合理运用?

CSS selector 选择符是我们进行CSS网页布局的基础.CSS selector到底有哪些,如何合理的运用呢?选择符可以分为三类,除了第一类HTML selector之外,其它两类我们是可以自己命名的,在进行命名时,注意包含语义,或者添加必要的注释,使我们的代码更清晰,易读. HTML selector 标签选择符 HTML selector就是HTML的标签,如:DIV,TD,P,H1等等,如你用 CSS 定义了它们,在CSS文章所控制的页面中这个标签的性质就按照你的定义来显示. 比如

CSS初级教程-CSS结合JS的运用

利用CSS配合JavaScript的可以做很多更酷的动态页面效果,在本教程的最后给大家简单介绍一下CSS配合JS的应用.首先,要搞清楚事件和动作的概念.在客户端脚本中,JavaScript 通过对事件进行响应来获得与用户的交互.例如,当用户单击一个按钮或者在某段文字上移动鼠标时,就触发了一个单击事件或鼠标移动事件,通过对这些事件的响应,可以完成特定的功能(例如,单击按钮弹出对话框,鼠标移动到文本上后文本变色等). 下面介绍几种常见的事件: onClick:鼠标单击事件.(是指鼠标按下,然后松开时

CSS初级教程 边框

边框可以应用到在主体元素body中的绝大部分HTML元素中. 创建一个包围着元素的边框,你所需要的是边框样式border-style.它们的值可以是 solid.dotted.dashed.double.groove.ridge. inset和outset.(你有必要每个值都试一试,看看效果如何译者注) 边框宽度border-width为边框设置宽度,通常用像素来表示.当然,还可以单独设置四个方向的边框属性,它们是border-top-width.border-right-width. bord

CSS初级教程 边界和补白

边界margin和补白padding(依据国内出版社的翻译惯例,margin被翻译成边界,padding被翻译成补白,译者依照习惯翻译.但译者认为,margin翻译成外边距,padding翻译成内边距更为直白和形象.你可以依据自己的习惯来适应这两种不同的译法.译者注)是隔开元素最常用的两个属性.边界是元素外边的距离,而补白则是元素内部的距离. 为h2改进代码如下:  代码如下 复制代码 h2 {  font-size: 1.5em;  background-color: #ccc;  margi

二CSS Selectors,Properties,and Values 选择器 、属性、值

css|select HTML有标签,CSS有选择器.选择器是给内部和外部样式里面的样式命名. 每个选择器都有属性在{}里面,比如简单点像color,font-weight或background-color. 值在冒号(不是等号)后面,分号分离属性. body {font-size: 0.8em;color: navy;} 上面的意思是为body选择器设置font-size字体大小和color字体颜色. 所以基本的,当它作用与HTML页面时,在body标签(整个窗口中的内容)之间的文字颜色是na

CSS中级教程 class和id选择符

在CSS初级教程中我们仅仅考虑了HTML选择符──以HTML标签形式出现. 你当然可以用类选择符class和标识选择符id来定义自己的选择符. 这样做的好处是,依赖于class或者id,你可以不同地表现相同的HTML元素. 在CSS中,类选择符在一个半角英文句点(.)之前,而id则在半角英文井号(#)之前. 看起来像这样:  代码如下 复制代码 #top {  background-color: #ccc;  padding: 1em  }  .intro {  color: red;  fon

CSS标签语法:详解选择符中的关系选择符

文章简介:CSS标签语法:详解选择符中的关系选择符. 相信大家都对CSS选择符都不陌生,选择符包含:元素选择符.关系选择符.属性选择符.伪类选择符.伪对象选择符.在众多的选择符中,可以让我们根据自己的需要更加灵活性的选择合适的选择符来对样式进行编写,达到最大的质量和效率. 今天就为大家介绍下选择符中的关系选择符,"关系"这可是一等一的大事啊,我们得理清楚,这样做事情才能更加的有效率.不然在CSS中有你受的,哈哈.关系选择符有四个类别:包含选择符.子选择符.相邻选择符.兄弟选择符.接下来