CSS基础

最新推荐文章于 2024-05-01 12:01:29 发布

Xc_.xC

最新推荐文章于 2024-05-01 12:01:29 发布

阅读量123

点赞数

文章标签： css 前端 html

本文链接：https://blog.csdn.net/qq_52215881/article/details/127115066

版权

推荐直接去网络上查所需要的样式，样式名和值有非常多

此处推荐：CSS 教程

1，什么是CSS，有什么作用。

CSS 指的是层叠样式表* (Cascading Style Sheets)
CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素
CSS 节省了大量工作。它可以同时控制多张网页的布局
外部样式表存储在 CSS 文件中

*：也称级联样式表。

CSS 节省了大量工作！

样式定义通常保存在外部 .css 文件中。

通过使用外部样式表文件，您只需更改一个文件即可更改整个网站的外观！

CSS的作用是：

修饰HTML页面，设置HTML页面中的某些元素的样式，让HTML页面更好看。

CSS好比是HTML的化妆品。

HTML还是主主体，CSS依赖HTML。CSS的存在就是修饰HTML。

所以新建的文件还是xx.html。

2，在HTML页面中嵌入CSS的三种方式。

第一种方式：内联定义：

内联定义即是在对象的标记内使用对象的style属性来设置CSS样式：

<标签 style="样式名:样式值; 样式名:样式值;......">

</标签>

定义了两个样式：

<p style="margin-left:0.5in; margin-right:0.5in">这一行被增加了左右的外补丁</p>

第二种方式：样式块方式：

在head标签中使用style块，

语法格式：

<head>
     <style type="text/css">
         选择器{
                样式名：样式值；
                样式名：样式值；
                 ......
               }
        选择器{
                样式名：样式值；
                样式名：样式值；
                 ......
                }
            ......
     <style>        
</head>

第三种方式：链入外部样式表文件

这种方式最常用

（将样式写到一个独立的xxx.css文件中，在xxx.css文件中样式定义的方法一般是第二种方式

在需要的网页上直接引入css文件，样式就直接引入了）

语法格式：

<head>
    <link  type="text/css" rel="stylesheet" href="css的文件路径" />
</head>

这种方式的有点是：易维护，维护成本低。

标签选择器：

使用HTML的标签名，来选择特定的元素，范围很大，但是不灵活

语法格式：

标签名{

样式名：样式值;

样式名:样式值;

......

}

CSS id 选择器：

id 选择器使用 HTML 元素的 id 属性来选择特定元素。

元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素！

要选择具有特定 id 的元素，请写一个井号（＃），后跟该元素的 id

语法格式：

#id{

样式名：样式值;

......

}

CSS 类选择器

每个元素都有一个class属性

类选择器选择有特定 class 属性的 HTML 元素。

如需选择拥有特定 class 的元素，请写一个句点（.）字符，后面跟类名。

语法格式：

.类名{

样式名：样式值;

......

}

可以跨不同标签

代码实例：

CSS嵌入HTML的第一种方式：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS嵌入的第一种方式:内联定义方式</title>

    </head>
    <body>
        <!--
            width:宽度样式
            height：高度样式
            background-color：背景色样式
            display:布局样式
                none:将对象隐藏
                block ：将对象强制作为对象呈现，为对象之后添加新行
         
            -->
            <!-- 
                样式还能这样写：
                    border：1px solid black;
             -->
        <div style="width:300px;  height:300px;
         background-color:red;  display:block;
         border-style:solid;      border-width:1px;">
        </div>
    </body>
</html>

CSS嵌入HTML的第二种方式：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTML引入CSS样式的第二种方式</title>

        <style type="text/css">

             #username{
                color:red;
             }

                div{
                    background-color: black;
                    border: 1px solid red;
                    width: 100px;
                    height: 100px;
                }
          
                 .myclass{
                    border: 1px solid red;
                 }
        </style>
    </head>
    <body>
        <!-- 设置字体为红色 -->
        <span id="username">对不起，用户不能为空 </span>

        <div></div>
        <div></div>
        <div></div>

        <!-- class相同的可以认为是同一类标签 -->
        <input type="text" class="myclass"/>

        <select class="myclass">
            <option>专科</option>
            <option>本科</option>
        </select>
    </body>
</html>

CSS嵌入HTML的第三种方式：

1，创建一个xxx.css文件。

<!DOCTYPE html>
<html >
    <head>
        <meta charset="UTF-8">
    
        <title>CSS嵌入HTML的第三种方式</title>

        <!-- 引入外部CSS文件 -->
      <link type="text/css" rel="stylesheet" href="/S/index.css">

    </head>
    <body>
        <div>
            <h3>H3标签</h3>
        </div>
    </body>
</html>