CSS层叠样式表(一)

最新推荐文章于 2024-08-09 08:21:47 发布

zxl2029

最新推荐文章于 2024-08-09 08:21:47 发布

阅读量112

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/zxl2029/article/details/117751655

版权

css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

CSS层叠样式表

简介
统一的管理设置html标签的样式，使网页布局更加清晰。（html专注结构，css专注样式）
css语法规范
css由两个主要部分构成：选择器(确定设置样式目标)和声明语句集合(具体样式内容)

注意：语句以 “;” 号结尾，属性和值之间以 “:” 号隔开。
格式
```
<head>
<title>demo页面</title>
<style type="text/css">
	p {
		color: #55aa7f;
		font-size: 16px;
	}
</style>
</head>
```
注意：<style>标签一般写在头标签底部。上面代码将页面所有<p>标签的颜色设为#5a7f，文字大小设为16像素。

css引入方式

概述
根据css样式书写的位置，可以分为三类：
行内样式表
内部样式表
外部样式表

样式表	描述	作用范围
行内样式表	书写方便，权重高	一个标签(写在标签中)
内部样式表	结构样式部分分离	一个页面(写在html文档中)
外部样式表	结构样式完全分离	多个页面(写在css文件)

行内样式表

<p style="color: pink; font-size: 16px;">你好世界3</p>

外部样式表

css文件
p {
	color: pink;
	font-size: 16px;
}

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

基础选择器

概述
基础选择器由单个选择器组成，分别是标签选择器、类选择器、id选择器、通配符选择器

基础选择器	作用	用法
标签选择器	选择所有相同标签	p { color: red; }
类选择器	打包样式为一个类，标签需要自行调用	.yanse { color: red; }
id选择器	一个页面只能选择一个标签	#yanse { color: red; }
通配符选择器	选择页面所有标签	* { color: red; }

标签选择器
以标签为选项进行样式设置，被选中的标签被设置为统一的样式。

<!--
 	定义： 标签名 { 语句 } 
 -->
<head>
<title>demo页面</title>
	<style type="text/css">
		p {
			color: #55aa7f;
			font-size: 16px;
		}
	</style>
</head>

类选择器
将样式打包成一个类，需要该样式的标签可自行引入，而且一个标签可以引入多个类。调用方式：class=“类名类名类名”

<!--
	定义：  .类名 { 语句 }
 -->
<head>
	<title></title>
	<style type="text/css">
		.red {
			color: red;
		}
		.size {
			font-size: 28px;
		}
	</style>
</head>
<body>
	<p class="red size">第一行文字</p>
	<p>第二行文字</p>
</body>

id选择器
将样式打包到一起，标签通过id属性调用，而且每个html文档只能调用一次。一般配合js使用。调用方式：id=“id名”

<head>
<!--
	定义： #id名 { 语句 }
-->
	<title></title>
	<style type="text/css">
		#oneline {
			color: green;
			font-size: 28px;
		}
	</style>
</head>
<body>
	<p id="oneline">你好世界1</p>
	<p>你好世界2</p>
	<p>你好世界3</p>
</body>

通配符选择器
为页面所有标签添加样式，包括<body>，<html>。无须调用

<!-- 
	定义： * { 语句 }
-->
<head>
	<title></title>
	
	<style type="text/css">
		* {
			color: green;
			font-size: 18px;
		}
	</style>
</head>
<body>
	<p>你好世界1</p>
	<p>你好世界2</p>
	<p>你好世界3</p>
</body>

css字体属性

概述
定义字体系列、大小、粗细和文字样式。

属性	描述	提示
font-size	字号	单位px
font-family	字体	一般使用系统默认字体，根据团队约定
font-weight	字体粗细	加粗：bold 不加粗：normal
font-style	字体样式	斜体：italic 非斜体：normal(常用)
font	属性合并设置	顺序：style -> weight -> size -> family font: italic normal 18px “microsoft yahei”;

字体系列 font-family

<head>
	<title></title>
	<style type="text/css">
		body {
			font-family: "microsoft yahei",tahoma,Arial;
		}
	</style>
</head>

字体大小 font-size

<head>
	<title></title>
	<style type="text/css">
		body {
			font-size: 16px;
		}
	</style>
</head>

字体粗细 font-weight

<head>
	<title></title>
	<style type="text/css">
		p {
			font-weight: 700; 
		}
		h2 {
			font-weigth: 400;		
			font-size: 16px;
		}
	</style>
</head>

文字样式 font-style

<head>
	<title></title>
	<style type="text/css">
		em {
			font-style: normal;//非斜体
		}
		h2 {
			font-style: italic;//斜体
		}
	</style>
</head>

css文本属性

概述
定义文本的颜色、对其、装饰、缩进、行高

属性	描述	注意
color	文本颜色	常以十六进制表示 #fff
text-align	文本对齐	盒子左中右对齐
text-indent	文本缩进	通常设置段落缩进两字距离 text-indent: 2em；
text-decoration	文本装饰	下划线：underline 取消下划线：none
lin-height	行高	设置文本行高，小于文字高度会重叠

文本颜色

<style type="text/css">
	h2 {
		/* color: red; */
		color: #FF0000;
		/* color: rgb(255,0,0); */
	}
</style>

对齐文本

<style type="text/css">
	h2 {
		text-align: center;//居中
		/* text-align: left;//靠左 */
		/* text-align: right;//靠右 */
</style>

装饰文本

<style type="text/css">
	a {
		/* 去掉装饰线 */
		text-decoration: none; 
		/* 下划线 */
		/* text-decoration: underline; */
	}
</style>

文本缩进

<style type="text/css">
	p {
		/* text-indent: 32px; */
		text-indent: 2em;//缩进两个字大小
	}
</style>

文本行高

<style type="text/css">
	p {
		line-height: 18px;
	}
</style>

行高以盒子中心为起点，向上下扩展

zxl2029

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录