CSS(层叠样式表）

让我打个盹

已于 2022-03-11 17:39:44 修改

阅读量557

点赞数 2

文章标签： css javascript 前端

于 2022-03-02 19:21:42 首次发布

本文链接：https://blog.csdn.net/weixin_48494427/article/details/123221636

版权

html用来搭建网页基本骨架（结构层）

css用来用来修饰你的网页（表现层）

JavaScript脚本（行为层）

css注释/* */

html注释

行内样式

<div>
<span style=""></span>
</div>

style 样式

一个标签只能有一个style，属性名与属性值之间用：隔开，属性值之间用；隔开

background-color背景

内嵌式

<head>
      <style>
            div{
                color:red；
                }
      </style>
</haed>

外链式

 <link rel="stylesheet" type="text/css" href="css文件"/>

导入式

@import ul("css文件");
或@import "css文件"

四个选择器

id选择器

#id值{

样式属性名：属性值；

}

<head>
     <style>
             #one{
	         }
    </style>	
</head>

<body>
		<div id="one"></div>
</body>

类选择器

类名{

样式属性名：属性值；

}

<head>
     <style>
             .box{
	         }
    </style>	
</head>

<body>
		<div class="box"></div>
</body>

标签选择器

标签名{

样式属性名：属性值；

}

<head>
     <style>
             div{
	         }
    </style>	
</head>

<body>
		<div></div>
</body>

包含选择器

权重相加

选择器a 选择器b{

样式属性名：属性值；

}

<head>
     <style>
             div span{
	         }
    </style>	
</head>

<body>
		<div><span></span></div>
</body>

Rgb(255,0,0)取值0~255

Rgba (255.0,0,0~1)

权重

ID选择器>类选择器>标签选择器

100>10>1

font

font-family 指定字体

font-size 字体大小（字体大小以当前字号为准）

浏览器默认字号16px=1em

font-syle 字体风格

normal 正常

italic oblique 倾斜

font-weight字体粗细

normal 正常 400~500

bold 粗体 600~900

bolder加粗体

lighter细体 100~300

100~900 9个层次

行高 line-height 50px或2 （若无单位，数字表倍数）

<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
                font-style:italic;
                font-weight:holder;
                font-size: 25px;
                line-height:2;
				font-family:"microsoft yahei";    
			}	
		</style>
</head>
<body>
		<div>
            文字
		</div>
</body>

缩写 font:normal(style) holder(weight) 20px(size)或2(line-height) 宋体（family）

<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
            font: italic bolder 20px/2 宋体 ;    
			}	
		</style>
</head>
<body>
		<div>
            文字
		</div>
</body>