@caelumtian
2017-08-30T19:30:49.000000Z
字数 2520
阅读 671
web程序设计 第二课 - CSS
Web程序设计(考研)
基本概念
CSS层叠样式表
层叠样式表(英文全称：Cascading Style Sheets)。
使用方式：
- 行内样式表
<div style="color: #ff0000;">红色</div> - 文档样式表
<style>div{color: #ff0000;}</style>注意<style>标签放在<head>标签中 - 外部样式表
<link rel="stylesheet" href="" type="text/css">放在<link>标签中
选择器格式
简单选择器
- 通配选择器：选择所有的元素
* - 标签选择器：根据指定的标签进行匹配
E - ID选择器：根据指定的ID名称进行匹配
E#id - 类选择器：根据指定的class名称进行匹配
E.class
伪类选择器
1.属性选择器：匹配标签拥有指定属性的内容 E[name=username]
2.组合选择器：多个选择器组合使用
3.后代选择器：直接后代选择器，选择所有的后代元素 ul li; 亲子选择器，选择所有的儿子们 ul > li
4.为一组元素指定选择器，通过逗号分割 h1,h2,h3
5.伪类选择器：
- a:link { ... } /* 未访问过的链接 */
- a:visited { ... } /* 已访问过的链接 */
- a:hover { ... } /* 鼠标移到链接上的样式 */
- a:active { ... } /* 鼠标在连接上按下时的样式 */
- input:focus { ... } /* 获得焦点时的样式 */
选择器优先级
1.普通的特异度
| 选择器 | 内联 | ID个数 | （伪）类个数 | 标签个数 | 特异度 |
|---|---|---|---|---|---|
| nav .list li a:hover | 0 | 1 | 2 | 2 | 0122 |
| .hd ul.links a | 0 | 0 | 2 | 2 | 0022 |
2.特殊的特异度：
*通配符特意度为0!important特意度为最大
CSS属性 - 基础样式属性
字体属性font
font-family：字体类型，平时不需要加双引号，当字体名称有空格的时候需要由双引号font-size：字体大小，默认字体大小为16px，字体单位像素font-style：字体变形，italic斜体font-weight：字体粗细，bold加粗；lighter更细font：简写属性，字体名称在最后，字体大小倒数第二。
文本装饰
text-decoration：文本装饰类型line-through，overline，underlinetext-indent：文档缩进距离
列表属性
list-style-style：列表项的呈现细节list-style: none;：重置列表的细节，去掉装饰
颜色
color：前景色，主要为字体颜色background-color：背景色，主要为文档的背景颜色- 颜色表示方式：红 + 绿 + 蓝 (各255色)，
hash方式#ff0000；rgb方式rgb(255, 0, 0)；英文表示方式
背景
background：背景样式定义，这里主要研究backgound-color背景颜色，bakcgound-image背景图片
水平格式化与垂直格式化
块级元素格式化
盒模型
1.盒模型图示：
2.border 边框：边框属性主要由
border-(direction)-width：指定位置边框宽度border-(direction)-style：指定位置边框样式，solid实线(默认)，dotted点线，dashed虚线border-(direction)-color：指定位置边框颜色border-(direction)：合写属性，顺序为 粗细-样式-颜色
3.margin 外边距：主要用来描述盒与盒之间的距离问题，margin-(direction): 10px; 合写顺序为：上右下左。若值为auto则表示自动赋值。利用margin做内容居中。
4.padding 内边距：主要用来表示边框与实际内容之间的内容，值同margin
5.width 内容去宽度
6.height 内容区高度
7. 盒模型定律：父元素width = 子元素(margin-left + border-left + padding-left + width + padding-right + border-right + margin-right)
8. 长度定律：高度无法继承，html根元素永远为0(除非指定)，宽度永远为100%
9. 外边距合并：垂直外边距会自动合并，同号取绝对值最大，异号相加。
内联元素格式化
文本对齐
text-align：文本水平位置left,center,rightvertical-align：文本垂直位置top,bottom,baseline,center,pxline-height：行高
定位
浮动定位：
float：浮动定位，使元素脱离正常流。clear：清除浮动带来的印象。
position定位
static：默认定位absolute：相对定位，元素会脱离正常流，样式重新计算。并且定位只能参照父级元素定位非static的元素relative：绝对定位，相对于原来的位置定位，不会脱离文档流。fixed：相对于浏览器窗口定位
扩展内容
1.更高级的选择器和伪类：
E:first-child： 选择匹配E的元素，且该元素为父元素的第一个子元素E > F：选择匹配F的元素，且该元素为所匹配E元素的子元素。E + F：选择匹配F的元素，且该元素为所匹配E元素后面相邻的位置。- 还有很多用到了再说
2.BFC 块级格式化上下文
BFC布局规则
- 内部的Box会在垂直方向，一个接一个地放置。
- Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
- 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
- BFC的区域不会与float box重叠。
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
计算BFC的高度时，浮动元素也参与计算
哪儿些元素会产生BFC
- 根元素
- float属性不为none
- position为absolute或fixed
- display为inline-block, table-cell, table-caption, flex, inline-flex
- overflow不为visible
