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
盒子模型