Java Web 层叠样式表CSS

一、层叠样式表CSS

1. 语法结构

element/class/id{
	样式属性:值
}
1
2
3

2. 写法
   • 行内样式（标签样式）：写在标签内部
   • 内嵌样式（页面样式）：写在style标签中的
   • 外部链接样式：通过link标签将已经写好的CSS文档引入
   • import导入式：通过CSS提供的import导入
     import和link的区别：
     归属性区别：import属于CSS提供，link是HTML自带的标签
     加载顺序区别：link会在页面加载时同时进行加载，而import会在页面加载完成后再进行加载
     兼容性区别：link是HTML自带的不存在兼容性问题，而import是CSS2.1才提供的，对应IE5.0以上浏览器才可使用
     使用DOM控制的区别：若你使用import，则js代码无法获取CSS相关数据，而link不存在此问题
3. CSS选择器
   基本选择器：

• 标签选择器：通过标签名书写CSS样式，作用在所有标签上

标签{
	CSS内容
}
1
2
3

• id选择器：通过#id形式书写，作用在被绑定的id的标签上

id{
	样式内容
}
1
2
3

• class选择器：通过属性class引用标签

.类名{
	样式内容
}
1
2
3

• 通配符选择器（一般为了清除浏览器样式的情况下使用）

包含选择器：

• 子代选择器：只修饰某标签的下一级标签

(标签/.类名/#id等) > 标签{
	样式内容
} 
1
2
3

• 后代选择器：修饰某标签的所有子标签

(标签/.类名/#id等)   标签{
	样式内容
} 
1
2
3

• 分组选择器：通过","可同时创建多个选择器

标签,.类名,#id , ...{
	样式内容
} 
1
2
3

属性选择器：属性选择器可以根据元素的属性或者属性值进取型选取要修饰的元素

[属性=值]
[属性*=值]
[属性^=值]属性的值以...开头的那么选择该标签
[属性$=值]属性的值以...结尾的那么选择该标签
[属性~=值]属性的值包含...并且是个完整的单词，那么选择该标签
[属性|=值]属性的值包含...并且是个完整的单词且唯一，那么选择该标签
[]前可加具体标签
1
2
3
4
5
6
7

伪类选择器：可以修饰同一个标签的不同状态的样式

标签:link 常规链接样式
标签:visited 点击后的样式
标签:hover 鼠标悬停其上的样式
标签:active 点击中的样式
在创建伪类选择器的时候，按照以上顺序进行创建，否则选择器可能失效
1
2
3
4
5

伪元素选择器：通过伪元素选择器可以设置元素的指定样式，主要用来修改元素内文本样式，如首字母，首行样式或实在元素内容前后插入其他样式

::before 当前内容前的部分
::after 当前内容后的部分
::first-letter
::first-line
::selection 当前内容的选中部分
1
2
3
4
5

4. CSS的常用样式

• 边框以及弧度样式
  border-width：边框的线条宽度
  border-style：边框样式，solid实线，dotted点线，dashed虚线
  border-color：边框颜色
  border-radius：设置边框圆角，或者将边框从矩形改为圆形或椭圆
  border-top-left-radius：用来设置边框的左上角，还有对应的右下角，右上角，左上角，左下角

• 字体样式
  font-family：设置字体格式（例如：微软雅黑 monospace）
  font-size：设置字体大小
  font-weight：设置字体粗细，常用bold
  font-style：设置样式（例如：斜体）

• 文本样式
  text-align：设置文本对齐方式
  text-decoration：修饰文本主要使用上中下划线
  text-transform：大小写转换
  text-overflow：设置超出文本部分以省略号的形式展示配合overflow：hidden使用

• 阴影效果：
  text-shadow：设置文本阴影

• display属性
  display：none 隐藏标签，标签将失去原来的占位已经对应的属性样式，visibility：hidden只是隐形了标签
  display：inline-block 将行内标签设置为行内块标签，使其支持宽高设置
  display：block 将行内标签设置为块标签
  display：inline 将块标签设置成行内标签

• 背景样式
  background-url：填写图片链接
  background-color：填写图片颜色
  background-repeat：控制图片的复制模式，可以横向纵向单独复制（repeat-x，repeat-y）
  background-position：可以设置图片的位置，多用于截取精灵图的图片
  精灵图：是由多个图片拼起来的大图，它存在的价值是降低服务器的并发性，避免不必要的开销
  background size：控制图片的大小
  background-fixed：固定网页的背景图片

• 定位问题
  position：fixed 浮动定位，可将标签固定在屏幕某个位置，不随页面滑动而产生位移
  position：absolute 绝对定位，可将标签固定在父容器中的指定位置
  postion：relative 相对定位，当子标签是绝对定位是，父容器必须是相对定位

• 浮动float
  最初float是用于文字环绕图片的效果，之后广泛用于各种布局

5. CSS的特殊样式

• @media查询
  常用于响应式布局，是目前使用最多的适配页面技术，他会根据页面的尺寸不同而使用不同样式

• CSS变换效果

  • transform 2d转换（transform:以下属性）
    • translate(x,y)：平移，对应是，y轴两个参数
    • scale()：缩放，当参数为一个时，整体放大或缩小，两个参数时，可进行倍数缩放
    • rotate(ndeg)：用于旋转元素，方向为顺时针，默认沿着x轴旋转，也沿着y轴旋转
    • skew()：两个参数（x，y）表示对应轴的变换效果
    • matrix()：matrix(cos,-sin,sin,cos,0,0)有六个参数，能实现缩放，旋转，扭曲等
  • transform 3d转换
    • transform-origin：修改旋转轴
    • perspective：视距，值越大离你越远反之越近
    • transform-style：用来控制transform的显示效果，平面（flat），3d（preserve-3d）
  • 过渡效果
    • transition：默认所有属性过渡，参数列表（property name，duration，），支持部分属性过渡，例如transition:width height 2s
  • 动画效果
    • @keyframes
      @keyframes myAnimation{ from{} to{} }
@keyframes myAnimation{ 0%{} 25%{} 50%{} 75%{} 100%{} }
      • 要使用的动画：animation-name
      • 动画持续时长：animation-duration
      • 动画速度曲线：animation-timing-function
      • 动画循坏次数：animation-iteration-count
      • 动画运行状态：animation-play-state
      • 设置动画是否反向运动：animation-direction
  • 其他效果
    • 渐变
      • linear-gradient(to direction1 direction2,color1,color2)可控制渐变方向颜色以及角度，默认由上到下，可多种颜色渐变，支持rgb函数可调节透明度（rgba(255,0,0,0)）
      • repeating-linear-gradient(color1,color2 n%)：重复性渐变
      • radial-graditent(color1,color2)：径向渐变，从中心开始渐变
      • repeating-radial-graditent(color1,color2 x%,color3 y%)：重复性径向渐变
    • 多列
      • column-count：n 将文本分为n列，控制有多少列
      • column-width：npx 将文本分为n像素一列，控制一列有多宽
      • column-rule：给文本加边框跟border标签用法一样
      • column-span：all 跨行
    • 字体图标
      五种图标
      • 正常图片png，jpg优点图像精美，缺点放大后失真
      • svg图像，优点放大后不会失真，缺点制作复杂图像困难
      • css图像，跟svg图像一样
      • 精灵图，属于目前较好的图标解决方案，缺点难维护
      • 字体图标，将已有的svg，css，png等图标制作成一个字体文件

• CSS的变量（自定义属性）

  • 变量声明：-- 名称: 值
  • 如何使用变量：使用var(–名称)
  • 变量的类型：变量有类型区别，可为字符串或数字或像素等带单位量

• CSS的常见函数
  

• 常见的CSS单位和倒影

  • px，deg，rem，em…
  • 倒影效果：