【无标题】CSS简介及入门案例

最新推荐文章于 2024-07-21 23:31:42 发布

Zhou-Yin-Jie

最新推荐文章于 2024-07-21 23:31:42 发布

阅读量88

点赞数 1

文章标签： css html css3

本文链接：https://blog.csdn.net/qq_57074721/article/details/124953285

版权

什么是CSS

CSS是级联样式表的缩写。HTML是用来编写页面的内容，而CSS就是用来控制页面上内容的样式。网页上的内容都是由HTML元素构建的，这些元素如何呈现，涉及到很多方面，如整个页面的布局，元素的位置，距离，颜色，大小，是否显示，是否浮动，透明度等。

CSS的语法

一条CSS样式规则由两个主要的元素构成：选择器，以{ } 包裹的一条或是多条样式，格式：选择器 {属性：属性值;属性:属性值…}
说明：

选择器是需要改变样式的对象。
每条声明由一个属性和属性值组成。
属性(property)是希望设置的样式属性。每个属性都有一个属性值，属性与属性值之间使用冒号分割。

选择器

一个页面上的元素众多，选择器就用于在页面中找到/选择需要应用这个样式的对象。选择器可以分为元素选择器、id选择器和类(class)选择器。其中类选择器是使用最普遍的。

元素选择器

html代码

<p>hello,css</p>

CSS代码

 p {
            color: red;//字体颜色为红色
            text-align: center;//文本居中
        }

使p元素的中的内容文本居中，并让其字体颜色变为红色。

id选择器

html代码

<p id="sea">蓝色的海</p>
<p id="forest">绿色的森林</p>

CSS代码

 /*id 选择器 前面需要加一个 # 号*/
        #sea {
            color: blue;
        }
        #forest{
            color: green;
        }
    </styl

将蓝色的海这段文字的颜色变为蓝色，绿色的森林几个字变为绿色。

类选择器

html代码

<p class="class">我可以变大变红居中</p>

CSS代码

 /*class 选择器 前面需要加一个 . 号*/
        .class{
            color: red;
            text-align: center;
            font-size: 25px;
        }

CSS如何生效

我们一般有三种方法：外部样式表，内部样式表，内联样式

外部样式

我们一般会在项目的目录下建一个css文件夹用来专门存放外部样式表。外部样式表是目前最主流的方式，因为将众多的样式规则单独放在一个文件中，与HTML分开，结构清晰。同时其他的页面也可以使用，达到代码通用的目的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css学习案例</title>
    <!--引入外部样式表-->
    <link rel="stylesheet" type="text/css" href="css/my.css">
</head>
<body>
    <p>hello,css</p>

    <p id="sea">蓝色的海</p>
    <p id="forest">绿色的森林</p>

    <p class="class">我可以变大变红居中</p>

</body>
</html>

外部样式表

p {
    color: red;//字体颜色为红色
text-align: center;//文本居中
}
/*id 选择器 前面需要加一个 # 号*/
#sea {
    color: blue;
}
#forest{
    color: green;
}
/*class 选择器 前面需要加一个 . 号*/
.class{
    color: red;
    text-align: center;
    font-size: 25px;
}

内部样式

我们也可以直接将样式放在HTML文件中，这就称为内部样式。但是，需要注意：我们的样式需要放在 head 元素中引入的 style 标签的里面，css样式才会生效。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css学习案例</title>
    <style>
        p {
            color: red;//字体颜色为红色
        text-align: center;//文本居中
        }
        /*id 选择器 前面需要加一个 # 号*/
        #sea {
            color: blue;
        }
        #forest{
            color: green;
        }
        /*class 选择器 前面需要加一个 . 号*/
        .class{
            color: red;
            text-align: center;
            font-size: 25px;
        }
    </style>
</head>
<body>
    <p>hello,css</p>

    <p id="sea">蓝色的海</p>
    <p id="forest">绿色的森林</p>

    <p class="class">我可以变大变红居中</p>

</body>
</html>

内联样式

内联样式就是我们直接将元素的规则直接写入到要应用的元素中（不推荐使用）。

<p style="color: darkturquoise;font-size: 30px;text-align: center">这个使用了内联样式</p>

级联的优先级

优先级从高到低分别是：

内联样式
内部样式表或者外部样式表
浏览器缺省样式

盒子模型

盒子模型是指一个HTML元素可以看作是一个盒子。从内到外，这个盒子的内容是content，内边距padding，边框 border，外边距margin构成。
说明：

content盒子的内容：文本，图片等。
padding填充，也叫作内边距，即内容与边框之间的区域。
border边框，默认是不显示的。
margin外边距，边框以外以及它与其它元素之间的区域。
例如：
HTML代码：

 <div>
        <div class="b1">内容一，边框为红色，内边距与外边距都为25px</div>
        <div class="b2">内容二，边框为蓝色。外边距发生了叠加</div>
    </div>

css：代码

.b1{
            height: 200px;
            width: 200px;
            background-color: #5a95f5;
            border: red 10px solid;
            padding: 20px;
            margin: 20px;
        }
        .b2{
            height: 300px;
            width: 300px;
            background-color: #9002ea;
            border: solid blue 10px;
            margin: 25px;
            padding: 25px;
        }

定位

position属性使用于对元素进行定位。该属性有以下属性值：

static 静态
relative 相对的
fixed 固定的
absolute 绝对的

设置了元素的position属性之后，我们才能使用top，bottom，left，right属性，否则定位不会生效。

static

设置静态定位position：static；这是元素的默认定位方式，无论我们是否设置，页面都将按正常布局进行。
即：按照元素在HTML上的出现的先后顺序从上到下，从左到右进行排版。

relative

设置相对定位position：relative；这将把元素相对于它的静态（正常）位置进行偏移。

<!--编写两个一样代码块，一个加上相对定位，一个不加-->
    <div>
        <div class="div1">我是加上了相对定位</div>
        <div class="div2">我没有加上相对定位</div>
        <br><br>
    </div>

 .div1{
            position: relative;
            top: 50px;
            left: 70px;
            background-color: #5a95f5;
        }
        .div2{
            top:50px;
            left: 70px;
            background-color: #1b984d;
        }

fixed

设置为固定定位position：fixed；这将是元素固定不动（即使我们上下拖动浏览器的滚动条）。此时元素的固定位置仍由top，bottom，left，right属性确定，是相对视口而言的（整个可见的屏幕）。
如屏幕的左下角放一个按钮：

 <div>
        <div class="broad">占位区域，改变浏览器窗口的大小，看看左下角的按钮会发生什么变化</div>
        <div class="btn_fixed">这个按钮是固定的</div>
    </div>

.broad{
            height: 5000px;
            width: 5000px;
            padding: 20px;
            background-color: #0c56d0;
        }
        .btn_fixed{
            position: fixed;
            bottom: 40px;
            left: 20px;
            padding: 6px 24px;
            border-radius: 10px;
            color: red;
            background-color: #00b74a;
            cursor: pointer;

        }

absolute

设置为绝对定位position：absolute；将使元素相对于其最近设置了定位属性（非static）的父元素进行偏移。如果该元素的所有父元素都没有设置定位，那么就是相对于body这个父元素元素的定位。

溢出

当元素超过其指定区域时，我们通过overflow属性来处理这些移除部分。
溢出属性有以下几个属性值：

visible 默认值，溢出部分不被裁剪，在区域外面显示。
hidden 裁剪溢出部分不可见。
scroll 裁剪溢出部分，但提供上下，左右滚动条显示。
auto 裁剪溢出部分，根据具体情况提供滚动条。

浮动

在一个区域容器内，我们可以设置float属性让某个元素水平方向上向左或者是向右移动，其周围的元素也会重新列。
一个元素会尽量的想左或者是向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。浮动元素之后的元素都将围绕它。
可以使用clear：both来去除浮动属性。

不透明度

我们可以使用opacity对任何元素（常用于图片）设置不透明度。
值在【0.0–1.0】之间

伪类和伪元素

伪类或伪元素用于定义元素的某种特殊状态或为止等。
当我们有以下需求时就可以使用：

鼠标移到某个元素上面，改变背景颜色。
超链接访问前后的样式不同。
离开必须填写的输入框时发出警告。
保证段落的第一行正常，其他加粗。
例如：

<div>
        <p>当我们遇到问题百思而不得其解的时候，我们为何不去<a href="https://www.baidu.com">百度</a>看看呢，或者去<a href="#">谷歌</a>也行呀,而不是自暴自弃</p>
        <br><br>
        <p>动力来自于你对知识的追求</p>

    </div>

   a:link{
            color:indianred;/*没有访问过的超链接*/
        }
        a:visited{
            color: #0e4db5;/*已经访问过的超链接*/
        }
        a:hover{
            color: #00b74a;
        }
        p:hover{
            background-color: greenyellow;
        }

Zhou-Yin-Jie

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【无标题】CSS简介及入门案例

什么是CSSCSS是级联样式表的缩写。HTML是用来编写页面的内容，而CSS就是用来控制页面上内容的样式。网页上的内容都是由HTML元素构建的，这些元素如何呈现，涉及到很多方面，如整个页面的布局，元素的位置，距离，颜色，大小，是否显示，是否浮动，透明度等。
复制链接

扫一扫