css笔记

注释:  /* */
1、css和html的结合方式
(1)用(每个)html标签上的style属性结合
(2)使用html的<style>标签
(3)在style标签里使用语句 @import url(css文件路径);(某些浏览器不支持)
(4)使用头标签link引入外部css文件
2、css的选择器(* 代表所有)
(1)标签选择器

• 使用标签名作为选择器名称： 标签名{css属性}

(2)class选择器

• 每个html标签都有个class属性(可以有多个class属性,用空格隔开)
  • - [标签].class名{css属性}　　

(3)id选择器

• 每个html标签都有个属性id
  • - [标签]#id名{css属性}　　

(4)属性选择器

• 选择具有指定属性值的标签
  • - 选择器[id='abc']{css属性}　　

优先级：

• style属性 > id选择器 > class选择器 > 标签选择器

3、css的扩展选择器
(1)关联选择器

• 指定嵌套标签里面的样式(标签1中的标签2)
  • - 标签1 标签2{css属性}　　

(2)组合选择器

• 把不同标签设置成相同的样式
  • - 标签1,标签2{css属性}}　　

(3)伪元素选择器

• css里面提供了一些定义好的样式,可以定义元素在不同条件下的样式
• 超链接(顺序不能变)
  • 状态：原始状态(:link)，鼠标放上去(:hover)，点击还没释放(:active)，点击后(:visited)　　
  • - a:状态{css属性}}　　

(4)相邻兄弟选择器

• 标签1 + 标签2{css属性}
  • 标签2紧邻标签1之后,有同一个父元素　　

4、css属性(冒号设置)
定位

• float：指出对象是否及如何浮动(可以使元素飘起来)(当浮动时必须指定宽)
• clear: 规定元素不被浮动元素覆盖(使普通元素不被浮动元素覆盖)
• display: 规定如何显示该元素(隐藏(不占位置),内联, 块状等)
• visibility: 规定元素是否可见(隐藏时占页面位置)
• position: 定位类型, 作用于 top 等属性
• 相对定位(相对于正常位置,原来的位置不会被其它元素占用),绝对定位(相对于父元素位置,不占用其它元素位置,会盖在其它元素上)等
• 用绝对定位时,父元素要有 position 属性,否则会一直向上找,直到body
• top: 设置相对于顶部偏移(buttom:下, left:左, right:右)
• z-index: 设置元素的堆叠顺序(当使用 绝对定位 时使用,当多个绝对定位元素重叠时,此值大的会在上面)
• overflow: 规定当子元素内容溢出时的处理

盒子

• margin: 外边距(margin-top:上,margin-right:右,margin-bottom:下,margin-left:左)
• padding: 内边距(内边距不算在元素大小中)(padding-top:上,padding-right:右,padding-bottom:下,padding-left:左)
• border: 设置边框属性(border-top:上...)(边框宽度不算在元素宽度中)
  • 可设置的属性(可以直接设置用空格隔开,也可单独设置):　　
    • border-width: 设置边框宽度, 当 border-style 不为 none 时有效　　　　
    • border-style: 设置边框样式　　　　
    • border-color: 设置边框颜色(red/#000000)　　　　
• border-radius: 设置圆角边框　　
  • border-bottom-left-radius: 设置左下　　
  • border-bottom-right-radius: 设置右下　　
  • border-top-left-radius: 设置左上　　
  • border-top-right-radius: 设置右上　　
• border-image: 将图片作为边框
  • 可设置的属性(可以直接设置用空格隔开,也可单独设置):　　
    • border-image-source: 图片的路径　　　　
    • border-image-slice: 图片切片位置(那部分显示为边框)　　　　
    • border-image-width: 图片边框的宽度　　　　
    • border-image-outset: 边框图像区域超出边框的量　　　　
    • border-image-repeat: 图像边框如何显示　　　　
• box-shadow: 给边框添加阴影　　
• width: 元素宽度
• height: 元素高度
• background: 背景样式
  • 可设置的属性(可以直接设置用空格隔开,也可单独设置):　　
    • background-color: 背景颜色(red/#000000)　　　　
    • background-position: 背景图像的位置　　　　
    • background-size: 规定背景图片的尺寸　　　　
    • background-repeat: 规定如何重复背景图像　　　　
    • background-attachment: 规定背景图像是否固定　　　　
    • background-image: 规定要使用的背景图像　　　　
• opacity: 规定元素的透明程度
• cursor: 规定鼠标放上时鼠标的形状
• columns: 规定子元素分成几列以及列的宽度

变化

• transform: 对元素进行转换(旋转,缩放,移动,倾斜等)
• cursor: 定义光标形状
• transition-delay: 设定当状态改变(伪类选择器)时,几秒后属性变化
• transition-duration: 设定改变状态(伪类选择器)要经过几秒(当此值为0时, 没有过度效果)
• transition-timing-function: 设定状态改变(伪类选择器)的速率
• transition-property: 设定应用过渡效果的属性(当指定属性变化时,过渡效果开始)
• animation: 设定动画

文本

• text-indent: 设置文本块首行的缩进(段落效果)
• text-align: 规定水平对齐方式(靠左,居中等)
• text-decoration: 设置文本的装饰效果(下划线等)
• text-transform: 控制文本大小写
• text-shadow: 设置文字投影效果(阴影等)
• line-height: 行高(行高与块高相同实现文字上下居中)
• letter-spacing: 控制字符间距
• color: 字体颜色(red/#000000)
• font-style: 设置字体样式(斜体等)
• font-family: 设置字体(用逗号隔开,会依次查找能用的字体)
• font-weight: 设置字体粗细
• word-spacing: 设置单词间距
• letter-spacing: 设置字符间距
• white-space: 设置如何处理元素中的空白

列表

• list-style-type: 设置列表标记的类型(实心圆,空心圆等)
• list-style-image: 将图片作为列表的标记
• list-style-position: 设置标记的位置

表格

• border-collapse: 设置表格边框是否为单一边框
• border-spacing: 相邻表格边框的距离(必须设置 border-collapse:separate; 否则会忽略)
• empty-cells: 空单元格是否显示边框(必须设置 border-collapse:separate; 否则会忽略)

5、自定义规则
字体(供 font-family 属性使用):

@font-face    /*自定义字体*/
{
    font-family: myFirstFont;    /*自定义字体名*/
    src: url('Sansation_Light.ttf'),    /*字体路径*/
    url('Sansation_Light.eot'); /* IE9 */
}    

6、bootstrap

响应式布局,即布局会根据浏览器大小等进行调整
中文文档 'https://v3.bootcss.com/' 官网 'http://getbootstrap.com/'
包括:

• css样式(一些基本的css样式):
• 组件(图标,下拉菜单,导航等css样式):
• js插件: 配合 jQuery 使用

7、font-awesome
字体图标, 即显示的小图标