关于对CSS学习的总结
关于对CSS学习的总结
W3C
World Wide Web Consortium的缩写，中文是W3C组织或者万维网联盟。
W3C标准或者叫web标准 web标准是一系列的标准。
结构层： HTML 用于描述网页的展示结构；
表现层： CSS 用于修饰装饰网页的美观度；
行为层: JavaScript 用于完成页面的组件；
CSS
CSS是Cascading Style Sheet的缩写，翻译为“层叠样式表”，简称“样式表”。
主要用于修饰 html xhtml html5 xml 让网页有这种千变万化的形式
语法：选择符{属性：值}
body{font-size:12px;}
CSS书写的四种格式
选择器：
- HTML标签选择器：在HTML页面中使用的标签，如果在CSS中被定义，那么此网页的所有该标签都将按照CSS中定义的样式显示。
- 类选择器：使用HTML标签的class属性引入CSS中定义的样式规则的名字，称为类选择器，class属性指定的样式名字必须是以“.”开头。
- ID选择器：ID属性是用来定义某一特定的HTML元素，与class属性刚好相反，class属性是用来定义一组功能或格式相同的HTML元素。ID选择器定义的CSS名称必须以“#”开头，
- 通用选择器：是所有选择器中最强大却最少使用的。通用选择器的作用就像是通配符，它匹配所有可用元素。
- 伪类选择器：是指对同一HTML元素的各种状态和其所包括的部分内容的一种定义方式。
Id的优先级高于class
1、内嵌式引入： 把style标签嵌套在head标签中
Document
一些老的浏览器不支持 iframe。
如果得不到支持，iframe 是不可见的。
2、行内样式
浏览器不支持 iframe。
3、外链样式把css当成是一个文件，通过link标签引入到html中
4.、嵌入样式内嵌和外链一种综合性的使用，不太常用
样式的显示取决于距离，即显示距离目标最近的样式
可以连接多个html应用到html里面
行内样式表、内嵌样式表、外部样式表各有优势，实际的开发中常常
需要混合使用：
• 有关整个网站统一风格的样式代码，放置在独立的样式文件*.css
• 某些样式不同的页面，除了链接外部样式文件，还需定义内嵌样式
• 某张网页内，部分内容”与众不同“，采用行内样式
CSS的特点：
1、继承：
网页中子元素，将继承父元素的样式
例如：要控制段落p中的文字大小，可以直接给body标记加样式。
2、层叠：
网页中子元素定义了与父元素相同的样式，则子元素的样式将覆盖掉父元素的样式
后面定义的样式，会覆盖前面定义的样式。
常用样式属性：
| CSS | 说明 |
|---|---|
| 颜色 | color |
| 字体大小 | font-size |
| 字体 | font-family:Arial,‘宋体’ |
| 文本对齐 | text-align |
| 文本缩进 | text-indent：2em 可以为负值 |
| 行高 | line-height：150% line-height：1.5em |
| 字体粗细 | font-weight：normal[正常]bold[粗体] |
| 边框样式 | border-style |
| 边框宽度 | border-width |
| 边框颜色 | border-color |
| 上边距 | top |
| 左边距 | left |
| 宽度 | width |
| 高度 | hight |
| 背景颜色 | background-color |
| 背景图片 | background-image |
• 语法说明
该语法中的4个属性值可以任意选择其中一个。其中，left代表左对齐方式；right代表右对齐方式；center代表居中对齐方式；
Text-align 它只能控制文本是否居中 不能控制div是否居中
如果想让div居中 要通过盒子模型中margin:0 auto;
所有的网页都要有hn标签 利于搜索引擎搜索
text-indent：-9999em；去隐藏页面的标题。
Text-transform 用于大小写字母转换
设置重复背景图片——background-repeat
background-repeat:repeat|repeat-x|repeat-y|no-repeat
设置背景图片位置——background-position
伪类
| 状态 | 语法 |
|---|---|
| 未访问链接 | a:link{color:#ff0000} |
| 已访问链接 | a:visited{color:#00ff00} |
| 鼠标移动在链接上 | a:hover{color:#ff00ff} |
| 鼠标按下到链接上 | a:active{color:#0000ff} |
盒子模型
内边距 padding 用于填充内容内部
外边距 margin 用于描述浏览器边缘到内容的之间的距离
边框 border：1px solid black
像素值 实线 颜色
margin：100px 上下左右都是100px的距离
margin：100px 200px； 上下100px、左右 200px
margin：100px 200px 300px 上100px 左右 200px 下300px
margin：100px 200px 300px 400px 上、右、下、左
margin-top margin-left margin-right margin-bottom
边框也适用于4个方向
块状元素和内联元素
块状元素 具有高度和宽度的属性，但是它不允许其他元素和它同行显示
代表标签 div p 等等
块状元素的默认属性： display:block;
内联元素 不具有宽度和高度的属性 允许其他元素与其同行显示
代表标签 a span
内联元素的默认属性 display:inline;
块状元素和内联元素之间可以进行转换
Display：none 可以隐藏元素
设置盒子
1、在使用边框颜色复合属性border-color时，如果只设置1种颜色，则四条边框的颜色一样；设置2种颜色，则边框的上下为一个颜色，左右为另一个颜色；设置3种颜色，边框的颜色顺序为上、左右、下；设置4中颜色，边框的颜色顺序为上、右、下、左。
2、边框宽度属性border-width是一个复合属性，可以同时设置四条边框的宽度。
3、border-style是一个复合属性，其他4个都是单个边框的样式属性，只能取一个值，而复合属性border-style可以同时取一到4个值。下面分别说明border-style属性的4个取值方法：
— 取一个值：四条边框均使用这一个值。e:s
— 取两个值：上下边框使用第一个值，左右边框使用第二个值，两个值一定要用空格隔开。
— 取三个值：上边框使用第一个值，左右边框使用第二个值，下边框使用第三个值，取值之间要用空格隔开。
— 取4个值：四条边框按照上、右、下、左的顺序来调用取值。取值之间也要用空格隔开。
布局
1、定位布局：
属性：positon
描述：设置对象的定位方式
值：
static 静态定位：页面中的每一个对象的默认值。
absolute 绝对定位：将对象从文档流分离出来，通过设置left、right、top、bottom四个方向相对于父级对象进行绝对定位。如果不存在这样的父对象，则依据body对象。
relative 相对定位：对象不从文档中分离，通过设置left，right，top。bottom四个方向相对于自身位置进行相对定位。
2、浮动布局：
浮动是css实现布局的一种方式，包括div在内的任何元素都可以以浮动的方式进行显示。
基本语法：
float:left|right|none
left 表示浮动元素在左边，是居左对齐的。
right 表示浮动元素在右边，是居右对齐的。
none 表示不浮动，是默认值。
3、清除浮动
当元素有浮动属性时，会对其父元素或后面的元素产生影响，会出现一个布局错乱现象，可以通过消除浮动的方法来解决，浮动元素的影响。
清除：clear
基本语法
clear:left|right|both|none
left 表示不允许在某元素的左边有浮动元素。
right 表示不允许在某元素的右边有浮动元素。
both 表示在某元素左右两边都不允许有浮动元素。
none 表示在某元素左右两边都允许有浮动元素。
overflow
visible [默认值。不剪切内容也不添加滚动条]，
auto [在必需时对象内容才会被裁切或者显示滚动条]，
hidden [ 不显示超过对象的尺寸的内容]，
scroll [总是显示滚动条]
3种隐藏元素的方法：
- display：none
- width：0 height0
- overflow:hidden
zoom
缩放：
normal：默认值。使用对象的实际尺寸
number：百分数 | 无符号浮点实数。浮点实数值为1.0或百分数为100%时相当于此属性的normal值
zoom:1 解决ie6高度自适应问题