css常用知识点总结

最新推荐文章于 2024-05-23 15:04:04 发布

笑魇依然

最新推荐文章于 2024-05-23 15:04:04 发布

阅读量65

点赞数 1

文章标签： css 前端

本文链接：https://blog.csdn.net/CFJCSDN/article/details/133146425

版权

css常用知识点总结

1.CSS：层叠样式表

HTML：绘制页面
CSS：页面的样式设置

2.CSS引入方式：

<!--1.行内式：在标签中添加style属性，通过style属性值设置样式-->
             <span style="xxx"></span>

<!--2.内部式：head标签中的style标签中设置样式-->
             <head>
                <style>
                    选择器{
                        xxx
                    }
                </style>
             </head>

<!--3.外部式：样式编写在单独的.css文件中，需要使用该样式的页面引入外部的.css文件-->
            <head>
                <link rel="stylesheet" href=".css文件路径">
            </head>
<!--4.优先级：
            行内式 > 内部式|外部式
-->

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(0_255,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