CSS3入门

CSS3

本文适合有一定CSS基础的人

1.CSS的导入

• 内联样式表（行内样式表）：写在首标记内，不推荐；

• 内部样式表：在head中加一个style标记，应用于教学举例场景；

• 外部样式表：CSS写在一个.css文件中

  • 链接法：

    <link type="text/css" rel="stylesheet" herf="URL">
    

  • 导入法：

    <style> @import url("");</style>
    

2.CSS选择器

元素可以在HTML的标签中声明自己的类名和id；

类名相同的是一组，id是唯一表示，原则上不能重，如果重复CSS在改变样式时会优先改变自己先找到的那一个元素；

• 标签选择器 ：标签名+{}

• 类选择器：**.**类名+{}

• id选择器：#id+{}

• 伪类选择器：

  • 选择器: hover 表示鼠标悬停时的样式（常用）；
  • 选择器: link 未访问时的样式；
  • 选择器: visited 访问后的样式；
  • 选择器: active 鼠标点击未释放时的样式；

• 属性选择器

  选择器[name="regex"id="regex"...]{}
  

注意：

选择器之间可以联合使用，比如 标签.类名 等等

• CSS的继承与层叠

字标记会继承父标记的部分样式风格；

选择器的优先级：id>类>标签

3.DIV、SPAN

1.DIV

DIV是一个没有任何功能的标记，只是一个人为规定，表示一个图层

类似于swing中的Jpanel

• position
  • static：静态定位
  • absolute：绝对定位
  • relative：相对定位，图层不可层叠
  • fixed：图层位置固定，不滚动
• border：线粗细，型，颜色
• background-color
• left,top,width,height：setBounds
• float,clear
  • left/right/none：允许浮动元素在左、右、不浮动
  • left/right/both/none：清除左、右、左右、允许浮动
• z-index
  • auto/数字：子图层按照父图层的属性演示
  • 层叠显示position必须为absolute
• overflow
  • scroll/visible/auto/hidden：始终显示滚动条、不显示滚动条但超出部分可见、内容超出是显示滚动条、超出时隐藏内容
• display
  • block/inline/none：按块元素显示、行内方式显示、隐藏

2.span

可以理解为小容器，可以容纳段落、标题、表格、图像等各种元素

4.CSS的样式属性、盒模型

1.CSS属性的单位

• 绝对单位：1in = 2.54cm = 6pt = 72pc（印刷单位）
• 相对单位：1em = 该元素组中的font-size大小 = ex； px：像素点； 百分比：参考父元素相同属性的值，可以大于100%

2.字体样式

属性	说明	使用
font-size	大小	单位 / [x/xx]small / medium / [x/xx]large/
font-style	风格	normal/italic（斜体）/ oblique（倾斜体）
font-variant	小型的大写字母	normal/small-caps
font-family	字体名	可以在填多个字体，浏览器按先后顺序优先级使用
font-weight	粗细	1-100（整数）/ normal（默认）/bold / bolder/lighter

可以直接用一个font语句对字体属性进行设置

.class{font:style weight variant size/line-height faily}

3.文本样式

• letter-spacing : normal / length 字间距
• line-height : normal / length 行与行之间的距离（此高度等于背景高度时就是字体上下居中）
• text-index : length/百分比
• text-decoretion : none / underline / overline / line-through
• text-transform : capitalize / uppercase / lowercase / none （首字母大写、大写、小写）
• text-aligh : left / right / center / justify （左、右、中、两端对齐）
• vertical-align : top / bottom / middle / text-top / text-bottom (行中最高元素、行中最低元素、父元素中部、父元素顶端、父元素底端)

4.颜色与背景

属性	说明	使用
background-color	背景颜色	: rgb(r,g,b)(0-255或百分数) / #000000 / colorname
background-image	背景图案	: url() / none
background-repeat	背景图案的填充方式	:repeat / no-repeat / repeat-x / repeat-y
background-attachment	背景图案的滚动属性	: scroll / fixed (一起滚动、不动)
background-position	背景图案的起始位置	: left / center / right / top / center / bottom / x% y% / x y

复合属性：background : color image repeat

5.列表样式

基本语法	属性	作用
list-style-type	: disc / circle / square / decimal /…（p135）	列表样式
list-style-image	: URL	图像
list-style-position	: outside / inside	图像位置
list-style	: type image position	复合属性

6.盒模型

每个元素都可以看做一个盒子，盒子包括边界Margin、边框Border、填充Padding、内容Content

• Margin和Padding
  • Margin和Padding除了宽度之外没有其他属性，因为它们一个代表元素与外界的距离，一个代表内容与边框的距离；
  • Margin-(top / right / bottom / left) : 长度 / 百分比 / auto；
  • Margin : 四个参数代表上右下左边界 、三个参数代表上 左右 下 边界、两个参数代表上下 左右边界、一个参数代表四个边界；
  • Padding同理
• border
  • border-style : none / dotted(点状框) / dashed（虚线） / solid（实线）/ double(双线) / groove（3D凹槽）/ ridge（山脊状边框）/ inset(沉入感边框) / outside（付出感边框）
  • 可以在border-style 后加多个样式，样式会按照上述规律赋值
  • border-weight : medium(默认) / thin / thick / length
  • border-color : color
  • boder : wedth style color