CSS技术_csdn css技术-CSDN博客

本文链接：https://blog.csdn.net/weixin_46624670/article/details/121294784

学习资源：https://www.bilibili.com/video/BV1Y7411K7zz?p=24
在这里插入图片描述
代码复用方式
1、在head代码块里使用style标签定义css
例如：

<head>
    <meta charset="UTF-8">
    <title>1-css</title>
    <style type="text/css">
        div{
            border: 1px solid red;
        }
    </style>
</head>

则本页面内所有的div标签都会使用此处定义的样式
css里的注释与html里的注释不同，使用/* */
缺点：
（1）只能在当前页面内复用
（2）维护起来不方便
2、将css样式写成一个单独的css文件，通过link标签引入即可
link标签专门用于引进css代码
将刚刚的div样式写入1.css文件中并用link标签导入

<head>
    <meta charset="UTF-8">
    <title>1-css</title>
    <link rel="stylesheet" type="text/css" href="1.css"/>
</head>

标签名选择器
标签名选择器可以指定哪些标签被动得使用这个样式，参考上面得div标签选择器
id选择器

<style type="text/css">
        #id123{
            border: 2px solid yellow;
        }
    </style>

<span id="id123" >span标签01</span>
    <span id="id124">span标签02</span>

在这里插入图片描述
class选择器(类选择器）

<style type="text/css">
        .class1{
            border: 2px solid yellow;
        }
    </style>

<div class="class1">div标签02</div>
    <span class="class2">span标签01</span>
    <span class="class1">span标签02</span>

在这里插入图片描述
class和id得区别是，class可以重复，id不可以重复
组合选择器

<style type="text/css">
        .class1,#id123{
            border: 2px solid yellow;
        }
    </style>

	<div id="id123">div标签01</div>
    <div class="class1">div标签02</div>
    <span class="class2">span标签01</span>
    <span class="class1">span标签02</span>

<style type="text/css">
        div{
            color: chartreuse;
            border: 2px red solid;
            width: 300px;
            height: 300px;
            background-color: green;
            font-size: 26px;
            margin-left: auto;
            margin-right: auto;
            margin-top: auto;
            text-align: center;
        }
        a{
            text-decoration: none;/*去掉超链接得下划线*/
        }
        table{
            border:1px crimson solid;
            border-collapse: collapse;
        }
        td{
            border:1px crimson solid;
            border-collapse: collapse;/*合并表格之间得间隔*/
        }
        ul{
            list-style: none;/*去掉无序列表前面得符号*/
        }
    </style>