CSS
Cascading Style Sheet层叠样式表：用来控制网页外观的一门技术
你好
CSS引入方式
- 外部样式表：把CSS代码和HTML代码单独放在不同的文件中，然后在HTML文件的head标签内使用link标签来引用CSS文件
- 语法：
<link rel="stylesheet" type="text/css" href="文件路径" /> - rel属性：取值固定，表示引入的是一个样式表文件
- type属性：取值固定，表示是标准的CSS
- href属性：指定css文件路径
- 语法：
- 内部样式表：把CSS代码和HTML代码放在同一个HTML文件中，其中CSS代码放在head标签内的style标签内
- 语法：
<style type="text/css"> 内容 </style> - type属性：取值固定，表示是标准的CSS
- 语法：
- 行内样式表：把CSS代码和HTML代码放在同一个HTML文件中，其中CSS代码是在标签的style属性中定义的
CSS选择器
元素属性
- id属性：用于唯一标识页面中的一个元素
- class属性：用于为一个或多个元素指定一个或多个样式类
- 选择器概念：选择一个或多个元素来添加CSS样式
基础选择器
- 元素选择器：选中相同的元素，然后对相同的元素定义同一个CSS样式
元素符号{属性1:属性值1;属性2:属性值2;} - id选择器：为一个元素设置一个id属性，然后针对各个id定义CSS样式
#id名称{属性1:属性值1;属性2:属性值2;} - class选择器：为一个或多个元素设置一个class属性，然后针对属于同一个class的元素定义CSS样式
.class名称{属性1:属性值1;属性2:属性值2;} - 后代选择器：选择元素内部某一种元素的所有元素
#父元素 子元素{属性1:属性值1;属性2:属性值2;} - 群组选择器：对多个选择器进行相同操作
选择器1,选择器2……{属性1:属性值1;属性2:属性值2;}
字体样式
- 字体类型：
选择器{font-family:"字体";}->Arial、Times New Roman、微软雅黑、宋体（默认） - 字体大小：
选择器{font-size:关键字/像素值;}->small小、medium中、large大或者取像素值 - 字体粗细：
选择器{font-weight:关键字/粗细值;}->normal正常（默认）、lighter较细、bold较粗、bolder很粗或者取粗细值（100-900的整百数） - 字体风格：
选择器{font-style:属性值;}->normal正常（默认）、italic斜体、oblique斜体 - 字体颜色：
选择器{color:颜色;}->颜色的英文名称或十六进制RGB值（#000000黑色、#FFFFFF白色） - 注释：
/*内容*/
文本样式
- 首行缩进：
选择器{text-indent:像素值;}->首行缩进的像素值应该是字体大小的两倍 - 水平对齐：
选择器{text-align:属性值;}->left左对齐、center居中、right右对齐 - 文本修饰语法：
选择器{text-decoration:属性值;}->none默认无、underline下划线、line-through中划线、overline顶划线- 在HTML中，我们实际使用s标签实现中划线、u标签实现下划线，但是在前端开发中，通常使用CSS来实现，符合结构与样式分离的规则
- 超链接a标签默认自带下划线，使用
text-decoration:none可以去除
- 大小写：
选择器{text-transform:属性值;}->none默认无、uppercase转换为大写、lowercase转换为小写、capitalize单词首字母变为大写 - 行间距/行高：
选择器{line-height:像素值;} - 字间距：
选择器{letter-spacing:像素值;} - 词间距：
选择器{word-spacing:像素值;}
边框样式
- 边框宽度：
选择器{border-width:像素值;} - 边框样式：
选择器{border-style:属性值;}->none默认无、dashed虚线、solid实线 - 边框颜色：
选择器{border-color:关键字/十六进制RGB值;} - 简写形式：
选择器{border:宽度 样式 颜色;} - 局部样式：上
border-top、下border-bottom、左border-left、右border-right - 若不需要边框的某条边，只需要将该边宽度设置为0px或none
列表样式
- 定义列表项符号：
选择器{list-style-type:属性值;}
->属性值跟列表相同 - 去除列表项符号：
选择器{list-style-type:none;} - 定义列表项图片：
选择器{list-style-image:url(图片路径);}
表格样式
- 表格标题位置：
选择器{caption-side:属性值;}->top顶部、bottom底部 - 表格边框合并：
选择器{border-collapse:属性值;}->separate分离、collapse合并 - 表格边框间距：
选择器{border-spacing:像素值;}
图片格式
- 图片大小：
选择器{width:像素值;height:像素值;} - 图片边框：
选择器{border:宽度 样式 颜色;} - 水平对齐：
选择器{text-align:属性值;}->left左对齐、center居中、right右对齐 (需要在父标签定义) - 垂直对齐：
选择器{vertical-align:属性值;}->top顶部对齐、middle中部对齐、baseline基线对齐、bottom底部对齐 - 文字环绕：
选择器{float:属性值;}->left左浮动、right右浮动
背景样式
- 背景颜色：
选择器{backgroung-color:属性值}->颜色或十六进制RGB值 - 背景图片显示：
选择器{background-image:url(图片路径)}
（要给图片定义高度和宽度才能显示） - 背景图片重复：
选择器{background-repeat:取值}->repear平铺、repeat-x水平方向平铺、repeat-y垂直方向平铺、no-repeat不平铺
（元素的宽和高要大于图片才能实现重复） - 背景图片位置
- 像素值：
选择器{background-position:水平距离 垂直距离;}->相对于左上角 - 关键字：top、bottom、left、right、center组合成九宫格
- 像素值：
- 背景图片固定：
background-attachment:属性值;->scroll随元素一起滚动（默认）、fixed固定不动
超链接样式
- 超链接伪类：指的是鼠标单击时不同时期的不同样式
a:link{属性;}未访问的样式a:visited{属性;}访问后的样式a:hover{属性;}鼠标经过时的样式a:active{属性;}鼠标单击激活时的样式
（4种样式的定义顺序不能改变且不一定要全部定义）
选择器:hover{属性;}可以定义任何一个元素在鼠标经过时的样式- 鼠标样式：
选择器{cursor:属性值;}
- 自定义鼠标样式：
选择器{cursor:url(图片地址)，属性值u;}->鼠标样式图片后缀名一般都是".cur"
盒子模型
- CSS盒子模型：页面中所有元素都可以看成一个盒子并占据着一定的页面空间
- 内容区content：可以是文本或图片
- 需要给块元素定义宽度和高度
- 给行元素定义宽和高是无意义的
- 如果没有定义width则会延伸到一整行
- 边框border：用于定义元素的边框，一般使用简写形式：
选择器{border:宽度 样式 颜色;} - 内边距padding：用于定义内容与边框之间的距离
- 有四个方向：top、right、bottom、left
- 可以分开写，也可以按照顺时针顺序简写
- 外边距margin：用于定义当前元素与其他元素的距离
- 有四个方向：top、right、bottom、left
- 可以分开写，也可以按照顺时针顺序简写
文档流
定义
元素在页面中出现的位置和顺序
- 正常文档流：将页面按行分，每个块元素从上到下独占一行，每个行元素从左到右排列
- 脱离文档流：使用浮动或定位改变默认的文档结构
浮动布局
- 浮动设置：
选择器{float:属性值;}->left左浮动、right右浮动 - 作用：宽度由内容决定，不再单独占据一行，适用于将多个元素排列在同一行
- 清除浮动带来的影响：
选择器{clear:both;}
定位布局
- 固定定位：
选择器{position:fixed;}->参考对象是浏览器页面的四条边 - 相对定位：
选择器{position:relative;}->参考对象是原始位置 - 绝对定位：
选择器{position:absolute;}->参考对象是浏览器页面的四条边->完全脱离文档流，独立于其他元素 - 静态定位：
选择器{position:static;}->默认值，不需要设置，即保持文档流中的位置
是浏览器页面的四条边->完全脱离文档流，独立于其他元素 - 静态定位：
选择器{position:static;}->默认值，不需要设置，即保持文档流中的位置
253
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
