CSS入门

最新推荐文章于 2024-04-10 08:52:46 发布

-渡尘-

最新推荐文章于 2024-04-10 08:52:46 发布

阅读量330

点赞数

本文链接：https://blog.csdn.net/LXKZZY/article/details/103512400

版权

本节导图
在这里插入图片描述

一。CSS样式规则
在HTML中，引入CSS的方法主要有：行内式、内嵌式、导入式、链接式4种。　　
1.行内式：在标记的style属性中设定CSS样式，这种方式本质上没有体现出CSS的优势，因此不推荐使用。

嵌入式：对页面中的各种元素的设置集中在之间。
导入式和链接式：目的都是将一个独立的CSS文件引入HTML文件中。链接式使用HTML的标记引入外部CSS文件
. 二.样式表
1.行内式
2.内嵌式
3.链入式
4.导入式
三.基本CSS选择器
标记选择器、类别选择器和ID选择器3种。

1 标记选择器

选择器包含：选择器本身、属性和值。

如 h1{ color:red,font-size:12px;}.

2 类别选择器

类别选择器的名称由用户自定义，属性和值跟标记选择器一样，也必须符合CSS规范。如 .class{color:green;}

最好通过标记选择器定义标记的全局显示方案，再通过clss选择器突出标记进行单独设置。这样可提高代码的编写效率。

3 ID选择器

ID选择器只能在HTML页面中使用一次，针对性更强。

CSS文本外观属性
1文本颜色

颜色属性被用来设置文字的颜色。

颜色是通过CSS最经常的指定：

十六进制值 - 如: ＃FF0000
一个RGB值 - 如: RGB(255,0,0)
颜色的名称 - 如: red
例如：
body {color:red;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}

2文本的对齐方式

文本排列属性是用来设置文本的水平对齐方式。

文本可居中或对齐到左或右,两端对齐.

当text-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）。
例如：
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}

3文本修饰

text-decoration 属性用来设置或删除文本的装饰。

从设计的角度看 text-decoration属性主要是用来删除链接的下划线：
例如：
a {text-decoration:none;}

4文本转换

文本转换属性是用来指定在一个文本中的大写和小写字母。

可用于所有字句变成大写或小写字母，或每个单词的首字母大写。
例如：
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}

5文本缩进

文本缩进属性是用来指定文本的第一行的缩进。
例如：
p {text-indent:50px;}·
在这里插入图片描述
练习：


```css
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css</title>
		<style type="text/css">
		.test1{
			color: red;
			font-size: 30px;
			font-weight: 100;
			font-style: italic;
			letter-spacing: initial;
			text-decoration: underline;
			text-align: center;
			line-height: 10px;
		}
		.test2{
			color: green;
			font-size: 20px;
			font-weight: 50;
			font-style: italic;
			letter-spacing: initial;
			text-decoration: underline;
		}
		.test3{
			color: blue;
			font-size: 20px;
			font-weight: 100;
			font-style: italic;
			letter-spacing: initial;
			text-decoration: underline;
		}
		#a1{
			white-space: normal;
		}
		</style>
	</head>
	<body>
		<img src="laopo.jpg"alt="我到传智播客设计学院学网页,平面,UI设计去喽"
			 align="left"hspace="10"title="传智播客">
		<h1 class="test1">传智播客设计学院</h1>
	<h2 class="test2">
		<p id="a1">	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font  color="skyblue">传
			智播客</font>
			是致力于高素质软件开发人才培养的新三板挂牌公司（代码：839976）。
			旗下已涵盖黑马程序员及博学谷两大子品牌。</p>
			
			</h2>
			<h2></h2>
			<h2 class="test3">
				<p id="a1">
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;现开
			设JavaEE、Android、PHP、UI、IOS、前端、C++
			产品经理等培训学科，直营分校遍布北京、上海、广州、深圳、武汉、郑州、西安
			、哈尔滨、长沙等城市。 [2]
			探索教育之路，长途漫漫。
			<font  color="skyblue">传智播客</font>希望可以通过自己的努力，
			
			让中国的家长和孩子们在现有的教育体系之外，再多一些选择的机会。</p>
		</h2>
	</body>
</html>

-渡尘-

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS入门

本节导图一。CSS样式规则在HTML中，引入CSS的方法主要有：行内式、内嵌式、导入式、链接式4种。　　1.行内式：在标记的style属性中设定CSS样式，这种方式本质上没有体现出CSS的优势，因此不推荐使用。嵌入式：对页面中的各种元素的设置集中在之间。导入式和链接式：目的都是将一个独立的CSS文件引入HTML文件中。链接式使用HTML的标记引入外部CSS文件. 二.样式表...
复制链接

扫一扫