css入门基础01

VIP文章戴丫丫

已于 2022-09-19 22:08:23 修改

阅读量418

点赞数

分类专栏： css 文章标签： css css3 html

于 2022-09-13 17:04:21 首次发布

本文链接：https://blog.csdn.net/DAIYA_JIE/article/details/126828783

版权

一基本语法

<head>
	<style>
		选择器{
     
			属性名：属性值;
			属性名：属性值;
		}
	</style>
</head>

二基础选择器

2.1 常用选择器

在这里插入图片描述

2.2 案例

## 2.1 标签选择器

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
     
            color: turquoise; 
        }
        .red {
     
            background-color: red;
            width: 100px;
            height: 100px;
        }
        .green {
     
            background-color: green;
            width: 100px;
            height: 100px;
        }
        #yellow20{
     
            font-size: 20px;
            color: yellow;
        }
        *{
     
            background-color: violet;
           
        }
    </style>
</head>

<body>
    <div class="red">
    </div>
    <div class="green">
    </div>
    <div class="red">
    </div>
    <p>
        这是标签选择器
    </p>
    <p>
        帅哥
    </p>
    <div id="yellow20">这是id选择器</div>
</body>

</html>

2.3 选择器优先级

！important>行内样式>ID选择器>类选择器>标签选择器>继承选择器

原因：首先加载标签选择器,再加载类选择器，然后加载ID选择器，最后加载行内样式后加载会覆盖先加载的同名样式

三 css属性

3.1 字体属性

3.1.1font-family 字体种类

<style>
p{
   
font-family:"微软雅黑";
}
</style>

3.1.2 font-size 字体大小

<style>
p{
   
font-size:20px;
}
</style>

3.1.3 font-weight 字体粗细

<style>
p{
   
/*值从100-900，400是正常大小，可写成normal*/
font-weight:400;
}
</style>

3.1.4 font-style 字体样式

<style>
em{
   
/*这是把em标签改为正常字体*/
font-style:normal;
}
p{
   
/* 字体倾斜 */
font-style: italic;
 }
</style>

3.1.5 字体样式的复合属性写法

<style>
      #z{
     
            /* font:font-style font-weight font-size font-family; */
            /* 四个属性顺序不能更换，且font-size和font-family是必须要有的属性*/
           font: normal 900 30px "微软雅黑";
        }
    </style>