css常用知识点总结

css常用知识点总结

1.CSS:层叠样式表

​ HTML:绘制页面
​ CSS:页面的样式设置

2.CSS引入方式:


             <span style="xxx">span>


             <head>
                <style>
                    选择器{
                        xxx
                    }
                style>
             head>


            <head>
                <link rel="stylesheet" href=".css文件路径">
            head>

3.选择器:获取标签

​ 1.id选择器:#id属性值
​ 2.class选择器:.class属性值
​ 3.标签选择器:标签名
​ 4.id选择器 > class选择器 > 标签选择器
​ 5.并集选择器:选择器,选择器,…
​ 6.后代选择器:选择器 选择器
​ 7.子选择器:选择器>选择器
​ 8.兄弟选择器:
​ 选择器+选择器:后边第一个兄弟
​ 选择器~选择器:后边所有的兄弟

4.浮动:

​ 1.行级元素浮动:可以去除空格
​ 2.块级元素浮动:可以在一行展示
​ 注意事项:浮动后让出空间

5.盒子模型

5.1 组成:

​ 1.内容实际的宽和高
​ 2.内边距(内容和边框的距离)
​ 3.边框
​ 4.外边距(边框到其他标签的距离)

5.2使用:
1.内容实际的宽和高

​ 宽:width
​ 高:height

2.内边距(内容和边框的距离)padding

​ 上内边距,右内边距,下内边距,左内边距
​ 方向:top right bottom left
​ 1.padding-方向: 值px;
​ 2.padding: 值px 值px 值px 值px; 上右下左
​ 3.padding: 值px 值px; 上下 左右
​ 4.padding: 值px; 上右下左

3.边框 border

​ 1.边框宽度 border-width
​ border-方向-width: 值px;
​ border-width: 值px 值px 值px 值px; 上右下左
​ border-width: 值px 值px; 上下 左右
​ border-width: 值px; 上下左右

​ 2.边框样式 border-style

​ 样式:solid 实线 dashed 虚线 dotted 点线 double 双实线 none:没有
​ border-方向-style: 样式;
​ …
​ 3.边框颜色 border-color
​ 颜色:英文名 RGB(0255,0255,0~255)红绿蓝 十六进制
​ border-方向-color: 颜色;
​ …
​ 4.边框的简化
​ border: 宽度 样式 颜色;
​ 5.圆角 border-radius
​ border-top-left-radius: 值px; 上左
​ border-top-right-radius: 值px; 上右
​ border-bottom-right-radius: 值px; 下右
​ border-bottom-left-radius: 值px; 下左
​ border-radius: 值px 值px 值px 值px; 上左下右
​ border-radius: 值px 值px; 上右下左
​ border-radius: 值px; 上左下右上右下左

4.外边距(边框到其他标签的距离)margin

​ 上外边距,右外边距,下外边距,左外边距
​ 方向:top right bottom left
​ margin-方向: 值px;
​ …
​ 特殊用法:margin: 0 auto; 元素水平居中

6.display属性:

​ 1.none:将隐藏元素
​ 2.inline:将元素变为内联元素,特殊的行级元素,行级元素不可以设置高和宽该元素为内联元素
​ 3.block:将元素变为块级元素,变为块级元素后具备了块级元素的特点
​ 4.inline-block:将元素变为内联块元素,内联块元素可以设置高和宽,可以和其它行级元素或内容一行展示

7.字相关属性:

​ 1.color:字体颜色
​ 2.font-size:字体大小
​ 3.font-weight:字体加粗
​ 4.font-style:字体(宋体,楷体,微软雅黑,…)
​ 5.line-height:行高(内容的垂直方向的展示位置),特殊用法:行高和父元素高度相同实现内容垂直居中

8.伪类:

​ 元素获取的伪类,改变元素的样式,失去伪类,恢复为原有样式
​ 1.鼠标悬浮伪类:选择器:hover{}
​ 2.获得焦点伪类:选择器:focus{}

9.定位:position

​ left right bottom top z-index(优先级)
​ 1.静态定位(默认):没有定位 position: static;
​ 2.绝对定位:以祖先元素进行定位,祖先元素没有定位,以body进行定位 position:absolute;
​ 3.相对定位:以该元素本身进行定位 position:relative;
​ 4.固定定位:不会随滚动条滚动而发生位置的改变 position:fixed;
​ 注意:
​ 1.绝对定位:让出定位之前所占的空间
​ 2.相对定位:不会让出定位之前所占的空间

10.背景属性:


background-color

background-image:url("图片路径");
    
    background-repeat:
    
    repeat
    
    peat-x
    
    repeat-y
    
    -repeat	
              background-size:值px 值px;
              
              background-attachment:
              
              scroll
              
              xed

你可能感兴趣的:(css,前端)