CSS样式和选择器

最新推荐文章于 2024-07-06 20:00:00 发布

youdabi

最新推荐文章于 2024-07-06 20:00:00 发布

阅读量105

点赞数

分类专栏： HTML 文章标签： css html 前端

本文链接：https://blog.csdn.net/m0_67368271/article/details/125361047

版权

HTML 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、CSS样式：

1. 样式分类：

优先级：外部样式< 内部样式< 行内样式

行内样式：写在标签内的样式，作用为一行
内部样式：写在style标签内，作用整个页面
外部样式：单独写一个css文件，作用整个页面

使用外部样式：
<link rel="stylesheet" type="text/css" href="文件路径"/>

<style>标签声明标签内为CSS
       多条样式规则
       1.多个属性间用分号分隔
       2.用冒号声明对应属性值

2. 属性

文本属性：

       font（缩写形式）
       font-weight（粗细）
       font-size（大小）
       font-family（字体）

行距、对齐等：

       line-height （行高）
       text-align （对齐）
       letter-spacing （字符间距）
       text-decoration （文本修饰）
       white-space （空白处理）

背景属性：

   background （缩写形式）
   background-color（背景色）
   background-image（背景图）
   background-repeat（背景图重复方式）
   background-position（位置坐标、偏移量）

列表（li）常用属性：

二、选择器：

标签选择器：根据标签名
类选择器：class属性，属性值可相同

使用方法：.class属性值

/* 类选择器 */
       .p1{
           /* 设置字体大小 */
           font-size: 26px;
       }

id选择器：id属性，唯一标识符，属性值不同

使用方法：#id属性名

优先级： 标签选择器< 类选择器< id选择器

范围越小，优先级越高！！！

div 分块写，作用效果控制方便，层次清晰

三、案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>样式</title>
		<!-- 内部样式 -->
		<style>
			h1{
				font-size: 44px;/* 字体大小 */
				background-color: bisque;/* 背景颜色 */
			}
			p{
				font-size: 40px;
			}
		</style>
		
		<!-- 使用 外部样式 -->
		<link rel="stylesheet" type="text/css" href="css/外部样式.css"/>
	</head>
	
	<body>
		<!-- 行内样式 -->
		<h1 style="color: plum;">昨天朱朱来啦</h1>
		<h3>是凌晨两点诶</h3>
		<hr />
		
		<!-- 文本属性 -->
		<h2><p>静夜思</p></h2>
		<!-- 下划线、上划线，删除线 -->
		<p style="text-decoration: underline;text-decoration: overline;text-decoration: line-through;">床 前明月光，</p>
		<!-- 行高 -->
		<p style="line-height: 30px;" >疑是 地上霜。</p>
		<!-- white-space: pre-wrap  啥用，没看到效果 -->
		<p  style="white-space: pre-wrap;" >举头望 明月，</p>
		<p>低头思故乡。</p>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>行内样式</title>
		<link rel="stylesheet" type="text/css" href="../img/风格复试.css"/>
	</head>
	
	<body>
		<div class="two">
			<ul>
				 <li><a href="#">家用电器</a></li>
				 <li><a href="#">手机数码</a></li>
				 <li><a href="#" style="color: red;">日用百货</a></li>
			</ul>
		</div>
	</body>
</html>

css文件

h3{
	font-family: 草书;
	font-size: 20px;
}

li{
	color: black;
	text-decoration: none;
	float: left;
	width: 190px;
}

p{
	color: red;
}