css入门基础

最新推荐文章于 2024-05-24 01:00:03 发布
最新推荐文章于 2024-05-24 01:00:03 发布
阅读量169 收藏
点赞数
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yuanjin1988/article/details/42705693
版权 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
	<head>
		<title>CSS入门基础</title>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
	</head>
	<body>
		<!-- 行内排版样式 -->
		<p style = "text-align:center;color:red;font-weight:bold;background:green">PHP100.COM---李炎恢老师</p>
		
	</body>
</html>  

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
	<head>
		<title>CSS入门基础</title>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
	</head>
	<body>
	    <!-- span内联 文本不换行 -->
		<span style = "color:red;background:#666;">PHP100中文网</span>
		<span style = "color:blue;background:#999;">PHP100中文网</span>
		<span style = "color:green;background:#ccc;">PHP100中文网</span>
		
		<!-- div区块 把这一整行给占了-->
		<div style = "color:red;background:#666;">PHP100中文网</div>
		<div style = "color:blue;background:#999;">PHP100中文网</div>
		<div style = "color:green;background:#ccc;">PHP100中文网</div>
	</body>
</html>


 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
	<head>
		<title>CSS入门基础</title>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<style type = "text/css">
			
			p
			{
				color : red;
				font-size : 20px;
				font-weight : bold;
			}
			.abc
			{
				color : green;
			}
			
			#def
			{
				color : orange;
			}
		</style>
	</head>
	<body>
	   <!-- 内嵌式排版样本 -->
	   <!-- 标记定义型 -->
	   
	   <!-- 
			优先级
			1.行内
			2.id
			3.class
			4.标记定义型
	   -->
	   <p>PHP100中文网</p>
	   <p class = "abc" style = "color:blue">PHP100中文网</p>
	   <p class = "abc" id = "def">PHP100中文网</p>
	   <p>PHP100中文网</p>
	   <p>PHP100中文网</p>
	   <p>PHP100中文网</p>
	   <p>PHP100中文网</p>
	   <p>PHP100中文网</p>
	   <p class = "abc">PHP100中文网</p>
	</body>
</html>


 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
	<head>
		<title>CSS入门基础</title>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<style type = "text/css">
			
			p
			{
				color : red;
				font-size : 20px;
				font-weight : bold;
			}
			
			.abc,.def
			{
				color : green;
				font-size :25px;
			}
			
			.abc
			{
				text-align : center;
			}
			.def
			{
				text-align : right;
			}
		</style>
	</head>
	<body>
	  
	   <p class = "abc">PHP100中文网</p>
	   <p class = "def">PHP100中文网</p>
	   <p>PHP100中文网</p>
	   <p>PHP100中文网</p>
	   <p>PHP100中文网</p>
	   <p>PHP100中文网</p>
	   <p>PHP100中文网</p>
	   <p>PHP100中文网</p>
	   <p>PHP100中文网</p>
	</body>
</html>


 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
	<head>
		<title>CSS入门基础</title>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<link rel = "stylesheet" type = "text/css" href = "13.css" />
	</head>
	<body>
	   <!-- 链接方式 -->
	   <p>PHP100中文网</p>
	   <p>PHP100中文网</p>
	   <p>PHP100中文网</p>
	   <p>PHP100中文网</p>
	   <p>PHP100中文网</p>
	   <p>PHP100中文网</p>
	   <p>PHP100中文网</p>
	   <p>PHP100中文网</p>
	   <p>PHP100中文网</p>
	</body>
</html>


 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
	<head>
		<title>CSS入门基础</title>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<style type = "text/css">
			@import "13.css";
		</style>
	</head>
	<body>
	   <!-- 导入方式 -->
	   <p>PHP100中文网</p>
	   <p>PHP100中文网</p>
	   <p>PHP100中文网</p>
	   <p>PHP100中文网</p>
	   <p>PHP100中文网</p>
	   <p>PHP100中文网</p>
	   <p>PHP100中文网</p>
	   <p>PHP100中文网</p>
	   <p>PHP100中文网</p>
	</body>
</html>


 

 

「已注销」
关注
专栏目录
css基础入门
YUWA的博客
12-31 875
css基础 层叠样式表css特性：层叠性，继承性[h系和a标签除外（浏览器内核有个默认样式）] 优先级：！important>行内样式（嵌入标签）>id选择器>类选择器>标签选择器>默认样式css基础 css选择器 行高相关属性 文本元素属性 连接伪类和a标签相关属性 背景属性 border相关属性 浮动布局float 定位相关属性position 元素之间的转换属性 css初始化css选
《CSS基础入门篇》
m0_66451927的博客
01-26 3156
一、CSS概念 CSS：是Cascading Style Sheets的英文缩写，CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（如文字的字体、大小、对齐方式等）、图片的外形（如宽高、边框样式、边距等）以及版面的布局等外观显示样式。CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。 二、CSS样式规则 使用HTML时，需要遵从一定的规范。CSS亦如此，要想熟练地使用CSS对网页进行修饰，
CSS入门基础详解——笔记、案例
qq_46362763的博客
04-01 1529
CSS入门学习 一、CSS简介 1、什么是CSS CSS：Cascading Style Sheet 层叠样式表 是一组样式设置的规则，用于控制页面的外观样式 2、为什么使用CSS 实现内容与样式的分离，便于团队开发 样式复用，便于网站的后期维护.........
CSS入门基础-目录
虾米大王的学习历程
12-26 276
CSS简介-CSS入门基础（001） CSS选择器-CSS入门基础（002） id选择器的使用-CSS入门基础（003） 子选择器的使用-CSS入门基础（004） 字体样式-CSS入门基础（005） 字体颜色的使用-CSS入门基础（006） 字体粗细的使用-CSS入门基础（007） 文本样式的使用-CSS入门基础（008） 文本缩进的使用-CSS入门基础（009） 字间距、词间距的使用-CSS入门基础（010） 边框样式的使用-...
CSS入门学习笔记+案例
热门推荐
itboy
06-16 30万+
CSS入门学习 一、CSS简介 1、什么是CSS CSS：Cascading Style Sheet 层叠样式表 是一组样式设置的规则，用于控制页面的外观样式 2、为什么使用CSS 实现内容与样式的分离，便于团队开发 样式复用，便于网站的后期维护 页面的精确控制，让页面更精美 3、CSS作用 页面外观美化 布局和定位 二、基本用法 1、CSS语法 <head> <style> 选择器{ 属性名：属性值; 属性名：属性值; } </style> &l
CSS入门 超详细
weixin_55816781的博客
04-12 7796
CSS 一基础认知 1.1：css的介绍 css：层叠样式表 css作用：给页面中的HTML标签设置样式 1.2css语法规则 写在哪里 css写在style标签中，style标签一般写在head标签里面，title标签下面 样式： 选择器{ 属性名:属性值; } 1.3css初体验 常见属性： color：文字颜色 font-size:字体大小 background-color:背景颜色 width:宽度 height：高度 <!DOCTYPE html> <html lang="e
Tailwind CSS快速入门
最新发布
知识点沉淀包括不限于前端
05-24 1636
Tailwind css 对比传统css css in js 安装流程 书写技巧 速查手册
CSS入门基础（样式，css文件，精心整理
weixin_57485542的博客
03-27 971
CSS代码保存在扩展名为.css的样式表中. HTML文件引用扩展名为.css的样式表h1{color:red;
CSS入门基础（样式，css文件，选择器）
『愚』的博客
10-27 3962
CSS入门学习CSS的简介基本用法给元素添加样式1.行内样式2.内部样式3.外部样式 CSS的简介 层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 [1] CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。 基本用法 给元素添
CSS 基础入门教程
天马3798
02-18 463
5.Css 轮廓outline、填充padding、外边距margin。4.Css 盒子模型 box-sizeing。1.CSS 概念、历史、发展和CSS3简介。10.Css 背景 background。8.Css 尺寸 Dimension。7.Css 定位 position。2.Css 开发工具和基础语法。6.Css 浮动 float。9.Css 边框border。
css 入门基础教程
09-25
总的来说，CSS入门基础教程涵盖了基本语法、选择器、注释和不同类型的样式表，这些都是学习CSS的基础。掌握这些知识后，可以进一步学习更复杂的布局技巧、响应式设计、动画和过渡效果，以及CSS预处理器等进阶主题。
html&css入门基础知识点.pdf
10-04
HTML和CSS基础知识点 HTML是用来描述网页的一种语言，指的是超文本标记语言（Hyper Text Markup Language），它不是一种编程语言，而是一种标记语言。HTML使用标记标签来描述网页的结构和内容。 标记语言是一套...
上百个CSS实例|CSS基础学习|CSS入门基础|CSS样式集合
04-23
本资源集合包含了“上百个CSS实例”，旨在帮助初学者快速掌握CSS的基础知识和应用技巧。 1. **CSS选择器**：CSS的选择器是定位HTML元素的关键，包括标签选择器、类选择器、ID选择器、属性选择器等。例如，`p` 选择...
htmlcss入门基础知识点.pdf
07-14
HTML和CSS基础知识点 HTML（Hyper Text Markup Language）是一种标记语言，用于描述网页的结构和内容。它不是一种编程语言，而是一种标记语言，使用标记标签（markup tag）来描述网页的结构和内容。 HTML的基本...
css中margin、padding属性用法
12-23 534
样式单边距margin使你能够在网页上的元素的矩形区域外部添加空隙。需要记住的 是,margin属性处理的是元素外面的间距。 以下是设置边距的样式属性 margin-top:设置上边距 margin-right:设置右边距 margin-bottom:设置下边距 margin-left:设置左边距 margin:在一个属性中设置上、右、下、左边距。 希望每个周围边距为15个像素，可
css构造超链接
01-16 309
css构造超链接 a { /*IE6 IE7不显示下划虚线*/ text-decoration:none; color:red; border-bottom:1px dashed #333; display:block; width:140px; line-height:150%;
css区块、浮动、定位、溢出、滚动条
01-14 262
CSS div { background:red; width:200px; height:100px; overflow:auto; scrollbar-face-color :pink; }
css边框与边界
01-14 242
CSS边框与边界 img { border:dashed 1px green; } <!-- 可依序设置上、右、下、左线颜色 border-color:red 四边均为红色 border-color:red green 上下为红色、左右为绿色 border-col
css定义选择器
01-15 233
定义选择器 #title { color:red; } PHP100.COM中文网 定义选择器 /*只适合title的h2标题*/ p#title { color:blue; } h2#ti
CSS入门基础教程：从零开始学习网页样式
"这是一份详尽的CSS入门基础教程，旨在帮助初学者掌握网页制作中的基本CSS代码编写技能。教程涵盖了CSS的定义、优势、基本语法、选择符、声明、注释，以及颜色、背景、文本、字体、边框和边外补白等核心概念。" 在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值