css基本语法

最新推荐文章于 2022-03-16 20:52:13 发布

哈哈大撒大撒

最新推荐文章于 2022-03-16 20:52:13 发布

阅读量109

点赞数

分类专栏： new

本文链接：https://blog.csdn.net/weixin_45371966/article/details/106255151

版权

new 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

css在html中的用法：
第一种

<div style=" border: 1px solid red; color: red">div标签1</div>

在标签体内使用style属性。
第二种

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

在head标签体内添加css代码。
第三种

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

创建css文件，在head里面引用文件。
css选择器：

标签选择器
<style>
    div{
        border: 1px solid yellow;
        color: blue;
        font-size: 30px;
    }
    span{
        border: 5px dashed blue;
        color: antiquewhite;
    }
</style>

id选择器

#id{	
	属性：值;
}

<style type="text/css">
    #id001{
        color: blue;
        font-size: 30px;
        border: yellow solid 1px;
    }
    #id002{
        color:  red;
        font-size: 20px;
        border: 5px dotted blue;
    }
</style>

class选择器
.class{
属性：值；
}

 class类型选择器，可以通过class属性有效的选择性的使用这个样式
 
 <style type="text/css">
   .div01{
       border: 1px solid red;
   }
</style>

组合选择器

选择器，选择器{
	属性：值
}

<style type="text/css">
   .div01,#div02{
       border: 1px solid red;
   }
</style>

常用样式：

<style type="text/css">
    div{
        color: red;  字体颜色
        border: 1px solid yellow; 边框大小 颜色 样式
        background-color: green; 背景
        width: 300px; 宽度
        height: 300px; 高度
        font-size: 20px; 字体大小
        margin: auto; 模块居中
        text-align: center; 字体居中
    }
    a{
        text-decoration: none; 超链接去下划线
    }
    table{
    border: red solid 1px;
    border-collapse: collapse; 去掉边框间距
}
ul{
    list-style: none; 去掉前缀
}
</style>