2020-08-29

css基础-----1

1. css背景样式：
   background-color：背景颜色（一般编程软件都会有选色板）

background-image：背景图片（URL背景地址，默认水平垂直都铺满背景图可以通过repea调整图片的平铺方式）

background-repeat：背景图片的平铺方式[repeat-x(背景图像将在水平方向重复)、repeat-y(背景图像将在垂直方向重复)、repeat(默认。背景图像将在垂直方向和水平方向重复)、no-repeat( 背景图像将仅显示一次)]

background-positon：背景图片位置（x y）=>（数字[px/%] | 单词[x:left/center/right],[y:top/center/bottom]）

background-attachment：背景图随滚动条的移动方式（scroll默认值，背景位置是按当前元素进行偏移的；fixed背景位置是按照浏览器进行偏移的）
复合样式：background:red url() repeat 0 0;（颜色 背景图 平铺方式 位置）
2.css文字样式
color 设置文本颜色
direction 设置文本方向。
letter-spacing 设置字符间距
line-height 设置行高
text-align 对齐元素中的文本
text-decoration 向文本添加修饰
text-indent 缩进元素中文本的首行
text-shadow 设置文本阴影
text-transform 控制元素中的字母
unicode-bidi 设置或返回文本是否被重写
vertical-align 设置元素的垂直对齐
white-space 设置元素中空白的处理方式
word-spacing 设置字间距
3.css段落样式（我经常用的，并不是全部，只是常用到的）
text-decoration：文本修饰（underline下划线、line-through删除线、overline上划线、none不添加任何修饰），可添加多个修饰，用空格隔开
text-transform：文本大小写（针对英文段落，lowercase小写、uppercase大写、capitalize首字母大写）
text-indent：文本缩进（首行缩进font-size的两倍，或2em[em相对单位，永远跟一个字体设置的大小相同）
text-align：文本对齐方式（left默认、right、center、justify[两端点对齐，中间自行调节]）
line-height：定义行高（不是固定值，根据当前字体的大小变化，用数字+px或scale[相对于原来字体的比例]表示）
4.css选择器（常用到的选择器）
ID选择器

CLASS选择器

css:elem{}
html:class=“elem”
【注】1.class选择器是可以复用的
2.可以添加多个class样式
3.多个样式的时候，样式的优先级根据CSS决定，而不是class属性中的顺序
4.标签+类的写法

标签选择器

css:div{}
html:<div></div>

层次选择器
后代：M N{}
父子:M > N{}
兄弟：M ~ N{} 当前M下面的所有兄弟N标签
相邻：M + N{} 当前M相邻的N标签

属性选择器
div[class]{}
div[class][id]{}
div[class=box]{}
div[class*=search]{} //只要search在class中出现过都可以选中
=：完全匹配 *=：部分匹配 ^=:起始匹配 $=:结束匹配

伪类选择器
css伪类用于向某些元素添加特殊的效果。一般用于初始样式添加不上的时候，用伪类来添加。
:link 访问前的样式（只能给a标签）
:visited 访问后的样式（只能给a标签）
:hover 鼠标移入时的样式（可以给所有标签）
:active 鼠标按下时的样式（可以给所有标签）
如果四个伪类都生效，顺序为：L V H A

伪元素选择器
div:after{content: ;color: }
div:before{content: }
:checked、:disabled、:focus 都是针对表单元素

备注：个人使用vccode和dw编程