CSS基础

最新推荐文章于 2024-08-18 22:35:37 发布

1YW0o

最新推荐文章于 2024-08-18 22:35:37 发布

阅读量88

点赞数

文章标签： css

本文链接：https://blog.csdn.net/SK1ng/article/details/118880078

版权

CSS

层叠样式脚本

HTML CSS 都是前端的内容

HTML 四凉八柱

CSS 装修公司

提倡HTML与CSS分离

CSS 样式

元素内容的颜色 color

元素内容的背景色 backgrount-color

字体大小 font-size

RGB颜色

[0-255][0-255][0-255]

白色 255 255 255 ffffff

黑色 0 0 0 000000

RGB颜色查询对照表

CSS与HTML 组合方式

内联样式

把样式表写在标签内部作为标签中的style属性值出现

<span style="color:#ffffff;background-color:#000000;font-size:30px;"> </span>

内部样式

<head>
    <title>CSS</title>
    <meta charset="utf-8">
    <style type="text/css">
         span {
             background-color:pink;
         }
        
         .blood {
           color:black;
           background-color:red;
           font-size:40px;
         }
        
         #xb {
           color:black;
           background-color:green;
           font-size:40px;
         }
	</style>
</head>

外部样式

css 单独存放，后缀名.css

test.css：

span {
     background-color:pink;
}
.blood {
   color:black;
   background-color:red;
   font-size:40px;
}
#xb {
   color:black;
   background-color:green;
   font-size:40px;
}

testCss.html：

<head>
	<link rel="stylesheet" type="text/css" href="./style/css.css">
</head>

CSS选择器

CSS 给指定标签相应的样式

标签、类和id选择器（优先级依次升高）

标签选择器 —— 对标签选择

span {
     background-color:pink;
}

<span> xx </span>

类选择器 —— 对class选择

.blood {
   color:black;
   background-color:red;
   font-size:40px;
}

<span class="blood"> xx </span>

id 选择器

一个id只能被调用一次

#xb {
   color:black;
   background-color:green;
   font-size:40px;
}

<span> xx <span id="xb">

测试

testCss1.html（内联样式）

<html>
	<head>
		<title>CSS</title>
		<meta charset="utf-8">
	</head>
	<body>
        <span style="color:#ffffff;background-color:#000000;font-size:30px;"> test </span>
    </body>
</html>

testCss2.html（内部样式）

<html>
	<head>
		<title>CSS</title>
		<meta charset="utf-8">
		<style type="text/css">
			span {
             	background-color:pink;
             }
             .blood {
            	 color:black;
             	background-color:red;
             	font-size:40px;
             }
             #xb {
             	color:black;
             	background-color:green;
             	font-size:40px;
             }
		</style>
	</head>
	<body>
		<span>1 2<span class="blood"> 3 <span id="xb"> 4 5 </span>6 7 8 </span>9</span>
		<br />
		<span>ABC<span class="blood">def</span>G</span>
	</body>
</html>

testCss3.html（外部样式）

<html>
	<head>
		<title>CSS</title>
		<meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="./style/css.css">
	</head>
	<body>
		<span>1 2<span id="xb">3 4</span>，5 6<span class="blood">7 8</span>9</span>
		<span>ABC<span class="blood">def</span>G</span>
	</body>
</html>

css.css

span {
	background-color:pink;
}
.blood {
	color:black;
	background-color:red;
	font-size:40px;
}
#xb {
	color:black;
	background-color:green;
	font-size:40px;
}


css.css

 ~~~ css
 span {
 	background-color:pink;
 }
 .blood {
 	color:black;
 	background-color:red;
 	font-size:40px;
 }
 #xb {
 	color:black;
 	background-color:green;
 	font-size:40px;
 }

1YW0o

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS基础

CSS层叠样式脚本HTML CSS 都是前端的内容HTML 四凉八柱CSS 装修公司提倡HTML与CSS分离CSS 样式元素内容的颜色 color元素内容的背景色 backgrount-color字体大小 font-sizeRGB颜色[0-255][0-255][0-255]白色 255 255 255 ffffff黑色 0 0 0 000000RGB颜色查询对照表CSS与HTML 组合方式内联样式把样式表写在
复制链接

扫一扫