CSS

最新推荐文章于 2024-10-03 21:16:18 发布

秃三弟

最新推荐文章于 2024-10-03 21:16:18 发布

阅读量165

点赞数 2

文章标签： css

本文链接：https://blog.csdn.net/niceer8/article/details/107279802

版权

CSS总结

CSS

什么是CSS

CSS：（Cascading Style Sheet）,层叠样式表，简称样式表，是用来对网页进行布局和美化的一种计算机语言，它不仅仅可以静态的修饰网页，还可以配合各种脚本语言动态的对网页各元素进行格式化。当前版本有CSS2和CSS3两种。，qizhongCSS3是当前最流行的。

如何编写CSS

可以直接用电脑知道的记事本进行编辑然后保存后讲后缀名改成.html即可，或者使用专门额软件进行编写，比如vscode，HBuilderX等。其中vscode对新手良好。

CSS的语言特点

CSS为HTML标记语言提供了一种样式描述，定义了其中元素的显示样式，所以所CSS具有丰厚的样式定义，对文本进行修饰与修改；它易于修改和使用；多页面应用，可以进行层叠，对页面进行压缩等优点，由此可见CSS的功能非常强大。

CSS的语言基础

属性，属性值和元素

我们在html中写上 :

这是CSS的属性

，
其中div是他的标签，
class="shuxing"就是它的属性，属性等于的"shuxing"就是它的属性值，
内容是：这是CSS的属性，
而标签加上属性加上属性值加上其中的内容所组成的整体叫做元素。

关于字体的属性

关于字体的属性都是具有继承性的，有以下几种：
1）font-size:用来设置字体的大小：:x-large;(特大) xx-small;(极小) 一般中文用不到，只要用数值就可以，单位：PX、PD。
2）font-weight：用来设置字体是否加粗，(粗体) lighter;(细体) normal;(正常)。
3）font-style：用来设置字体是否倾斜，oblique;(偏斜体) italic;(斜体) normal;(正常)。
4）font-family：用来设置字体格式。
5）font：是复合属性，font：font-style、font-weight、font-size、font-family。
6）color：用来设置字体的颜色。

关于文本的属性

文本是由许多文字构成
1）text-decoration：用来修饰线，ling-through(删除线）underline（加下划线）none（删除比如a标签自带的下划线）overline（加上划线）
2）text-align：设置文本在盒子中的对齐方式right，left，top，bottom
3）text-indent：文本首行空两格，单位是em。
4）text-height：用来设置行高，当行高和盒子高度相同时，文本就会垂直居中。

CSS的基本语法

选择器

1）类型选择器：它选择的是元素类型的名称，使用这种选择器，可以向这种元素类型的每个实例上应用声明。
语法：e1.
例如p、div、span等。
2）id选择器：它可以为标有特定的id的html元素指定特定的样式。
语法：#d
3）class选择器：.class选择器选取带有指定class的所有元素，它引用HTML元素的class属性，class属性可以用于多个HTL元素设置特定的样式。
语法：.classname

选择器用法

1）通配符选择器：
使用通配符“*”，表示选中所有的标签
选择所有的标签将默认的padding和margin设置为0
2）分组选择器：
选择多个标签，用逗号分开
3）后代选择器：
标签的嵌套（它的层次是没有限制的）
4）伪类选择器：
当设置了hover后，把鼠标放在设置的地方可以进行突变
5）组合选择器：
在data类下选择所有p标签

CSS布局

三种布局方式：

盒模型（流动布局）
浮动（浮动布局）
定位（层布局）

div盒子模型（流动布局）

六大属性：

这是一个盒子
1）width：宽度，单位px
2）height：高度，单位px
3）pading：内边距
4）margin：外边距
5）border：设置边框
6）background：设置背景
所有的文档元素（标签）都会生成一个矩形框，我们成为元素框，它描述了一个文档元素再网页布局汇总所占的位置大小。因此，每个盒子除了有自己大小和位置外，还影响着其他盒子的大小和位置。

盒子模型具有的特性：

1）每个盒子都有边界、边框、填充、内容这4个属性。
2）每个属性都含有上下左右四个部分，可以同时设置也可以分开设置。

盒子的分类

1）块级元素：块级元素会独占一行，常见的块级元素的标签有div，hn，ul/ol/dl/dt/dd，form，以及与表格相关的等等。盒子模型的六大属性对它都适用。
2）行内元素：行内元素会在一行，常见的行内元素标签有span，a，em，strong，i，b，lable，button等。属性中width和heigth无效，margin和padding只在水平方向上有效。
3）行内块元素：如input，img。
浮动，可以实现布局，使得块级元素能够在同一行中排列：

float:left/right

浮动布局

浮动元素就是脱离文档流的，但不脱离文本流。

<style type="text/css">
      .wrap1{max-width: 1000px;}
      div{
            min-height: 200px;
        }
        .left{
            float: left;
            width: 300px;
            background: red;
        }
        .right{
            float: right;
            width: 300px;
            background: blue;
        }
        .center{
            background: pink;
        }

    </style>
    <div class="wrap1">
        <div class="left">left</div>
        <div class="right">right</div>
        <div class="center">浮动布局</div>   
    </div>

<div class="wrap1">
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="center">浮动布局</div>   <!-- 这里不能与上面的右浮动互换位置，否则会被块元素挤下一行-->
</div>

网上找的

特点

对自身的影响：
1）float 元素可以形成块，如 span 元素。可以让行内元素也拥有宽和高，因为块级元素具有宽高
2）浮动元素的位置尽量靠上
3）尽量靠左（float:left）或右（float:right），如果那一行满足不了浮动元素的宽度要求，则元素会往下掉
对兄弟元素的影响：
1）不影响其他块级元素的位置
2）影响其他块级元素的文本
3）上面贴非 float 元素
4）旁边贴 float 元素或者边框
如果一个盒子里的所有元素都浮动了，父类的高度没有设置，那么父类的高度就会塌陷。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS 布局</title>
</head>
<style>
*{
    margin: 0;
    padding: 0;
}
.container{
    width: 200px;
    background-color:red;
}

.left{
    background-color: yellow;
    float: left;    /*float会将行元素转变成块元素display:inline-block;*/
    height: 50px;
    width:50px;
}
.right{
    background-color: yellow;
    float: right;    /*float会将行元素转变成块元素display:inline-block;*/
    height: 50px;
    width:50px;
}
</style>
<body>
    <div class="container">
        <span class="left">left</span>
        <span>center</span>
        <span class="right">right</span>
    </div>
    <div class="container" style="height: 200px;background: blue">
    </div>
</body>
</html>

效果如下：
网上找的，网址如下https://www.cnblogs.com/jing-tian/p/10987298.html
清除浮动元素对父元素的影响的方法：
1）父元素里设置overflow：hidden；
2）手动增加高度（基本不用，因为父元素的高度是靠子元素撑起来的。
3）伪类
清除浮动元素对兄弟元素的影响：clear：both；

层布局

层布局使用position来实现，它有三种形式：
1）绝对定位（position:absolute):
将通过left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位，如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。
特点：

相对于正常位置应该出现在哪里
保持其未定位前的形状
原本所占的空间仍保留

语法：

设置position:relation;
使用top/right/bottom/left甚至偏移位置

基本使用

2）相对定位:(position:relative)：
如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。
特点：

```
相对于其父定位元素
```
元素会从文档流中完全删除，就好像该元素不存在一样
元素会生成一个块级框
语法：

父元素设置position为relative/absolute/fixed

postion：absolute
使用top/right/bottom/left设置位置
使用z-index来确定其顺序

子绝父相：子元素要绝对定位，那么设置父元素为相对定位即可。

3）固定定位:(position:fixed)
将元素放置在浏览器窗口的固定位置，拖拽窗口时元素位置不变。
用法：

position：fixed；
使用top/right/bottom/left设置位置。

固定定位

秃三弟

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫