【第一篇】认识CSS

最新推荐文章于 2023-03-08 16:10:20 发布

爱学习_程序员

最新推荐文章于 2023-03-08 16:10:20 发布

阅读量355

点赞数

分类专栏： CSS 文章标签： html css 前端

本文链接：https://blog.csdn.net/baidu_38766791/article/details/125648457

版权

CSS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

CSS的作用

CSS全称Cascading Style Sheets，叫作层叠样式表，用来描述HTML或XML文档的呈现。通俗一点讲就是给HTML或XML中的元素渲染各种各样的样式。例如改变字体的颜色，改变背景颜色等。例如下方的网页，当我们没有给这个网页添加CSS样式的时候，它是显示成这个样子的。而当我们添加完CSS后，它的显示样式就变成了这样。可见CSS让页面的表现更加丰富和美观。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">
        :root{
            box-sizing: border-box;
            font-family: sans-serif;
            font-size: 16px;
            color: black;
        }
        *,::after,::before{
            box-sizing: inherit;
            margin: 0;
            padding: 0;
        }
        li{
            list-style-type: none;
            display: inline-block;
            margin-left: 2rem;
        }

        header{
            display: flex;
            justify-content: space-between;
            margin-top: 1.5rem;
            height: 1vh;
        }
        .header_right{
            margin-right: 1.5rem;
        }
        .button{
            padding: 0.3rem 0.8rem;
            background-color: blue;
            color: white;
            border-radius: 0.5rem;
        }
        content{
            text-align: center;
        }
        .content_img{
            margin-top: 9rem;
        }
        .content_img img{
            width: 270px;
            height: 129px;
        }
        .content_serarch{
            font-size: 1.5rem;
        }
        .button-search{
            display: inline-block;
            vertical-align: center;
            padding: 0.8rem 2rem;
            color: white;
            background-color: #4e6ef2;
            border: 1px solid #4e6ef2;
            border-radius: 0 0.8rem 0.8rem 0;
        }
        .search-text{
            display: inline-block;
            margin-right: -1rem;
            width: 38rem;
            vertical-align: top;
            padding: 0.8rem 2rem;
            border: 1px solid #c4c7ce;
            border-radius: 0.8rem 0 0 0.8rem;
        }
        input{
            display: inline-block;
            height: 100%;
            width: 100%;
            border: 0px solid white;
        }
        footer{
            position: fixed;
            bottom: 0;
            left: 0;
            text-align: center;
            width: 100%;
        }
        footer ul{
            display: flex;
            justify-content: space-between;
            color: gray;
            font-size: 0.8rem;
        }

        footer ul li:first-child{
            margin: 0;
            margin-left: 2rem;            
        }
        footer ul li:last-child{
            margin: 0;
            margin-right: 2rem;        
        }
    </style>
    <title>CSS认识</title>
</head>
<body>
<header>
    <div class="header_left">
        <ul>
            <li><a>新闻</a></li>
            <li><a>hao123</a></li>
            <li><a>地图</a></li>
            <li><a>贴吧</a></li>
            <li><a>视频</a></li>
            <li><a>图片</a></li>
            <li><a>网盘</a></li>
            <li><a>更多</a></li>
        </ul>
    </div>
    <div class="header_right">
        <ul>
            <li><a>设置</a></li>
            <li class="button"><a>登录</a></li>
        </ul>
    </div>
</header>
<content>
    <div class="content_img"><img src="CSS认识百度图片.png"></div>
    <div class="content_serarch">
        <span class="search-text"><input type="text" name=""></span>
        <span class="button-search">百度一下</span>
    </div>
</content>
<footer>
    <ul>
        <li><a>关于百度</a></li>
        <li><a>About Baidu</a></li>
        <li><a>京公网安备案11000001号</a></li>
        <li><a>京ICP证030173号</a></li>
        <li><a>药品医疗器械网络信息服务备案（京）网药械信息备字（2021）第00159号</a></li>
        <li><a>使用百度前必读</a></li>
        <li><a>帮助中心</a></li>
        <li><a>@2022 Baidu</a></li>
    </ul>
</footer>
</body>
</html>

无CSS的页面状态有CSS的页面状态

引用CSS

有三种引入CSS的方式，根据引入方式的不同分别称作外部CSS，内部CSS和行内CSS。

外部样式

在<head>标签内部，通过link标签引入CSS文件。href既可以是相对路径，也可以是绝对路径。

外部CSS使用比较多，这种方式有两步需要做：1.创建包含css样式的css文件。2.引用css文件。

【语法】

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="css文件的路径">
    <title>CSS引入</title>
</head>
<body>
</body>
</html>

【举例】

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="外部CSS.css">
    <title>CSS引入</title>
</head>
<body>
<div>
    这里是一个div
</div>
</body>
</html>

内部样式

在style标签内书写相应的CSS样式。

【语法】

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css"> <!--在这个里书写css样式-->
        div{
            background: gray;  
        }
    </style>
    <title>CSS引入</title>
</head>
<body>
</body>
</html>

【举例】

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">
        div{
            background: gray;
        }
    </style>
    <title>CSS引入</title>
</head>
<body>
<div>
    这里是一个div
</div>
</body>
</html>

行内样式

利用标签的style属性，输入对应的样式。

【语法&举例】

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>CSS引入</title>
</head>
<body>
<div style="background-color: red;"><!--利用style属性实现行内样式-->
    这里是一个div
</div>
</body>
</html>

样式优先级

引入方式的影响

从上面可以直到CSS的样式可以通过三个方式引入，并且同一个文档中可以存在多种引入方式。当选择器相同时，优先级的排列顺序由高到低分别是:行内样式 > 内部样式 > 外部样式。

【举例】

针对同一个div标签，分别在外部样式，内部样式和行内样式中设定相同的background-color属性，并分别设置red,green,blue三个颜色。

//外部CSS样式
div{
	background-color: red;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="外部CSS.css">
    <style type="text/css">
        div{
            background-color: green;
        }
    </style>
    <title>CSS引入</title>
</head>
<body>
<div style="background-color: blue;">
    这里是一个div
</div>
</body>
</html>

引入顺序的影响

当引入方式相同，但是同一个选择器出现的位置越靠后，则其优先级越高。

出现位置越靠后，优先级越高。

【举例】

在内部样式中针对同一个div选择器，前后定义了两次background-color属性，最终起作用的是后面一次定义的background-color属性值。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">
        div{
            background-color: green;
        }
        div{
            background-color: orangered;
        }
    </style>
    <title>CSS优先级</title>
</head>
<body>
<div>
    这里是一个div
</div>
</body>
</html>

选择器优先级的影响

当样式的选择器不同时，其对样式的优先级影响最大。且选择器的优先级越大，属性的优先级越高。详细的选择器的种类和优先级可见下一篇文章【CSS选择器】

【举例】

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">
        .test{
            background-color: green;
        }
        div{
            background-color: red;
        }
    </style>
    <title>CSS优先级</title>
</head>
<body>
<div class="test">
    这里是一个div
</div>
</body>
</html>

样式优先级判定逻辑

!import > 行内样式 > 选择器优先级 > 内部样式 > 外部样式 > 出现顺序

样式的书写

【语法】

选择器{

属性名1:属性值1；...

属性名n:属性值n;}

对于层叠的理解

层叠可以理解为继承，当父标签定义了某些样式之后父标签下的字标签也会继承这些样式。但是当字标签也定义了这些样式的时候，会覆盖掉父标签中定义的样式。

在CSS中并不是父标签中定义的所有属性都会被子标签继承。只有跟文本相关的属性会被继承：color,font,font-family,font-size,font-weight,font-variant,font-style,line-height,letter-spacing,text-align,text-indent,text-transform,white-space以及word-spacing。还有一些其他的属性也可以被继承，比如列表属性list-style,list-style-type,list-style-position以及list-style-image。表格的边框属性border-collapse和border-spacing。