Css学习笔记(2)
🔔css学习内容
css样式-背景,文本,链接等等
css创建
- 插入样式表的方法有三种:
- 外部样式表(External style sheet)
- 内部样式表(Internal style sheet)
- 内联样式(Inline style)
- CSS 优先规则:
内联样式 > id 选择器 > 类选择器 = 伪类选择器 = 属性选择器 > 标签选择器 = 伪元素选择器
css背景
关键字
值 描述 repeat 默认。背景图像将在垂直方向和水平方向重复。 repeat-x 背景图像将在水平方向重复。 repeat-y 背景图像将在垂直方向重复。 no-repeat 背景图像将仅显示一次。 inherit 规定应该从父元素继承 background-repeat 属性的设置。 单一关键字 等价的关键字 center center center top top center 或 center top bottom bottom center 或 center bottom right right center 或 center right left left center 或 center left 百分比值
1 | bady{ |
- 长度值
1 | background-position: 50px 100px; |
- 背景关联(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
- 区别就是第一个是字符或者字母间的间距,第二个则是字或单词的间距
- 字符转换 text-transform
- text-transform 属性控制文本的大小写。
1
2
3h1 {text-transform:uppercase}//全是大写字母
h2 {text-transform:capitalize}//定义每个单词首字母大写
p {text-transform:lowercase}//定义全是小写字母
- 文本装饰 text-decoration
1 | none //默认文本样式 |
- 空白空间属性:whiteSpace
值 | 描述 |
---|---|
normal | 默认。空白会被浏览器忽略。 |
pre | 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。 |
nowrap | 文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。 |
pre-wrap | 保留空白符序列,但是正常地进行换行。 |
pre-line | 合并空白符序列,但是保留换行符。 |
inherit | 规定应该从父元素继承 white-space 属性的值。 |
- 文本方向directon
rtl
和ltr
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Harry の 心 阁!
评论