css学习笔记

所有标签都有一个默认样式，称为浏览器样式，或者默认样式

行内样式：通过在标签中设置style属性来达到实现控制标签的样式的效果。eg:

1	<h1 style="color:red;">这是一个标题</h1>

可以设置多个css属性

嵌入样式：在head标签中嵌套一个style标签，在style标签中可以书写css样式

外联样式：通过link标签

后代选择器：空格

并集选择器：逗号

子元素选择器：> 只选择儿子辈的元素

顺序不能颠倒

伪类

LVHA原则

 /*未访问过的链接*/
a:link {
    color: red;
}

/*已访问过的链接*/
a:visited { color: gray; }

/*进入*/
a:hover {
    color: green;
}

/*被点击*/
a:active {
    color: purple;
}

层叠性，继承性

文字相关的属性可以继承,盒子相关不能继承

一般情况下对body进行字体设置

css优先级

1. 行内样式>id选择器>类选择器>标签选择器

2. 继承的样式优先级 大于 默认的样式优先级

3. 通配符选择器优先级大于 继承的样式优先级

4. 标签选择器的优先级大于通配符选择器优先级

复合选择器的优先级

行内样式>id选择器>类选择器>标签选择器

css单位 与 文字排版

dispaly:控制标签的显示模式

1. none 移除元素
2. inline 让元素变成行内元素， 不能设置宽高，只有左右边距，不独占行
3. block 让元素变成块级元素， 可以设置宽高，上下左右边距，独占行
4. inline-block 变成行内块元素， 可以设置宽高，左右边距，不独占行

行内元素不能设置宽高，只能通过内容来撑开宽高；

1 2	visibility：hide；//隐藏 display:none;// 移除，不影响页面布局

css颜色表示

1. rgb(r,g,b)
2. #rrggbb

r、g、b :0-255 获取百分比

rr、gg、bb：0-255 的十六进制

css长度单位

一般用相对长度单位：px、em、rem em：当前字体大小，例如：当前元素的字体大小为12px，那么1em=12px；

文字排版

font-size：字号大小，一般页面12px、14px
font-family: 字体
非衬线体收尾

字体系列

衬线体和非衬线体

字体加粗

设置字体不需要单位

1. b标签
2. font-weight:700; 100-900 ：400正常

字体风格

font-style

1. normal:默认值，标准
2. italic：使用斜 大专栏  css学习笔记体显示，如果系统没有斜体的字体，则正常显示
3. oblique：倾斜

字体样式

1	font:style weight size family

字间距

letter-spacing：字符与字符之间的空白，默认为normal ，px为单位

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

li { font-family: "微软雅黑"; font-size: 16px; font-style: oblique; font-weight: 700; letter-spacing: normal; letter-spacing: 20px; /*字符间距*/ word-spacing:10px;/*只对字符之间有空格的有影响*/ } a { display: inline-block; background-color:silver; 100px; height: 50px; line-height: 50px;/*文本垂直居中*/ text-align: center;/*文本水平居中*/ letter-spacing: 30px; text-decoration: none;/*去掉下划线*/ }

行高 line-height

文本装饰

text-decoration
none 默认。定义标准的文本。

underline 定义文本下的一条线。

overline 定义文本上的一条线。

line-through 定义穿过文本下的一条线。

blink 定义闪烁的文本。

inherit 规定应该从父元素继承 text-decoration 属性的值。

水平对齐方式 text-align

1. left： 默认值
2. right
3. center

首行缩进

只能设置于块级标签

text-indent ：值为em的倍数，不同单位的数值，浏览器宽度的百分比，允许使用负值，建议用em作为单位

1	text-indent:-9999px;text-indent:-9999px;/*用于隐藏网站logo的标题，易于seo*/

空白符处理

white-space:normal; 正常显示，自动折行
white-space: nowrap; 即使超过盒子宽度，文本也不换行显示
white-space: pre; 写html的时候什么样式，显示就什么样式

word-break 自动换行

1. normal 不打断单词显示
2. break-all 允许单词打断换行
3. keep-all 只能在半角空格或连字符换行，单词不换行，空格和换行符才换行