css

最新推荐文章于 2024-11-14 09:54:48 发布

NFY0424

最新推荐文章于 2024-11-14 09:54:48 发布

阅读量151

点赞数

文章标签： css 前端 html

本文链接：https://blog.csdn.net/NFY0424/article/details/126856641

版权

本文详细介绍了CSS的基础语法，包括行内样式、内嵌样式和外部样式表的使用。接着讲解了CSS选择器，如标签选择器、类选择器和ID选择器，以及它们在一对一、一对多控制标签中的应用。内容涵盖文本样式、背景属性、列表样式、伪类选择器、透明度、块级和行级标签的区别、显示属性和盒子模型。此外，还探讨了浮动、清除浮动、定位（相对定位、绝对定位和固定定位）等布局技术，以及如何清除浏览器默认样式和理解文档流。

摘要由CSDN通过智能技术生成

基本语法

行内样式表

<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>

内嵌样式表

内嵌式是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义

外部样式表

外部样式表是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中

区别：

选择器

要使用CSS对HTML页面中的标签实现一对一，一对多的控制，这就需要用到CSS选择器

● 常用的选择器：

标签选择器：

通过标签选择器可以选择页面中的所有指定标签

语法：标签名 {}

类选择器：

通过标签的class属性值选中一组标签

语法：

.class属性值{}

id 选择器：

通过标签的id属性值选中唯一的一个标签

语法：

#id属性值 {}

选择器组合：

通过选择器分组可以同时选中多个选择器对应的标签

语法：选择器1,选择器2,选择器N{}

通配选择器:

可以用来选中页面中的所有的标签

语法：*{}

文本

●color：字体颜色

● font-size：字体大小

● font-family：字体

● text-align：文本对齐

● text-decoration:line-through：定义穿过文本下的一条线

● text-decoration:underline：定义文本下的一条线

● text-decoration:none：定义标准的文本 (去掉下划线)

● font-style: italic;斜体文本

● font-weight:700;字体粗细

● line-height:20px;设置行高

● letter-spacing:5px;可以指定(中文)字符间距

● word-spacing:15px;可以指定(英文)字符间距

● text-indent:2em;用来设置首行缩进 em:一个字符的单位

背景

● background-color背景颜色

● background-image背景图片

● background-repeat背景重复

● background-size背景尺寸

● background- position 背景位置

CSS列表

CSS 列表属性可以放置、改变列表项标志，或者将图像作为列表项标志。

● list-style-image 将图象设置为列表项标志。

● list-style-position 设置列表中列表项标志的位置。

inside：在列表的里面； outside：在列表的外面

● list-style-type 设置列表项标志的类型。

● list-style 简写属性。

<style>
            li{
                list-style-type: circle ;
                list-style-image:url(../img/Female.gif) ;
                list-style-position: inside;
                list-style: none inside url(../img/Female.gif);
                }
</style>
<body>
        <ul>
            <li>无序列表</li>
            <li>无序列表</li>
            <li>无序列表</li>
        </ul>
</body>

CSS伪类

CSS伪类专门用来表示标签的一种的特殊的状态，当我们需要为处在这些特殊状态的标签设置样式时，就可以使用伪类。

● 伪类的语法：

:hover伪类表示鼠标移入的状态

:active表示的是被点击的状态

:focus向拥有键盘输入焦点的标签添加样式

<style>
          a{
                color: #00FFFF;
            }
            .a1:hover{
                color: #8A2BE2;
                font-size: 30px;
            }
            .a1:active{
                color: red;
            }
            .a2:hover{
                color: #8A2BE2;
            }
            .a2:focus{
                color: yellow;
            }
</style>
<body>
        <a href="" class="a1">百度</a>
        <a href="" class="a2">百度</a><br />
</body>

透明

定义透明效果的属性是 opacity

opacity 属性设置标签的不透明级别值为1。

规定不透明度：从 0.0 （完全透明）到 1.0（完全不透明）。

<style>
    img{
        opacity: 0.5;
        }
</style>
<body>
    <img src="../img/banana.jpg" />
</body>

块级,行级,行级块标签

● 什么是块级标签？

块级标签：无论内容多少都会独自占据一行的。

例如<p>、<h1>、<ul>、<ol>、<hr/>等。

● 什么是行级标签？

行级标签：只占自身大小的标签，不会占一行。

例如<font>、<b>、<i>、<a>等。

● 什么是行级块标签？

行级块标签:可以改变标签的大小，但是不会占一行。

例如 <input/> <img>等

注意：

一般情况下使用块级标签包含行级标签，不使用行级标签包含块标签。

a可以包含任何标签，除去a本身；

p标签不可以包含任何的块标签。

Display

通过display样式可以修改标签的类型。

可选值：

block：设置标签为块标签

inline：设置标签为行级标签

inline-block：设置标签为行级块标签

none：隐藏标签（标签将在页面中完全消失）

div和span

div标签：

div是块级标签，可以放置任何标签。

div没有任何附加功能，给了什么属性就能变成什么样。

div主要的作用是被用来布局网页。

span标签：

span是行级标签

span 没有任何附加功能，给了什么属性就能变成什么样。

span标签被用来选中文档中的文字。

盒子模型(box-model)

内容区

● 内容区指的是盒子中放置内容的区域，也就是标签中的文本内容，子标签都是存在于内容区中的。

● 如果没有为标签设置内边距和边框，则内容区大小默认和盒子大小是一致的。

● 通过width和height两个属性可以设置内容区的大小而不是整个盒子的大小。

● width和height属性只适用于块标签(包含行级块)。

内边距

● 顾名思义，内边距指的就是标签内容区与边框以内的空间。

● 内边距会影响整个盒子的大小。

使用padding属性来设置标签的内边距。

例如：

padding-left:10px;

padding-right:10px;

padding:10px 20px 30px 40px 这样会设置标签的上、右、下、左四个方向的内边距。

边框

● 可以在标签周围创建边框，边框是标签可见框的最外部。

可以使用border属性来设置盒子的边框：

border:1px red solid;

上边的样式分别指定了边框的宽度、颜色和样式。

也可以使用border-top/left/right/bottom分别指定上右下左四个方向的边框。

● 边框可以设置样式：

dotted （点线） dashed （虚线） solid （实线） double （双线） groove（槽线）

border-radius设置四个角为圆角边框

border-top-left-radius设置左上为圆角边框

外边距

● 外边距是标签边框与周围标签相距的空间。使用margin属性可以设置外边距。用法和padding类似，同样也提供了四个方向的。

margin-top/right/bottom/left。

margin的值可以为负值。

margin的值还可以auto，设置外边距为最大值，当将左右外边距设置为auto时，浏览器会将左右外边距设置为相等.

垂直设置为auto时值为0，所以水平居中也可以简写为margin:0 auto。

● 外边距不会影响盒子的整体大小，但是会影响盒子的位置，会影响盒子的实际控制范围

清楚浏览器的默认样式

浏览器为了在页面中没有样式时，也可以有一个比较好的显示效果，所以为很多的标签都设置了一些默认的margin和padding，而它的这些默认样式，正常情况下我们是不需要使用的。所以我们往往在编写样式之前需要将浏览器中的默认的margin和padding统统的去掉。

margin: 0;

padding: 0;

}

文档流

● 文档流指的是文档中的标签在排列时所占用的位置。将窗体自上而下分成一行行，并在每行中按从左至右的顺序排放标签，即为文档流。

● 也就是说在文档流中标签默认会紧贴到上一个标签的右边，如果右边不足以放下标签，标签则会另起一行，在新的一行中继续从左至右摆放。

● 这样一来每一个块标签都会另起一行，那么我们如果想在文档流中进行布局就会变得比较麻烦。

浮动

所谓浮动指的是使标签脱离原来的文档流，在父标签中浮动起来。

浮动使用float属性。

可选值：

none ：不浮动

left ：向左浮动

right ：向右浮动

<head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .f1{
                width: 200px;
                height: 50px;
                background-color: #4169E1;
                float: left;
                }
            .f2{
                width: 500px;
                height: 50px;
                background-color: #8A2BE2;
                float: left;
            }
            .f3{
                background-color: #00FFFF;
                height: 50px;
            }
        </style>
    </head>
    <body>
        
        <div class="f1" ></div>
        <div class="f2" ></div>
        <div class="f3" ></div>
    </body>

清除浮动

● clear属性可以用于清除标签周围的浮动对标签的影响,其他标签的位置不发生变化。

可选值：

left ：忽略左侧浮动

right ：忽略右侧浮动

both ：忽略全部浮动

<head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .menu{
                background-color: green;
                float: left;
                width: 100px;
                height: 40px;
                text-align: center;
                line-height: 40px;
                color: white;
            }
            .menu:hover{
                background-color: #7FFFD4;
            }
            .box{
                width: 400px;
                margin: auto;
            }
            .middle{
                background-color: #00FFFF;
                width: 500px;
                height: 500px;
                margin: auto;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="menu">首页</div>
            <div class="menu">首页</div>
            <div class="menu">首页</div>
            <div class="menu">首页</div>
            <!--浮动后的标签不占原来的空间
            解决：清除浮动  会自动将父级标签撑开-->
            <div style="clear: left;"></div>
        </div>
        
        <div class="middle"></div>
    </body>

定位

相对定位

相对于它的起点进行移动，移动后原来的位置还被占用。可以通过position:relative; 开启相对定位，left right top bottom四个属性来设置标签的偏移量。

相对定位的特点：

当标签的position属性设置为relative时，则开启了标签的相对定位

1.当开启了标签的相对定位以后，而不设置偏移量时，标签不会发生任何变化

2.相对定位是相对于标签在文档流中原来的位置进行定位

3.相对定位的标签不会脱离文档流

<head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .box1{
                width: 100px;
                height: 100px;
                background-color: #008000;
                position: relative;
                left: 100px;
            }
            .box2{
                width: 100px;
                height: 100px;
                background-color: red;
                position: relative;
                top: 100px;
            }
        </style>
    </head>
    <body>
        <div>
            <div class="box1"></div>
            <div class="box2"></div>
        </div>
    </body>

绝对定位：

绝对定位是不占空间的，运用了绝对定位的标签会脱离原来的文档流，浮动起来，因此视觉上会其他的标签重叠。

可以通过position: absolute; 开启绝对定位，left right top bottom四个属性来设置标签的偏移量

<head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .box1{
                width: 100px;
                height: 100px;
                background-color: #008000;
                position: absolute;
                left: 100px;
                top: 100px;
            }
            .box2{
                width: 100px;
                height: 100px;
                background-color: red;
                
            }
        </style>
    </head>
    <body>
        <div>
            <div class="box1"></div>
            <div class="box2"></div>
        </div>
    </body>

固定定位

<head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body style="margin-top: 1000px;">
        <a href="#" style="position: fixed;right: 20px; bottom: 20px;">返回顶部</a>
    </body>