第三次培训笔记（CSS）

最新推荐文章于 2024-07-12 20:49:16 发布

fuzhuyyds

最新推荐文章于 2024-07-12 20:49:16 发布

阅读量391

点赞数

文章标签： css p2p linq

本文链接：https://blog.csdn.net/fuzhuyyds/article/details/122800129

版权

CSS

1主要内容

2概述

CSS（层叠样式表）是用来美化网页用的，没有网页CSS则毫无用处，所以CSS依赖于HTML展示其功能。

1CSS的基本使用

1.1CSS基本语法

CSS样式由选择器和一条或多条以分号隔开的样式声明组成，每条声明的样式包含着一个 SS属性和属性值。

选择器名{
        属性:属性值;
        ......
    }

div {
    background-color : red;
    }

注意：

css声明要以分号结束，声明以大括号括起来

建议一行书写一个属性

若值为若干个单词，则要给值加引号，如 font-family:"agency fb"

1.2CSS的使用方式

行内样式：直接在标签上的样式，在style中，在<>内。

内部样式：定义在style标签内，style在head内，前面有选择器。

外部样式：定义在css文件中，通过link引用（在head中引用）。

rel=“stylesheet”表示这是一个层叠样式表，type=“text/css”表示这是css样式，后面href表示css文件地址。

注意：当有多重样式时（如行内样式与内部样式都设置同一个标签的同一个属性时），越精确越优先，行内最精确（可以记成就近原则）。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			h2{
				color:red;
			}
		</style> <!-- 内部样式 -->
		<link rel="stylesheet" type="text/css" href="css/style.css" /><!-- 外部样式 -->
	</head>
	<body>
		<h2>Hello World</h2>
		<h2 style="color: aquamarine;font-family: 楷体;">Hello World</h2> <!-- 行内样式 -->
	</body>
</html>

2CSS选择器

2.1基本选择器

2.1.1通用选择器

选择所有 *

* {
    ......
}

* {
    color: orange;
}

2.1.2元素选择器

选择指定标签

元素名称 {
    ......
}

p {
    color: red;
    font-size; 20px;
}

2.1.3ID选择器

选择设置过指定id属性值的元素 #

#id属性值 {
    ......
}

#p1 {
    font-weight: bold;
}

2.1.4类选择器

选择设置过指定class属性值的元素 .

.class属性值 {
    ......
}

.class属性值 {
    display: none;
}

2.1.5分组选择器

当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔

选择器1，选择器2，... {
    ......
}

h2,#pre1 {
    color: orange;
    font-style: 楷体;
}

综合体现：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				color: red;
			}
			div{
				color: #00aa00;
			}
			#p{
				color: blue;
				background-color: #FFFF00;
			}
			.class1{
				font-family: 楷体;
				color: steelblue;
			}
            #div,.font {
				font-style: italic;
                text-decoration: line-through;
			}
		</style>
	</head>
	<body>
		<div class="class1">这是一个div1</div>
		<div>这是一个div</div>
        <div id="div">这是一个div2</div>
		<p id="p">这是一个p</p>
		<span>这是一个span</span>
		<font class="font">这是一个font</font>
	</body>
</html>

2.2组合选择器

CSS组合选择器说明两个选择器直接的关系。

2.2.1后代(派生)选择器

用于选择指定标签元素下的后辈元素，以空格分隔。

选择器名 指定元素 {
        属性:属性值;
        ......
    }

.food li {
        border: 1px solid red;
    }

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		 <style type="text/css">
			.food li{
				border: 1px solid/* 实心线 */ blue;
			}
		 </style>
	</head>
	<body>
		<ul class="food">
			<li>水果
				<ul>
					<li>苹果</li>
					<li>梨</li>
					<li>香蕉</li>
				</ul>
			</li>
			<li>蔬菜
				<ul>
					<li>白菜</li>
					<li>芹菜</li>
					<li>萝卜</li>
				</ul>
			</li>
		</ul>
	</body>
</html>

2.2.2子代选择器

用于选择指定标签元素下的所有第一代子元素，用>分隔。

选择器名 > 指定元素 {
        属性:属性值;
        ......
    }

.food > li {
        border: 1px solid/* 实心线 */ blue;         
    }

HTML代码如上，呈现效果也如上。

2.2.3相邻兄弟选择器

选择指定元素的下一个指定元素(只找一个），两者有相同父元素，用+分隔。

选择器1 + 选择器2 {
        属性:属性值;
        ......
    }

#d + div {
        background-color: #808080;
    }

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#d + div{
				background-color: #808080;
			}
		</style>
	</head>
	<body>
		<div>这是一个div1</div>
		<div id="d">这是一个div2</div>
		<div>这是一个div3</div>
		<div>这是一个div4</div>
	</body>
</html>

2.2.4普通兄弟选择器

选择指定元素后面所有指定元素，用~分隔。

选择器1 ~ 选择器2 {
        属性:属性值;
        ......
    }

#d ~ div {
        background-color: #FA8072;
    }

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#d1 + div{
				background-color: #FA8072;
			}
		</style>
	</head>
	<body>
		<div>这是一个div1</div>
		<div id="d1">这是一个div2</div>
		<div>这是一个div3</div>
		<div>这是一个div4</div>
	</body>
</html>

fuzhuyyds

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第三次培训笔记（CSS）

CSS1主要内容 2概述CSS（层叠样式表）是用来美化网页用的，没有网页CSS则毫无用处，所以CSS依赖于HTML展示其功能。1CSS的基本使用1.1CSS基本语法CSS样式由选择器和一条或多条以分号隔开的样式声明组成，每条声明的样式包含着一个 SS属性和属性值。选择器名{ 属性:属性值; ...... }div { background-color : red; }注意：...
复制链接

扫一扫