HTML学习之三-CSS是什么

Web标准的构成：结构，表现，行为。

结构：xhtml, 表现：css。行为：javascript。

与内容交互：javascript。Eg：选项卡之类的。

CSS: cascading style sheets.层叠样式表。

语法结构。

为了CSS代码优化，所有属性值后面要有分号；

在<style>中控制了字号大小，但是<h1>这样的是默认标签，不受控制。

为了统一浏览器，将所有设为默认。Px像素（pixel）。em相对字体尺寸。

<span>控制文档中的行内元素。用相对值。span {

       font-size:2em;

       color:green;

  }

字体，要用大家电脑上都有的字体。

设置垂直居中，行高=元素高度。前提：但是不能换行。

将CSS应用于XHTML：

1.       内联，写在现有标签中。用于一个标签

2.       嵌入式。写在head中。<style> p{属性：值}</style>用于一类标签。

3.       外联。可以将CSS写在一个单独的文件中。Style.css，制作网页时，直接调用该文件。实现样式与结构分离。<link href=”**.css” type=”text/css” rel=”stylesheet” charset=”utf-8”>

4.       导入式。<style type=”text/css”>@import url{“style1.css”}但是，有的浏览器最后才读这一句，所以就没用了。

CSS作用：修饰网页结构。

选择符。

1.       什么是选择符？你要控制的对象。设定ID选择符。

2.       分类，标签选择符，ID选择符：#开头。类选择符. .开头。通过class=”name”应用于元素。类用于多次重复的形式。类名和ID名不要以数字开头。

3.       可以给某个元素加多个类，类名之间空格隔开。

特点：1.继承。比如p可以继承body。但是，有些子元素，本身有默认值，就不会继承了。

2.层叠。子元素覆盖父元素的样式。后面的会覆盖掉前面的。

CSS优先权。冲突时，听谁的？

行内>内嵌>链接>@import。作用范围越小，优先权越高。就近原则。

可以提升某个属性的权限。!important. eg. .cla2 {font-size:20px !important;color:yellow;}

常用的文本CSS控制样式。

Font-style, text-decoration(none, underline)不用兼容性存在差别的属性。

Letter-spacing: normal/length.

Word-spacing: normal. 不控制汉字。只控制空格和字母。字符的间距。

Text-indent文本缩进。

text-indent:2em; text-align:center

white-space:normal;pre;nowrap（不换行）;控制是否换行。

Text-transform:none;capitalize;uppercase;lowercase;

Vertical-align: sub, super, top, middle,等，很多。

CSS控制元素的某种状态：伪类。比如超级链接。:name{}。元素名称：伪类名称{属性：值}

1.:link{} 2.

Eg. a:link{text-decoration:none;color:black;}

a:visited{text-decoration:line-through;color:green;}

a:hover{text-decoration:underline;color:blue;}

a:active{text-decoration:overline;color:red;}

注意顺序：LVHA.

自定义链接的CSS类：a.类名：状态。选择符：伪类{属性：值；}

CSS命名规范，1.驼峰法，除了第一个单词首字母小写，其他首字母都大写。2.帕斯卡命名法，所有单词首字母大写。3.匈牙利命名法，名称前加小写字母作为前缀。常用前两种。方便协同工作。

CSS选择符。

控制所有元素：通配符，*。作用于所有HTML元素。慎用。效率低。

* {margin:#;pading:#;} 重置所有默认值。

选择符嵌套使用，包含选择符： p strong {}用于在p里面的strong。

或者：#five strong{}  用于id为five的其中的strong标签格式。

选择符分组，将同样的样式用于多个选择符，选择符之间用逗号隔开。

标签指定选择符：h1#five {}对ID  .或h1.five {}对类

组合选择符，以上进行组合使用.  h1.p1, #content h1{}

CSS选择符，就是将把你定义的样式用给谁。