CSS基础(1)

最新推荐文章于 2022-08-05 08:14:02 发布

山i

最新推荐文章于 2022-08-05 08:14:02 发布

阅读量320

点赞数

分类专栏： CSS基础文章标签： css html html5

本文链接：https://blog.csdn.net/zxcWh/article/details/120307376

版权

本文介绍了CSS的基础知识，包括其作用和在HTML中的使用方式。内容涵盖内联、内部和外部样式表的定义，以及CSS语法、选择器的类型如元素选择器、ID选择器、类选择器等。此外，还讨论了背景设置、文本属性等具体样式设置。

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

1.什么是css？

css指层叠样式表（Cascading Style Sheets）

2.css的作用

css是用来为网页html元素设置/添加样式，是的html网页好看

3.在html网页中如何使用css？

1.内联定义（inline styles）

将样式属性设置，通过style属性设置在html标记的开始标记中。

格式:<html标记 style=”样式名称1:样式值1;样式名称2:样式值2”>显示的内容</html标记>

2.内部样式

将样式设置，放在head的style标记中。

格式：css选择器{

css样式名称：样式值

}

3.链入外部样式表文件 Linking to a Style Sheet

通过在head标记中的link标记将外部样式文件【.css】导入当前的html文件中

创建外部样式文件【.css】

css选择器{

css样式名称:样式值;

}

注意后缀名是.css结尾

2.head标记中的link标记将外部样式文件【.css】导入

例如:

.p1{
    font-size: 30px;
    color: aqua;
}

<!DOCTYPE html>
<html>
    <head>
        <title>

        </title>
        <link rel="stylesheet" href="test.css" type="text/css">
  
    <style>
        #p1{
            font-size: 30px;
            color: cadetblue;
        }
    
    </style>
      </head>
    <body>
        <h4>1.内联定义(Inline Styles)</h4>
        <h5>将样式属性设置，通过type属性设置在html标记的开始标记中</h5>
        <p style="font-size: 30px;color: blueviolet;">测试内联定义</p>
        <h4>2.测试内部样式块</h4>
        <p id="p1">内部样式块</p>
        <h4>3.链入外部样式表文件</h4>
        <h5>通过在head标记中的link标记将外部样式文件【.css】导入到当前html文件中</h5>
        <p class="p1"> 链入外部样式表文件</p>


    </body>
</html>

4.CSS语法

我们发现在内部样式块，链入外部样式表的方式中，编写css样式的操作格式是相同的。

格式： css选择器{

css样式名称:样式值;

}

上面编写css样式的操作格式有2部分组成

1.css选择器

2.具体样式设置-->键值对【css样式名称：取值】

例如：#p1{

font-size:30px;

color:blue;

}

#p1-----css选择器

{font-size:30px;color:nlue}-----具体样式设置，多个样式属性设置之间使用“;”分割。

5.css选择器

css选择器就是选中需要设置样式的html元素。

css中提供的选择器很多。我们学习几个常用的选择器。

1.元素选择器

例如：

<!DOCTYPE html>
<html>
    <head>
        <title>元素选择器</title>
        <meta charset="utf-8">
       <style>
           p{
               font-size: 30px;
               color: cornflowerblue;
           }
       </style>
    </head>
    <body>
        <h4>1.元素选择器--根据html元素名称得到需要设置样式的html元素</h4>
        <p>测试元素选择器</p>
        <p>如果有多个名称相同的元素，全部被选中，作用同一种样式</p>