CSS技术初学习

最新推荐文章于 2024-05-05 02:50:11 发布

种下一颗草莓

最新推荐文章于 2024-05-05 02:50:11 发布

阅读量98

点赞数

分类专栏： # jQuery 文章标签： css html web javascript html5

本文链接：https://blog.csdn.net/HangHug_L/article/details/113503089

版权

jQuery 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

1. CSS和 HTML 的结合方式

1.1 第一种

在标签的 style 属性上设置”key:value value;”，修改标签样式。

需求 1：分别定义两个 div、span 标签，分别修改每个 div 标签的样式为：边框 1 个像素，实线，红色。
<body> 
 <div style="border: 1px solid red;">div 标签 1</div> 
 <div style="border: 1px solid red;">div 标签 2</div> 
 <span style="border: 1px solid red;">span 标签 1</span> 
 <span style="border: 1px solid red;">span 标签 2</span> 
</body>

1.2 第二种

在 head 标签中，使用 style 标签来定义各种自己需要的 css 样式。格式如下：
xxx {
Key : value value;
Key : value value;
}
多个声明：如果要定义不止一个声明，则需要用分号将每个声明分开。
虽然最后一条声明的最后可以不加分号(但尽量在每条声明的末尾都加上分号)

需求 2：分别定义两个 div、span 标签，分别修改每个 div 标签的样式为：边框 1 个像素，实线，红色
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title> <!--style 标签专门用来定义 css 样式代码-->
	<style type="text/css"> 
		div {
			border: 1px solid red;
		}

		span {
			border: 1px solid red;
		}
    </style>
</head>
<body>
   <div>div 标签 1</div>
   <div>div 标签 2</div>
   <span>span 标签 1</span> 
   <span>span 标签 2</span>
</body>
</html>

1.3 第三种

把 css 样式写成一个单独的 css 文件，再通过 link 标签引入即可复用。
使用 html 的 <link rel="stylesheet" type="text/css" href="./styles.css" /> 标签导入 css 样式文件。
1.CSS文件
创建一个.css文件，不再需要<style type="text/css"> </style>标签。

div {
   border: 1px solid red;
}

span {
   border: 1px solid red;
}

2.html 文件代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title> 
link 标签专门用来引入 css 样式代码
    <link rel="stylesheet" type="text/css" href="1.css"/>
</head>
<body>
	<div>div 标签 1</div>
	<div>div 标签 2</div>
	<span>span 标签 1</span> 
	<span>span 标签 2</span>
</body>
</html>

2. CSS选择器

2.1 标签名选择器

标签名选择器的格式是：
标签名{
　　属性：值;
　　属性：值;
}

<style type="text/css"> 
	div {
		border: 1px solid yellow;
		color: blue;
		font-size: 30px;
	}

	span {
		border: 5px dashed blue;
		color: yellow;
		font-size: 20px;
	} 
</style>

<div>div 标签 1</div>

2.2 id选择器

加一个 # ，后面表示id的属性值

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

	#username {
		color: red;
		font-size: 20px;
		border: 5px blue dotted;
	} 
</style>

<div id="id001">div 标签 1</div>
<div id="username">div 标签 2</div>

2.3 class选择器

加一个 .，后面表示类的属性值

<style type="text/css"> 
	.class01 {
    color: blue;
    font-size: 30px;
    border: 1px solid yellow;
}

   .username {
    color: grey;
    font-size: 26px;
    border: 1px solid red;
} 
</style>

<div class="class01">div 标签 class01</div>
<div class="username">div 标签</div>

2.4 组合选择器

组合选择器的格式是：

选择器 1，选择器 2，选择器 n{
属性：值;
属性：值;
}
组合选择器可以让多个选择器共用同一个 css 样式代码。

<style type="text/css"> 
	.class01 , #id01{ 
		color: blue; 
		font-size: 20px; 
		border: 1px yellow solid; 
    } 
</style>

2.5 所见举例：

Case1：只有div标签才能使用class01样式

div.class01{
	color: blue; 
	font-size: 20px; 
	border: 1px yellow solid; 
}

Case2: 当一个标签，其有儿子标签div，儿子标签div又有儿子标签span时，则此标签才可使用class01样式

.class01 div span{
	color: blue; 
	font-size: 20px; 
	border: 1px yellow solid; 
}

2.6 id选择器与class选择器辨析

1. id与class的区别

id相当于人的身份证，不可以重复
class相当于人的名称可以重复
一个html标签只能绑定一个id名称
一个html标签可以绑定多个class名称

2. id选择器与class选择器的区别

id选择器是以#开头
class选择器是以.开头

3. CSS常用样式：

字体颜色 color：red；
颜色可以写颜色名如：black, blue, red, green 等
颜色也可以写 rgb 值和十六进制表示值：如 rgb(255,0,0)，#00F6DE，如果写十六进制值必须加#
宽度
width:19px;
宽度可以写像素值：19px；
也可以写百分比值：20%；
高度
height:20px;
高度可以写像素值：19px；
也可以写百分比值：20%；
背景颜色
background-color:#0F2D4C
字体样式
color：#FF0000；字体颜色红色
font-size：20px; 字体大小
红色，1 像素，实线边框
border：1px solid red;
DIV 居中
margin-left: auto;
margin-right: auto;
文本居中
text-align: center;
超连接去下划线
text-decoration: none;
表格细线
table {
border: 1px solid black; /设置边框/
border-collapse: collapse; /将边框合并/
}
td,th {
border: 1px solid black; /设置边框/
}
列表去除修饰
ul {
list-style: none;
}

种下一颗草莓

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS技术初学习

1. CSS和 HTML 的结合方式1.1 第一种在标签的 style 属性上设置”key:value value;”，修改标签样式。需求 1：分别定义两个 div、span 标签，分别修改每个 div 标签的样式为：边框 1 个像素，实线，红色。<body> <div style="border: 1px solid red;">div 标签 1</div> <div style="border: 1px solid red;">div 标签
复制链接

扫一扫

专栏目录