css基础

“DIV+CSS”布局是有误的，标准称为“XHTML+CSS”布局，是改变“table”布局的一种新的布局方法。

W3C：world Wide Web Consortium：万维网联盟。制定web标准。

1. web标准

·web标准是一系列标准的集合。包含HTML、XHTML、JavaScript、CSS标准等。

·目的：统一web表现层的技术标准，匹配不同浏览器或多终端给用户，增强用户体验。

·优点：

• CSS的使用使html的样式设置更简便；
• html文档的样式修改更简便，html与CSS相分离。（换衣服，不同社会实践地震，网站换肤）；
• 速度快；
• web标准匹配搜索引擎排名；
• 匹配手机，冰箱，打印机等多终端访问；（技术发展方向）；

·web标准组成：

• 结构structure：XHTML、HTML5；
• 表现presentation：CSS；
• 行为behavior：JavaScript；

2. 标准布局

·XHTML+CSS

3. 理解表现与结构分离

·内容：展示的数据；

·结构：数据的组织方式，html结构实现；

·表现：html文本的显示效果，CSS样式实现；

·行为：html文本元素和用户的交互效果，JavaScript脚本实现；

·简单文章网页案例：内容的结构html标签实现，内容表现CSS控制html标签id名，行为JavaScript控制CSS样式类名；

4. css简介

·CSS ：Cascading Style Sheets：层叠样式表。

·CSS可以用于html、XHTML、XML的样式。

·CSS语法结构：selector{property:value;}。

·名言html案例：

• 某些html标签有自己默认的属性值，reset html元素属性值；
• 不同浏览器，元素默认属性值有时不同，兼容性问题；
• span标签为行内标签，控制行内元素；

5. css属性

·font-size:12px;

·color:#ccc;

·font-family:’Arial’,’宋体’;

·line-height:1.5em;文字在垂直方向居中，将行高设置为元素的高度：文字不能超过元素的宽度；

·font-weight:bold;

6. 在网页中应用CSS

·内联样式表：在html标签中设置CSS的style属性；

·嵌入样式表：在html的head部分设置CSS的style标签；

·外链样式表：在html中引入CSS文件；在html的head部分link标签引入CSS文件；

·导入样式表：在html中导入CSS文件；@import url(“……”);

·导入类似嵌入，把样式添加到html文件中：

• 占用网页文件大小；
• 有些浏览器，解析会有问题，@import最后读取；
• 用@import 导入多个CSS样式文件到新的CSS文件中；

7. css的特性

css层叠样式表

·继承：子元素会继承父元素的某些样式；某些子元素有默认样式，就不用继承了；

·层叠：子元素定义了与父元素相同的样式，会覆盖掉父元素的样式；后面的样式，会覆盖掉前面的样式；

·css样式优先权：就近原则，作用范围越小，优先级越高；

·选择器优先权：行内>id>class>标签选择器；

8. 文本样式

·font-style:italic,normal;斜体

·text-decoration:underline,overline,line-through;下划线

·letter-spacing:2em;字符间距

·word-spacing:2em;单词间距；汉字间要加入空格；

·text-indent:2em;缩进

·text-align:center;文本水平居中

·white-space:normal,pre,norep;空白处理

·text-transform:;文本大小写

·vertical-align:sub,sup,middle;垂直对齐

9. 链接样式

·CSS伪类：CSS控制元素的某种状态；

• :hover{}鼠标移动到链接；
• :link{}未访问链接；
• :visited{}已访问链接；
• :active{}鼠标按下链接；
• 书写顺序：L-V-H-A；

·自定义特定链接的CSS类：a.类名.状态

·:focus{}获得焦点；

·登录框获得焦点案例：

• 文本框名称与文本框不居中对齐，设置元素垂直居中，vertacal-align:middle;；
• 文本框内文字不居中显示，设置文字行高等于元素的高度，line-height:30px;；

10. CSS选择器

·选择器命名规范：id、class的统一命名规范，英文含义命名，语义化，驼峰法；

·网站命名规范：

·选择器：

• 标签选择器；
• id选择器；
• class选择器；
• 通配符选择器*：控制所有元素，效率低；
• 嵌套选择器：精简代码；
• 选择器分组：对个选择器集体定义；

11. 盒子模型

CSS布局主要通过盒子模型实现。

·margin padding border content；

·box的宽度=左边距+左边框+左填充+内容+右填充+右边框+右边距；

·margin也是属于box的，尽管在边框外；

·box立体结构：border content padding background-image background-color margin；

·width/height：content，不是box的宽度；

·padding/margin:top right bottom left ;

·margin:0;padding:0;resset浏览器的默认标签盒子属性值；

·border:1px solid blue;

·盒子居中margin:auto;；

·盒子内容居中line-height=height；