CSS3笔记

第二部分CSS3

2.1CSS样式表的基本使用

链接外部样式文件
通过link标签将外部的css文件导入到我们当前的html文件中。
—好处：将数据和显示分离，同一份css文件也可以被多个html共用。
—坏处：浏览器先加载数据信息，再读取数据信息中的link标签，再加载link所导入的文件，相对而言比较慢

导入外部样式文件
通过@import导入，但是不推荐这么使用，有些浏览器不支持此操作的。

使用内部样式定义
—好处：统一加载，相对较快
—坏处：数据和样式揉在一起，不方便管理，而且css样式也不方便变共享

使用内联样式
直接写在相对应的标签style属性中
—坏处：冗余过大
—好处：针对性最强，总有几个特别的不跟大部队走

2.2CSS选择器

元素选择器
标签名 {
属性：属性值;
…
}

属性选择器
根据标签中属性的特点来进行选择的

id选择器
通过id值来进行选择

类选择器
类选择器主要看的是class属性，基本上每个标签都有id、class、style属性

包含选择器
指的是在某一个元素之下的所有元素的选择

子选择器
父子关系

兄弟选择器
同级别

选择器组合

伪元素选择器
不是元素，但是也可被更改的一些内容
-:first-letter：首字母，只针对块级元素，如果要使用到内联元素上，要么指定宽高，要么将position属性设置为absolute、或者将display属性定义为block
-:first-line：首行，只针对块级元素，如果要使用到内联元素上，要么指定宽高，要么将position属性设置为absolute、或者将display属性定义为block
–:before：在元素之前
–:after：在元素之后

伪类选择器
标签的状态！
:link：超链接点击之前
:visited：超链接访问之后
:hover：鼠标悬浮的时候
:active：当点击的时候
:focus：当获取焦点时

2.3 文字与文本相关属性

文字相关属性

• color：文字的颜色
  font-family：文字的字体
  font-size：文字的大小 px或pt（打印机模式下的单位）
  font-weight：文字的加粗
  lighter：细的
  normal：普通的默认的
  bold：加粗
  bolder：更粗
  设置数值
  font-decoration：文字划线
  none无样式
  underline下划线
  line-through：中划线
  overline：上划线
  blink：闪烁（目前的浏览器不太支持了）
  font-style：文字的样式- text-shadow：文字的阴影 复合属性
  color：阴影颜色
  xoffset：阴影横向的偏移量 正值向右
  yoffset：阴影纵向的偏移量 正值向下
  radius：阴影的模糊程度
  text-transform：文字的大小写（英文）
  none默认
  capitalize：首字母大写
  uppercase：所有字母大写
  lowercase：所有字母小写
  line-height：文字的行高
  letter-spacing：字符之间的间距
  word-spacing：单词之间的间距

文本相关属性

• text-indent：文本的缩进
  text-overflow：文本溢出
  clip溢出剪裁，前提overflow：hidden
  ellipse溢出剪裁，剪裁的部分用…表示，前提overflow：hidden
  vertical-align：垂直对齐方式
  auto：自动对齐
  baseline：基线对齐
  sub：与文本下标对齐
  super：与文本上标对齐
  top：顶端对齐
  middle：中间对齐
  bottom：低端对齐
  length：偏移距离
  text-align：水平对齐方式
  left
  right
  center
  -justify两端对齐
  -work-break：文本换行方式
  normal：依赖于浏览器的换行行为
  keep-all：只能在半角空格或连字符地方换行
  break-all：允许在单词中间换行
  white-space：空格处理方式-什么是是否换行
  normal：默认，到达容器边界再换行
  nowrap：强制在同一行直至结束，如果遇到<br>再换行

2.4 背景与边框相关属性

背景相关属性

• background：是一种复合属性，可以设置背景色，也可以设置背景图，还可以设置背景图重复模式
  background-color：背景色
  background-image：背景图
  background-attachment：背景图是否可以滚动
  scroll：滚动
  fixed：固定
  background-position：背景图的位置
  background-repeat：平铺
  repeat横纵平铺
  no-repeat不平铺
  repeat-x：横向平铺
• repeat-y：纵向平铺

新增的几个属性