CSS的基础概念、行内样式（内嵌样式）、内部样式（内联样式）、外部样式（外联样式）、字体相关属性及相关练习的案例

最新推荐文章于 2024-09-23 10:29:43 发布

坚持曾今曾坚持的

最新推荐文章于 2024-09-23 10:29:43 发布

阅读量4.3k

点赞数 4

文章标签： css html

本文链接：https://blog.csdn.net/qq_44791674/article/details/108220811

版权

这篇博客介绍了CSS的基础概念，包括行内样式、内部样式和外部样式的区别和使用，详细讲解了字体相关属性，并提供了多个实战案例，如文本对齐、字体设置、颜色和装饰效果等。

摘要由CSDN通过智能技术生成

CSS学习笔记

CSS的基本概念
Cascading Style Sheet层叠样式表
标签：<p> <div>…之类的标签使用方式：直接输入标签名
类（class）：class名字使用方式：输入点+class名
ID: ID名
使用方式：输入#+id名
一般来说我们写CSS文件的时候用的都是第二种方法，class名
这是因为ID名一般被用作JS的选择器
给class命名也是有规范的，像xxx-xxxx 这样做的好处是让你的代码更清晰
别人也更容易看懂
**

三种连接样式

行内样式（内嵌样式）

在这里插入图片描述
直接写在标签里，使用style属性，只对当前标签有效，页面内容和表现形式是高度耦合的，不利于分工合作

内部样式（内联样式）：

在这里插入图片描述
内部样式是在head部分使用

外部样式（外联样式）

在这里插入图片描述
外部样式需要一个link标签来与html连接起来，内容与表现形式完全分离，而且任何需要用到改样式的页面都可以通过link标签连接的方式来实现。

字体相关属性：

text-align（对齐方式）：center（居中）/left（靠左）/right（靠右）
font-size（字体大小）：56px/24px /xxpx
font-family（字体体系）：“黑体”/“幼圆”
font-style（是否倾斜）: italic（倾斜）/normal（正常）
font-weight（字体粗细）：100/200/normal（400）/bold（700）/bolder
font-variant（是否大写）：normal/small-caps（小型大写）
color（字体颜色）：blue/red/pink/black/green/#FFFFFF/#F6F6F6
text-decoration: none（默认格式，无）/underline（下划线）/overline（上划线）/line-through
direction(文本方向): ltr(left to right从左到右)/rtl（right to left从右到左）
text-transform(大小写): none（默认）/capitalize(首字母大写)/uppercase（全部大写）/lowercase(全部小写)
line-height(行高): normal/xx px
letter-spacing(字符间距): 2px/5px /xxxpx
word-spacing(单词间距)：normal/2px/5px/xxxpx

案例1：望月怀远

海上升明月，天涯共此时。 /大小24px 字体楷体靠左
情人怨遥夜，竟夕起相思。 /颜色红色，靠右
灭烛怜光满，披衣觉露滋。 /左半句靠左，右半句靠右
不堪盈手赠，还寝梦佳期。 /大小30px 颜色蓝色字体幼圆居中

案例2：

我是江西小霸王
江西这边我最狂
要说江西谁最帅
还得江西小霸王

行高5px
自己想一个题目，标签h1

第一句黑体，红色
第二句加删除线
第三句加上、下划线从“西”处断开，分为“要说江西” “谁最帅” 间距50px
第四句单词间距10px

DOME1.HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Demo1</title>
		<style type="text/css">
			/* p{
				font-size:24px;
			} */
		</style>
		<link rel="stylesheet" type="text/css" href="Demo1.css" />
		<style type="text/css">
			p{
    
				font-size:24px;
			}
		</style>
	</head>
	<body>
		<div class="poetry">
			<h1 style="color:green;font-size:24px;">绝句</h1>