CSS基本原理入门

最新推荐文章于 2021-09-09 21:58:34 发布
最新推荐文章于 2021-09-09 21:58:34 发布
阅读量262 收藏
点赞数
分类专栏： css 前端 HTML 文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/H_zhiyi/article/details/108222831
版权
前端 同时被 3 个专栏收录
39 篇文章 0 订阅
订阅专栏
HTML
11 篇文章 1 订阅
订阅专栏
css
8 篇文章 0 订阅
订阅专栏

CSS基础属性
1.什么是CSS？
2.如何导入CSS到html文件中？【3种】
3.CSS的基本选择器
4.CSS的基本属性
4.1 修饰文本样式属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table border="1" cellspacing="0" cellpadding="5">
			<tr>
			<td>属性名称</td>
			<td>属性的作用</td>
			<td>属性的取值</td>
			</tr>
			<tr>
			<td>text-transform</td>
			<td>文本转换大小写</td>
			<td>None:capitalize:Uppercase：Lowercase
			</td>
			</tr>
			<tr>
			<td>text-align</td>
			<td>元素内容的水平对齐方式</td>
			<td>left|right|center</td>
			</tr>
			<tr>
			<td>word-spacing</td>
			<td>单词直接的额外间隙</td>
			<td>数字+单位【px】可以为负数</td>
			</tr>
			<tr>
			<td>letter-spacing</td>
			<td>字符与字符之间的间隙</td>
			<td>数字+单位【px】可以为负数</td>
			</tr>
			<tr>
			<td>text-indent</td>
			<td>定义块内文本内容的缩进</td>
			<td>数字+单位【px】可以为负数</td>
			</tr>
			<tr>
			<td>vertical-align</td>
			<td>定义行内元素在行框内的垂直对齐方式</td>
			<td>top middle bottom </td>
			</tr>
			<tr>
			<td>line-height</td>
			<td>定义元素中行框的最小高度。</td>
			<td>数字+单位【px】不能为负数</td>
			</tr>
		</table>
	</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>常用的文本属性</title>
		<style type="text/css">
			#p1{
				text-transform: none;
				text-align: left;
				text-indent:50px;
			}
			#p2{
				text-transform: capitalize;
				text-align: center;
			}
			#p3{
				text-transform: uppercase;
				text-align: right;
			}
			#p4{
				text-transform: lowercase;
			}
			#p5{
				text-transform:full-width;
			}
			#p6{
				word-spacing: 10px;
				letter-spacing: 15px;
			}
			table{
				height: 200px;
			}
			table tr td{
				vertical-align: bottom;
			}
			#p7{
				line-height: 20px;
			}
		</style>
	</head>
	<body>
		<h1>常用的文本属性</h1>
		<p id="p1">none:无转换</p>
		<p id="p2">capitalize:将每个单词的第一个字母转换城大写【常用】</p>
		<p id="p3">uppercase:将每个单词转换成大写</p>
		<p id="p4">lowercase:将每个单词转换成小写</p>
		<p id="p5">full-width:将所有字符转换成fullwidth形式。
		如果字符没有相应的fullwidth形式，将保留原样。
		这个值通常用于排版拉丁字符和数字等表意符号（CSS3）
		</p>
		<p id="p6">this is a html page 这是一个html文件</p>
		<p id="p7">this is a html page 这是一个html文件
		           this is a html page 这是一个html文件
		           this is a html page 这是一个html文件  
		           this is a html page 这是一个html文件
		</p>
		<br>
		<table border="1px">
			<tr>
			<td>vertical-align</td>
			<td>定义行内元素在行框内的垂直对齐方式</td>
			<td>top middle bottom</td>
			</tr>	
		</table>
	</body>
</html>

在这里插入图片描述
4.2修饰字体的样式属性

<!DOCTYPE html>
		<html>
			<head>
				<meta charset="utf-8">
				<title></title>
			</head>
			<body>
				<table border="1" cellspacing="0" cellpadding="5">
					<tr>
					<td>属性名称</td>
					<td>属性用途</td>
					<td>属性取值</td>
					</tr>
					<tr>
					<td>font-style</td>
					<td>文本是否为斜体</td>
					<td>normal | italic | oblique
					</td>
					</tr>
					<tr>
					<td>font-weight</td>
					<td>文本字体的粗细</td>
					<td>用数字表示文本字体粗细100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900</td>
					</tr>
					<tr>
					<td>font-size</td>
					<td>定义元素的字体大小</td>
					<td>数字+单位【px】</td>
					</tr>
					<tr>
					<td>letter-spacing</td>
					<td>字符与字符之间的间隙</td>
					<td>数字+单位【px】可以为负数</td>
					</tr>
					<tr>
					<td>font-family</td>
					<td>定义元素文本的字体样式</td>
					<td>字体样式名称，可以有多个，中间用“，</td>
					</tr>
					<tr>
					<td>color</td>
					<td>设置字体颜色</td>
					<td>单词/颜色码</td>
					</tr>
				</table>
			</body>
		</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#p1{
				font-style: italic;
			}
			#p2{
				font-weight: 900;
			}
			#p3{
							font-size:50px;
							font-weight:900;
						}
						#p4{
							font-style:italic;
							font-weight:900;
							font-size:50px;
							font-family:helvetica, verdana, sans-serif;
							color: red;
						}

		</style>
	</head>
	<body>
		<h1>字体设置属性</h1>
				<p id="p1">font-style	文本是否为斜体	normal | italic | oblique</p>
				<p id="p2">font-weight	文本字体的粗细	用数字表示文本字体粗细</p>
				<p id="p3">font-size	定义元素的字体大小	数字+单位【px】</p>
				<p id="p4">font-family	定义元素文本的字体样式	字体样式名称，可以有多个，中间用“，”</p>
				<p id="p5">color 设置字体颜色	单词/颜色码</p>
	</body>
</html>

在这里插入图片描述
4.3 修饰颜色的样式属性
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>颜色设置</title>
		<style>
			p{
				font-size: 30px;
				color: red;
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<p>color	文本颜色	 单词/颜色码<br>
		   background-color	元素的背景色	单词/颜色码
		</p>
	</body>
</html>

在这里插入图片描述
4.4 修饰背景的样式属性
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>背景设置</title>
		<style>
			body{
				background-image:url(imgs/avatar04.png);
				background-repeat:no-repeat;
			}
			p{
				font-size: 50px;
				background-image: url(imgs/bg2.jpg);
			}
		</style>
	</head>
	<body>
		<p>background-color	定义元素使用的背景颜色。	单词/颜色码</p>
		<p>background-image	定义元素使用的背景图像	图片路径url(图片路径);</p>
		<p>background-repeat	定义元素的背景图像如何填充	repeat-x： 背景图像在横向上平铺 
		repeat-y： 背景图像在纵向上平铺 repeat： 背景图像在横向和纵向平铺 no-repeat： 背景图像不平铺 
		</p>
	</body>
</html>

在这里插入图片描述
4.5 修饰边框的样式属性
在这里插入图片描述
border：<line-width> || <line-style> || <color>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>边框设置</title>
		<style>
			#div1{
				width: 100px;
				height: 100px;
				border: 5px double red;
			}
			#div2{
				width: 200px;
				height: 200px;
				border-width: 10px;
				border-style: solid;
				border-color: blue;
			}
			#div3{
				width: 300px;
				height: 300px;
				border-width: 10px 20px 30px 40px;
				border-style: dotted;
				border-color: red  blue yellow greenyellow;  
			}
			#div4{
				width: 400px;
				height: 400px;
				border-width: 10px 20px;
				border-style: dashed;
				border-color: red  blue;  
			}
			img{
				border: 10px outset black;
			}
		</style>
	</head>
	<body>
		<div id="div1"></div><br>
		<div id="div2"></div><br>
		<div id="div3"></div><br>
		<div id="div4"></div><br>
		<img  src="imgs/avatar04.png"/>
	</body>
</html>

在这里插入图片描述
4.6 修饰文本装饰样式属性
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文本装饰属性</title>
		<style>
			#p1{
				font-size: 40px;
				color: red;
				text-decoration-line:underline;
				text-decoration-color:blue;
				text-decoration-style: double;
				text-shadow: 5px 5px  20px #000000;
			}
			a{
				font-size: 40px;
				text-decoration-line:none;
				color: black;
			}
		</style>
	</head>
	<body>
		<p id="p1">文本装饰属性---text-decoration-line---文本的装饰线</p>
		<a href="#">去掉超链接上的下划线</a><br>
		<p id="p1">文本装饰属性---text-decoration-color---文本的装饰线的颜色</p>
		<p id="p1">文本装饰属性---text-decoration-style---文本的装饰线的形状</p>
		<p id="p1">文本装饰属性---text-shadow---文字是否有阴影及模糊效果</p>
	</body>
</html>

在这里插入图片描述
4.7 修饰尺寸样式属性
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>尺寸设置</title>
		<style>
			div{
				width: 400px;
				height: 400px;
				border: 10px solid black;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

在这里插入图片描述
4.8修饰边距样式属性
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>尺寸设置</title>
		<style>
			div{
				width: 400px;
				height: 400px;
				border: 10px solid black;
				background-color: red;
				margin-top:-8px;
				m
			}
			body{
				padding-left: 100px;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

在这里插入图片描述
4.9修饰列表样式属性
list-style-image–设置或检索作为对象的列表项标记的图像—图片路径
list-style-type-----设置或检索作为对象的列表项预设标记—disc | circle | square | decimal…

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>列表属性</title>
		<style>
			ul li{
				font-size: 20px;
				list-style-type: square;
			}
			ol li{
				font-size: 30px;
				list-style-image: url(imgs/list.png);
			}
		</style>
	</head>
	<body>
		<ul>
			<li>name：张三</li>
			<li>age：23</li>
			<li>sex：男</li>
			<li>address：西安</li>
		</ul>
		<br>
		<ol>
			<li>name：张三</li>
			<li>age：23</li>
			<li>sex：男</li>
			<li>address：西安</li>
		</ol>
	</body>
</html>

在这里插入图片描述

H之一
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS设计指南---CSS工作原理
weixin_40794404的博客
06-23 779
CSS设计指南---CSS工作原理 教材: CSS设计指南
CSS基本原理入门级
H_zhiyi的博客
08-22 268
CSS-1 什么是css? CSS 是 Cascading Style Sheet 的缩写。译作「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 [美化页面]。 如何将css加入您的网页中？ 内联定义 (Inline Styles) 在html的开始标记内使用style属性定义适用标记样式表属性。 <!DOCTYPE html> <html> <head> <meta charset="utf-8">
一点点css的基础原理总结
weixin_34308389的博客
05-09 112
0.前言 CSS属性非常多，如果说死记的话，是不容易的，我们了解他的原理，其他不常见的属性都是手到擒来 1.包含块（CB） 首先说一下ICB（初始包含块）。简单来说，根元素的ICB就是首屏。 连续媒体：页面内容范围超出视窗大小，需要我们拉动滚动条才能看，他的ICB是视窗（viewport） 分页媒体：页面内容是一页一页的，比如我们在手机上看见的一些h5，他的ICB是页面范围 这很明显，positi...
第二章 CSS工作原理（剖析CSS规则）
Vivianluolita的专栏
06-22 3173
一 简述：CSS样式与HTML的关系   第 1 章我们了解了怎么通过 HTML 来创建文档结构。本章，我们来说一说 CSS 规则怎么为 HTML 添加样式，并解释层叠的工作机制——当元素的同一个样式属性有多 4 种样式值的时候，CSS 就要靠层叠机制来决定最终应用哪种样式。   每个 HTML 元素都有一组样式属性，可以通过 CSS 来设定。这些属性涉及元素在屏幕上显示时的不同方面，比
css入门入门入门入门
最新发布
05-23
首先，我们需要理解CSS的基本原理。CSS与HTML紧密配合，HTML负责结构化内容，而CSS则负责呈现这些内容的视觉样式。通过CSS，我们可以控制元素的颜色、字体、布局、动画等各个方面，实现页面的美化和响应式设计。 ...
html5+css3从入门到精通
07-03
对于新手而言，理解基本的HTML5标签和CSS3选择器至关重要。学习如何创建和组织HTML结构，以及如何使用CSS控制样式，将为后续的前端开发奠定坚实基础。此外，掌握响应式设计原理，利用媒体查询（media queries）根据...
css语言入门
03-03
#### CSS的基本原理 - **层叠性**：当在HTML文件中引用了多个定义样式文件（CSS文件）时，若这些样式文件中定义的样式发生冲突，则根据层级关系来决定最终应用哪一个样式。 - **优先级原则**：更靠近目标标签的样式...
css入门教程.pdf
10-04
学习CSS不仅有助于你理解网页设计的基本原理，还能让你掌握构建专业、美观网站的关键技能。随着CSS的不断进化，如CSS3的引入，更多的高级功能如阴影、渐变、多列布局、媒体查询等，使得CSS成为了现代网页设计不可或...
css样式的书写顺序及原理——很重要！
guolulu66的博客
10-08 180
记得刚开始学习前端的时候，每次写css样式都是用到什么就在样式表后添加什么，完全没有考虑到样式属性的书写顺序对网页加载代码的影响。后来逐渐才知道正确的样式顺序不仅易于查看，并且也属于css样式优化的一种方式。那么是怎么个顺序呢？ （1）定位属性：position display float left top right bottom overflow clear z-index （2）自身属性：width height padding border margin backg
CSS的原理，如何解析？
clhq71932的博客
02-27 418
我们每天都在与CSS打交道，那么CSS的原理是什么呢？10个人里面9个人都不能准确地答出来吧！ 一、浏览器渲染 首先来回顾一下浏览器的渲染过程，先上图： 正如上图所展示的，我们浏...
css的工作原理及使用规则
weixin_34117211的博客
04-30 281
1. css定义 层叠样式表（英语：Cascading Style Sheets，简写CSS），又称串样式列表、级联样式表、串接样式表、层叠样式表、阶层式樣式表，一种用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）的计算机语言，由W3C定义和维护。目前最新版本是CSS2.1，为W3C的推荐标准。CSS3现在已被大部分现代浏览器支持，而下一版的CSS4仍在开发中。 2. ...
CSS详解（一）——CSS基本原理
永远是少年
09-09 1267
今天继续给大家介绍iStack和CSS的相关内容，本文主要介绍了CSS的基本原理。由于CSS与iStack是两种非常相似的交换机多虚一的实现方式，只不过是运用在不同的设备上，因此建立大家结合iStack进行学学习。 推荐阅读： iStack详解（一）——iStack基本原理 iStack详解（二）——堆叠连接方式堆叠拓扑变动处理 iStack详解（三）——iStack多主检测方式 一、CSS概述 在计算机网络中，CSS一般指Cluster Switch System，集群交换机系统，简称为集群，CSS与iS
CSS定位（positive）属性的原理
hyr_ii的博客
12-20 3518
static默认值，元素出现在正常的流中。默认值，所以没什么好说的。 relative通过设置水平距离（left/right）或垂直距离（top/bottom），让这个元素相对于它的起点移动。元素仍然占据原来的空间。所以当div2偏移100px时，div1，3都保持在原来的位置。.div2 { width: 100px; height: 100px;
浏览器渲染页面、CSS原理及优化
Benjamin——前端攻城师
07-26 4471
在写css代码时 做一些简单的优化，这样css的渲染速率会有一定的提高的。 浏览器是如何渲染页面和加载页面 为什么有些网站打开的时候会加载会很慢，而且是整个页面同时显示的，而有些网站是从顶到下逐步显示出来的？要搞懂这个可以先从下面这个常规流程开始： 浏览器下载的顺序是从上到下，渲染的顺序也是从上到下，下载和渲染是同时进行的。在渲染到页面的某一部分时，其上面的所有部分都已经下载
web表格制作
热门推荐
H_zhiyi的博客
08-20 1万+
1.表格的制作 1、表格元素–<table> 表格中的行–<tr> 表格中的列–<td> 表格中的表头–【居中/加粗】 table标记的边框–border table标记的宽度–width table标记的高度–height table标记的水平对齐方式–align table标记的表格背景色–bgcolor table标记的表格边框色–bordercolor table标记的表格中的内容与边框之间的距离–cellpadding table标记的表格中的边框与边框之间的距
HTML标签书写格式大全
H_zhiyi的博客
09-28 3591
一、常用浏览器与浏览器内核 1.常用浏览器 chromo(推荐谷歌) Firefox(火狐) IE浏览器 Opera浏览器 safari浏览器 2.浏览器内核 浏览器内核的主要组成部分： 渲染引擎（layout或engine）和JS引擎 渲染引擎：负责获取网页的内容（HTML.XML.图像等）、整理信息（加入CSS等），已经计算网页的显示方式，然后输出到显示器或打印机。浏览器的内核的不同对网页的语法解释会有所不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其他需要编辑、显示网络内容的应用程序
CSS+DIV入门：掌握元素定位与基本样式
这篇文章是为初学者准备的CSS和DIV基础教程，涵盖了从CSS基本语法到实际应用的方方面面，对于希望掌握这两种技术的人来说是一份宝贵的资源。通过学习这些内容，读者能够更好地设计出结构清晰、样式统一的网页。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值