CSS快速入门 CSS选择器&字体排版

最新推荐文章于 2024-05-16 11:24:56 发布

£轻描～淡写°

最新推荐文章于 2024-05-16 11:24:56 发布

阅读量3.2k

点赞数 1

分类专栏： CSS HTML 文章标签： html 物联网前端

本文链接：https://blog.csdn.net/m0_60786924/article/details/123766221

版权

HTML 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

CSS

2 篇文章 0 订阅

订阅专栏

一、CSS的概述

        CSS的使用方式：4种
               1.行内式样式css设置
                   在标签中有一个属性可以设置css样式
                   style = ""
               2.嵌入式样式css设置
                   借助所谓的css选择器进行设置
                   选择器：做记号。
                       ID选择器、class类选择器、元素选择器
                   语法：必须放在head头部中而且需要使用style标签包裹。

               3.外部式引入css设置
                   （1）创建一个css文件来存储所有的css代码
                   （2）在指定的网页中通过link标签在head头部中引入即可

               4.导包式引入css设置
                   必须在head中编写style标签
                   利用import标记实现url导入

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 嵌入式css样式设置，必须要用style标签包裹 -->
		<style type="text/css">
			/* 导包式 */
			@import url("css/importstyle.css");
			/* 根据标签上的记号找到指定的标签进行相关样式设置 */
			#sb{
				/* 设置背景颜色 */
				background-color: yellow;
			}
		</style>
		<!-- 外部式引入css文件  通过link标记 -->
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
	</head>
	<body>
		<!-- 
			CSS:层叠式样式表，作用：美化HTML标签。
			因为HTML标签自带的属性比较少，而且有些属性不兼容
			可以利用CSS解决这些问题。
			
			CSS的使用方式：4种
				1.行内式样式css设置
					在标签中有一个属性可以设置css样式
					style = ""
				2.嵌入式样式css设置
					借助所谓的css选择器进行设置
					选择器：做记号。
						ID选择器、class类选择器、元素选择器
					语法：必须放在head头部中而且需要使用style标签包裹。
				
				3.外部式引入css设置
					（1）创建一个css文件来存储所有的css代码
					（2）在指定的网页中通过link标签在head头部中引入即可
		 
				4.导包式引入css设置
					必须在head中编写style标签
					利用import标记实现url导入
		 -->
		<h2 id="sb" color = "red">我是标题2</h2>
		<h2 style="color: red;">我是通过css设置的标题2</h2>
		
		<p id="pid">我是段落标签，我需要通过外部式引入来设置背景颜色</p>
	
		<div id="oDiv">
			天天向上，好好学习
		</div>
	
	
	</body>
</html>

二、CSS使用方式

1.认识CSS样式
CSS全称为"层叠样式表(Cascading Style Sheets)"主要用以定义html内容在浏览器内的显示样式。

                    CSS:层叠式样式表，作用：美化HTML标签。
           因为HTML标签自带的属性比较少，而且有些属性不兼容
           可以利用CSS解决这些问题。

        2.CSS代码语法
                  CSS样式有选择符(选择器)和声明组成,而声明又有属性和值组成。如下：
   p{color:blue}

3.CSS注释代码
/* 代码注释 */

        4.CSS样式的位置及相关的优先级
                  4.1 内联式CSS样式：直接写在现有的html标签中
                  4.2 嵌入式CSS样式：写在当前的文件中，一般位于head标签内
                  4.3 外部式CSS样式：写在单独的一个文件中（.css）<link>标签引入
                  4.4 三种方式的优先级：内联式>嵌入式>外部式

        5.CSS选择器
                  5.1 什么是选择器？
                           每一条css样式定义由两部分组成，形式如下：
                           选择器{样式;}

                  5.2 标签选择器、类选择器、ID选择器（最常用的三种选择器）
                           标签选择器：标签{}
                           类选择器：.class{}
                          id选择器：#id{} 同一个网页中只允许一个id

5.3 其它选择器：子选择器（>），包含（后代选择器）(空格)
通用选择器（*）、伪类选择器(a:hover)、分组选择器(标签,标签)

        6.CSS格式化排版
                  6.1 文字排版--字体 font-family 宋体、微软雅黑
                  6.2 文字排版--字号、颜色 font-size color
                  6.3 文字排版--粗体 font-weight
                  6.4 文字排版--斜体 font-style
                  6.5 文字排版--下划线 text-decoration:underline
                  6.6 文字排版--删除线 text-decoration:line-through
                  6.7 文字排版--缩进 text-indent:2em   em代表文字的2倍大小
                  6.8 文字排版--行间距(行高) line-height
                  6.9 文字排版--中文字间距、字母间距 letter-spacing
                  6.10 文字排版--对齐 text-align

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			a{
				/* 去掉下划线 */
				text-decoration: none;
			}
		/* 字体设置 */
			#p1{
				/* 设置字体的大小 */
				font-size: 50px;
				/* font属性：复合属性，同时可以设置多个值 */
				/* 颜色设置 */
				color: red;
				/* 加粗 */
				font-weight: bold;
				/* 下划线 */
				text-decoration: underline;
				/* 对齐方式 */
				text-align: center;
				/* 首行缩进指定的像素单位值 */
				/* text-indent: 120px; */
				/* line-height */
				/* 设置边框线 */
				border:  1px solid red;
				height: 200px;
				/* 利用line-height设置行高垂直居中  必须与高度一致 */
				line-height: 200px;
			}
		</style>
	</head>
	<body>
		<a href="http://www.baidu.com">百度一下</a>
		<hr>
		<p id="p1">我用双手成就你的梦想</p>
		<p>面对疾风吧</p>
		<p>你买单我就来</p>
		<p>死亡如风，常伴吾身</p>
		<p>你的剑就是我的剑</p>
		
	</body>
</html>

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#oDiv{
				border: 1px solid red;/*边框线*/
				width: 500px;
				height: 300px;
				/* 背景图片设置 */
				/* background-image: url(img/R-C.jpg); */
				/* 设置图片平铺 */
				/* background-repeat: repeat-x; */
				/* background-repeat: repeat-y; */
				background-repeat: no-repeat;
				/* 图片定位 */
				background-position: -300px,-50%;
				background: #FF0000;
			}
		</style>
	</head>
	<body>
		<!-- 背景设置background -->
		
		<div id="oDiv"></div>
		
		
		
		
		
	</body>
</html>

        8.CSS列表（ul、ol）
                  list-style
                  list-style-image

        9.盒模型
                  9.1 元素分类
                           在布局前，了解：html标签元素分为三种类型：块状元素、内联元素(又叫行内元素)、内联块状元素。display属性设置

                  9.2 常用的块状元素有：独占一行，元素的高度、宽度、行高以及顶和底边距都可设置
   <div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

9.3 常用的内联元素有：和其他元素都在一行上，元素的高度、宽度及顶部和底部边距不可设置
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

9.4 常用的内联块状元素有：和其他元素都在一行上，元素的高度、宽度、行高以及顶和底边距都可设置
<img>、<input>

9.5 什么盒子模型？（月饼例子）块状元素都具有盒子模型的特定
由margin、padding、border、content组成

二、CSS选择器:

Selectors 选择符	CSS Version 版本	Compatibility 兼容性	Syntax Samples 语法	Description 简介
类型选择符(Type Selectors)	CSS1	IE4+ , NS4+	E1	以文档语言对象类型作为选择符
通配选择符(Universal Selector)	CSS2	NONE	*	选定文档目录树（DOM）中的所有类型的单一对象
包含选择符(Descendant Selectors)	CSS1	IE4+ , NS4+	E1 E2	选择所有被E1包含的E2。即E1.contains(E2)==true
子对象选择符(Child Selectors)	CSS2	NONE	E1 > E2	选择所有作为E1子对象的E2
相邻选择符(Adjacent Sibling Selectors)	CSS2	NONE	E1 + E2	选择紧贴在对象E1之后的所有E2对象
属性选择符(Attribute Selectors)	CSS2	NONE	E1[attr]	选择具有attr属性的E1
属性选择符(Attribute Selectors)	CSS2	NONE	E1[attr=value]	选择具有attr属性且属性值等于value的E1
属性选择符(Attribute Selectors)	CSS2	NONE	E1[attr~=value]	选择具有attr属性且属性值为一用空格分隔的字词列表，其中一个等于value的E1
属性选择符(Attribute Selectors)	CSS2	NONE	E1[attr\|=value]	选择具有attr属性且属性值为一用连字符分隔的字词列表，由value开始的E1
ID选择符(ID Selectors)	CSS1	IE4+ , NS4+	#sID	以文档目录树（DOM）中作为对象的唯一标识符的ID作为选择
类选择符(Class Selectors)	CSS1	IE4+ , NS4+	E1.className	在HTML中可以使用此种选择符。其效果等同于E1[class~=className]
选择符分组(Grouping)	CSS1	IE4+ , NS4+	E1,E2,E3	将同样的定义应用于多个选择符，可以将选择符以逗号分隔的方式并为组

选择器的使用：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style type="text/css">
			#a1{
				/* background-color: red; */
			}
			/* 元素选择器 */
			li{
				/* background-color: yellow; */
			}
			.s1{
				/* background-color: blue; */
			}
			/* 通配选择器 */
			*{
				/* background-color: green; */
			}
			/* 子代选择器  根据指定的父标签指定子标签 */
			 ol>li{
				 /* background-color: red; */
			 }
			 /* 后代选择器  空格 */
			 ol li{
				 background-color: yellow;
			 }
		</style>
		
		<!-- 
			JavaScript代码
		<script type="text/javascript">
			window.onload = function(){
				var result = document.getElementById('a1');
				alert(result.innerHTML);
			};
		</script> -->
	</head>
	<body>
		<!-- 
			css选择器
				其实就是一个标记，为了设置css代码方便查找到指定的标签
				
			ID选择器      在标签上必须设置id属性 通过style标签（行内式样式设置）+#可以设置
				id选择器是唯一的，一个html网页中不能出现相同的id属性值，否则就会覆盖
					样式可以一样，但是获取值会优选选中第一个
			
			
			
			类选择器      在标签上必须设置class属性 通过style标签（行内式样式设置）+.可以设置
				class选择器的值可以重复
			元素选择器
				标签本身，可以通过元素选择器为标签上所有相同的标签设置一样的样式。
				
				
				css属性样式设置的语法
					属性名:属性值;
					
				结合选择器设置css属性设置的完整语法
					选择器{
						属性名:属性值;
					}
		 
		 
		 -->
		 
		 <ol>
		 	<li id="a1">123</li>
		 	<li></li>
		 	<li></li>
		 	<li class="s1"></li>
		 	<li></li>
			<ul>
				<li>item1</li>
				<li>item2</li>
				<li>item3</li>
				<li>item4</li>
				<li>item5</li>
			</ul>
		 	<li class="s1"></li>
		 	<li></li>
		 	<li></li>
		 	<li></li>
		 	<li id="a1">456</li>
		 </ol> 
		 
	</body>
</html>

选择器的作用：能够更快的设置样式。

£轻描～淡写°

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS快速入门 CSS选择器&字体排版

一、框架标记框架标签：<frameset>/<frame>/<noframes>/<iframe> 所谓框架便是网页画面分成几个框窗，同时取得多个 URL.【分成左右两相等部分，左便是显示 up2u.html，右边则会显示 me2.html】 <frameset cols="50%,*"> <frame name="hello" src="up2u.h...
复制链接

扫一扫