🔔css学习内容

css样式-背景，文本，链接等等

css创建

  • 插入样式表的方法有三种:
  1. 外部样式表(External style sheet)
  2. 内部样式表(Internal style sheet)
  3. 内联样式(Inline style)
  • CSS 优先规则：

内联样式 > id 选择器 > 类选择器 = 伪类选择器 = 属性选择器 > 标签选择器 = 伪元素选择器

css背景

  • 关键字

    值描述
    repeat默认。背景图像将在垂直方向和水平方向重复。
    repeat-x背景图像将在水平方向重复。
    repeat-y背景图像将在垂直方向重复。
    no-repeat背景图像将仅显示一次。
    inherit规定应该从父元素继承 background-repeat 属性的设置。
    单一关键字等价的关键字
    centercenter center
    toptop center 或 center top
    bottombottom center 或 center bottom
    rightright center 或 center right
    leftleft center 或 center left

  • 百分比值

1
2
3
4
bady{
background-position: 50% 50%;
}
//background-position 的默认值是 0% 0%，在功能上相当于 top left。
  • 长度值
1
2
background-position: 50px 100px;
//在左上角向右50像素和向下100像素的位置
  • 背景关联(attachment)
1
background-attachment:fixed
值描述
scroll默认值。背景图像会随着页面其余部分的滚动而移动。
fixed当页面的其余部分滚动时，背景图像不会移动。
inherit规定应该从父元素继承 background-attachment 属性的设置。

css文本

  • 缩进：text-indent 百分比%/像素大小px/inherit/

  • 水平对齐：`text-align

值描述
left把文本排列到左边。默认值：由浏览器决定。
right把文本排列到右边。
center把文本排列到中间。
justify实现两端对齐文本效果。
inherit规定应该从父元素继承 text-align 属性的值。
  • 字母间距：letter-spacing
  • 字间距： word-spacing
  • 区别就是第一个是字符或者字母间的间距，第二个则是字或单词的间距
  1. 字符转换 text-transform
  • text-transform 属性控制文本的大小写。
    1
    2
    3
    h1 {text-transform:uppercase}//全是大写字母
    h2 {text-transform:capitalize}//定义每个单词首字母大写
    p {text-transform:lowercase}//定义全是小写字母
  1. 文本装饰 text-decoration
1
2
3
4
5
none //默认文本样式	
underline //下划线
overline //上划线
line-through //中部划线
blink //文本闪烁
  1. 空白空间属性：whiteSpace
值描述
normal默认。空白会被浏览器忽略。
pre空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
pre-wrap保留空白符序列，但是正常地进行换行。
pre-line合并空白符序列，但是保留换行符。
inherit规定应该从父元素继承 white-space 属性的值。
  1. 文本方向directon
  • rtl 和 ltr