前端学习—-CSS

目录

第一章：CSS—层叠样式表（Cascading Style Sheets）

1.1，软件

1.2，编写的位置

1.3，块元素和内联元素

1.4，样式继承：

1.5，长度单位

1.6，字体

1.7，文本样式 

第二章，CSS选择器

2.1，选择器 

2.2，a的伪类： 

2.3，伪元素： 

2.4，属性选择器title：

2.5，子元素选择器（其它）：

2.6，选择器的优先级： 

第三章：CSS盒子模型

3.1，盒子模型 

3.2，内外边距：

3.3，内联元素的盒子：

3.4，display&visibility&overflow

3.5，文档流

3.6，浮动float 

3.7，高度塌陷

3.8，清除浮动影响clear

3.9，解决高度塌陷方案二：

3.10，解决高度塌陷方案三：

第四章：

 4.1，定位 position

4.2，背景

4.3，标签–表格

4.4，表单

第一章：CSS—层叠样式表（Cascading Style Sheets）

1.1，软件

• 软件名：DreamWeaver（收费）WebStorm（收费）HBuilder（免费）

• 快捷键：帮助+快捷键列表：p+Tab–<p></p>，Control+s保存，提示功能–，control+回车—只让光标回车）

1.2，编写的位置

• 内联样式：写在标签的style属性中，不能复用，不推荐<p style=”color:red;”></p>

• 内部样式表：写在head的style标签中，<style type=”text/css”>  p{ }  </style>，分离结构表现，注释/* */

• 外部样式表：写在CSS文件中，link标签调用，实现分离便于维护，推荐，<link rel=”stylesheet” type=”text” href=”路径”/>

1.3，块元素和内联元素

• 分类：块级元素block element 、行内元素 inline element、行内块元素 inline-block element

• 块元素：独占一行 ，用于页面布局  div、p、h1-h6、form、ul、ol、dl、dt、dd、li、table、tr、td、th、hr

• 内联元素：只占用自身大小，用于设置文本样式  span、img、a、label、code、input、abbr、em、b、big、cite、i、q、textarea、select、small、sub、sup，strong、u

• 特点：块元素可以包含内联元素，反之不行

• 特例：<a>可以包含任意元素，除了自身 <p>里面不能放任何块元素

1.4，样式继承：

• 祖先元素设置样式，则后代元素也自动设置（第一类：style，body{ }）

• 所有背景相关的都不会被继承（照片一大堆嵌套，透明的，表：no）

• <div style=“background-color: yellow;“> <p>aaa</p></div>

1.5，长度单位

• em：1em = 1font-size，常用于设置字体

• 像素px：显示效果越好越清晰， 越小，反之像素越大。

• 百分比%：父元素的属性值发生变化时，子元素也会按照比例发生改变，常用于自适应的页面 

1.6，字体

• 字体大小：font-size：20px/em/% 

• 字体颜色：color：red/rgb(0,187,255)/#084092；//为三原色混合0~255%，后为十六进制

• 字体样式： 

• 斜体样式：font-style：normal/italic/oblique; 正常/斜体/斜体

• 加粗样式：font-weight：normal/bold；正常/加粗

• 小型大写：font-variant：normal/small-caps 小写字母大写表示，但比真正的大写小些4

• 行间距：line-height：2/10%/15px；  行间距=行高-字体大小

• 综合：font:…..字体  文字大小； 其它可无用默认，其它无先后顺序，空格隔开

1.7，文本样式

• 缩进：text-indent：-999em;  正值—向右

• 间距：word-spacing：1px; 单词间的距离

• 对齐：text-align：left/right/center/justify; 左/右/居中/两端对齐

• 修饰：text-decoration：none/underline/overline/line-thruogh; 默认/上/下划线/删除线

• 大小写：text-transform：none/capitalize/uppercase/lowercase; 默认/首字母大写/全大/小

第二章，CSS选择器

2.1，选择器