CSS基础学习

css:层叠样式表,为html中的元素添加样式,

使用方式:

    行内样式表 : 在元素的开始标签上添加一个style属性,样式定义在style属性值中    内部样式表 : head中定义style标签对,标签对中定义css样式    外部样式表 : 在外部定义一个css文件,在要使用的html中通过link标签引入

选择器：

选中一个或者一组元素,方便为元素添加样式。

基础选择器

属性选择器

组合选择器

伪类选择器(hover)

基础选择器：

#id选择器 : 根据元素id属性值,选中一个元素

.class|类选择器 :  根据元素的class属性值,选中一个或者组员元素

标签|元素选择器 :  根据标签名选中一个或者一组元素

*通配符 : 选中所有元素

基础选择器的优先级:id>class>元素>通配符

组合选择器

1.后代选择器 空格

2.子元素选择器  body>div 选中第一层直接子元素,不包含孙子元素等

3.相邻兄弟  +

4.普通兄弟 ~

常用样式

背景样式：

background-color    background-image:url()  background-repeat      background-size  position

文本样式：

text-align  text-decoration(underline)  text-indent(设置文本首行缩进)

字体样式：

font-size、font-family、font-color、font-weight

列表样式：

list-style: none;  去除列表标记项display: inline-block;  使块元素同行展示

定位

position修改元素的展示位置

相对定位 relative  相对于元素原位置进行定位

绝对定位  absolute 相对于浏览器的窗口进行定位,定位到文档中某个位置,不会改变

固定定位  fix定义在窗体的某个不会改动

display

none  元素消失

block  块元素

inline  行内元素

inline-block  行内块

浮动float

盒子模型