css
概述
- css是html使用的层叠样式表，主要用来改变html元素的显示样式（宽高，像素，颜色，布局等）。css的存在简化了html样式的书写（如果不使用css，就得在标签上添加相应属性，会导致标签较长。
使用方式
- css代码可以写到单独的文件内，也可以放于
<head>...</head>标签内 - 单独文件：引入方式
<head><link href="/css/xx.css" rel="stylesheet" type="text/css" />...</head> - html内定义：
<head><style>...</style></head>
选择器
- 通用选择器：*{}，可以选择html页面的所有元素。
- 类型选择器：p{},a{}…用来选择特定类型的标签。
- 类选择器：.class{}需要标签上有class属性配合选择指定标签。
- ID选择器：#id，需要标签有id属性配合选择指定标签（id是唯一的但是class不唯一）
- 子元素选择器： ul>li{}，可以选择ul标签内所有直接li子元素。
- 后代选择器：ul li{}，表示选择ul内所有的li元素（无论是不是ul的直接子元素）
- 相邻兄弟选择器：p+span{},表示匹配与p标签直接相邻的兄弟标签是span的标签。
- 普通兄弟选择器：p~span{}，匹配与p相邻的兄弟标签为span的标签。
- 普通属性选择器：p[class]{}，表示包含class属性的p标签
- 属性值选择器：p[class=“text”]{}，表示选择class值为text的p标签。
- 属性部分选择器：p[class~=“text”]{}表示选择class值包含text单词的p标签。
- 属性开头选择器：p[class^=“te”]{}，表示选择class值以tez字符串开头的p标签。
- 属性包含选择器：p[class*=“te”]{}，表示选择class值包含te字符串的p标签。（和~=有区别）
- 属性结尾选择器：p[class$=“ex”]{}，表示选择class值以ex字符串结尾的p标签
颜色和文本
- 普通文本颜色：color:red;或者用#ccbbaa或rgb(255,255,255)。
- 背景颜色：background-color，可取值和普通文本颜色一样。
- 透明度：opacity:取值为0-1之间，表示透明度。或者使用rgba（255，255，255，0.5）设置。
- 文本大小：font-size:xxpx;或者取值为%和em。
- 字体：font-family
- 粗细：font-weight:normal(正常），bold（粗体）。
- 斜体：font-style:italic(斜体)，normal(正常)。
- 大小写：text-transform:uppercase(大写），lowercase(小写），capitalize(首字母大写）。
- 下划线：text-decoration:none(清楚下划线等），underline（下划线），line-through(删除线)
- 行间距：line-height
- 字间距，字符间距：word-spacing，letter-spacing
- 水平对齐：text-align
- 行内元素垂直对齐方式：vertical-align:text-top(文本从顶部开始对齐)，text-bottom(文本从底部对齐），middle（中部对齐，基线）
- 文本阴影：text-shadow:1px 1px 1px #000000;前两个分别制定阴影向右，向下延伸，第三个指定阴影模糊程度，第四项指定阴影颜色。
- 链接样式：a:link{}未被访问过的连接设置属性，a:visited{}访问过的连接设置属性。a:hover{}鼠标悬停在连接上的属性，a:active{}点击连接时的属性。
- 用户选中时的属性：:focus{}
- 背景相关：背景图像background-image:url(…/images/xxx.jpg);背景重复：background-repeat: repeat -x(设置横向重复)；背景图像位置：background-position：-200px -40px，表示背景图像向右向下移动对应像素。
盒子模型
- 理解盒子模型：html的内容都是放到盒子中的，标签在页面上的表现方式就是盒子。
- 块级盒子元素：div。行内盒子元素：span。块级元素和行内元素之间可以相互转换（通过display属性）。可以通过设置visiblity属性来调整盒子的可见性。
- 盒子需要放得下所包含的显示内容，通过width和height来给盒子设置宽高。当缩放网页是盒子中的内容可能会超出盒子范围，可以给盒子添加overflow属性来设置内容溢出之后的处理操作，scroll表示添加一个滚动条，溢出时可拉动，hidden表示隐藏溢出内容。
- 边框：border：1px soild red。可以快速设置红实线的1像素边框，也可以通过border-width，border-style,border-color来分别设置边框宽度，线型和颜色。（宽度设置时遵循上右下左规律）
- 内边距：padding表示元素内容与边框之间的宽度。
- 外边距：margin表示盒子与盒子之间的宽度。
元素布局
- 基本布局：通过div或者span包裹成组的盒子，使其在网页中独占一行或者处于行内。
- 元素定位机制：普通流定位，相对位置，绝对位置，固定位置和浮动。
- 普通流使用的就是基本布局。
- 相对位置是使盒子从相对于普通流的位置移动，但是其不脱离普通流，在普通流的位置还是原来的位置，所以，其他的元素不会受其位置改变影响。
- 绝对位置会使盒子脱离普通流，会导致其他元素忽略这个盒子的存在。但是其相对于页面位置固定，相对于浏览器位置不固定。
- 固定定位是一种特殊的绝对定位，会使盒子相对于浏览器固定（即不会随着滚动条的上下滑动而改变位置）。
- 浮动会让盒子脱离普通流，会让盒子变成一个可以在周围浮动其他元素的块级元素。如果一个元素只包含了浮动元素，浏览器会把这个元素的高度看做是0.（解决方法可以将这个元素的overflow属性设置成auto，并且把width设置成100%）
796
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
