htmlCss----Day11、12（css样式）

css样式

• css背景

  • 背景色：background-color；
    • transparent：透明度；
  • 背景图像：background-image;如果需要设置一个背景图像，必须为这个图像设置一个url值。
  • background-repeat:设置是否及如何重复背景图像
    • repeat:默认，背景图像将在垂直方向和水平方向重复
    • repeat-x:背景图像将在水平方向重复
    • repeat-y:背景图像将在垂直方向重复
    • no-repeat:背景图像将仅显示以西
    • inherit:继承。
  • background-position:设置图像的起始位置
  • background-attachment:设置图片是否随着文档滚动。

• css文本

  • text-indent:缩进文本；给定元素的第一行都可以缩进一个给定的长度，可为负值；最常见的是首行缩进
    • 让你个行内元素的第一行缩进，可以用左内边距或外边距创造这种效果。
    • 一般单位为em。
    • 在设置负值的时候，为了防止超出浏览器窗口，可以设置padding-left的值。
  • text-align:水平对齐
    
  • word-spacing:可以改变单c词与单词之间的标准间隔
    
  • letter-spacing改变的是单词之间的字母
  • text-transform:改变文本大小写
    • none:没有任何改变
    • uppercase:全部大写
    • lowercase:全部小写
    • capitalize:只对每个单词的首字母大写
  • text-decoration:文本修饰
    • none：默认
    • underline:在文本下添加一条线
    • overline:在文本上添加一条线
    • line-through:定义穿过文本的一条线
    • blink:定义闪烁的文本
    • inherit:继承
  • white-spacce:如何处理元素的空白
    
  • direction:文本方向
    
    

• css字体

  • font-family:定义文本的字体系列
  • font-style:规定斜体文字
    • normal:文本正常显示
    • italic：文本斜体显示；对每个字母的结构有一些小改动，来反映变化的外观。
    • oblique:文本倾斜显示；文本则是正常竖直文本的一个倾斜版本。
  • font-variant:可以设定小型大写字母。
    • normal：默认值
    • small-caps:浏览器会先死小型大写字母的字体；比一般直接大写的字体要小。
  • font-weight:设置文本的粗细
  • font-size:设置文本的大小；最好使用em尺寸单位，避免IE不兼容的问题。

• css链接

  • a:link：普通的、未被访问的链接
  • a:visited:用户已访问的链接
  • a:hover:鼠标指针位于链接的上方
  • a:active:链接被点击的时刻
  • 规则：a:hover必须位于a:link和a:visited之后；a:active必须位于a:hover之后。

• css列表

  • list-type-stype:改变列表标志类型
  • list-type-image:把图像作为标志使用，需要url(),就可以使用图片作为标志了
  • list-type-position:设置在何处放置列表标记。
    • inside:列表项目标放置在文本以内，且环绕文本根据标记对齐。
      
    • outside:默认值，保持标记位于文本的左侧。列表项目标放置在文本以外，且环绕文本不根据标记对齐。
      
  • list-style:把上面的三个样式合并

• css表格

  • border-collapse:设置表格的边框是否被合并为一个单一的边框。
    • separate:默认值，边框会被分开。不会忽略border-spacing和empty-cells属性。
    • collapse:边框会合并为一个单一的边框。会忽略border-spacing和empty-cells属性。
  • border-spacing:设置相邻单元格的边框间的距离。
  • caption-side:设置表格标题的位置
    • top:默认值。把表格标题定位在表格之上。
    • bottom:把表格标题定位在表格之下。
  • empty-cells:设置是否显示表格中的空单元格。
    • hide:不在空单元格周围绘制边框
    • show:默认值，在空单元歌周围绘制边框。
    • table-layout:显示表格单元格、行、列的算法规则
      • automatic:默认。列宽度由单元格内容设定。（也就是不管里面的文字怎么变动，单元格长度都不发生改变。）
      • fixed:列表由表格宽度和列宽度设定。（会根据表格里的元素发生改变）

• css轮廓

  • outline:是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。（轮廓线不会占据空间，也不一定是矩形）
  • outline-color:绘制元素周围的颜色（在申明这个属性之前要先申明outline-style属性，元素只有获得轮廓以后才能改变其轮廓的颜色）
  • outline-style:设置轮廓样式
    这个花了两天才看完，这一个礼拜又到了我们专业的死亡周，全是要交作业，就有点慢了，加油吧(ง •_•)ง