CSS核心基础

最新推荐文章于 2024-05-27 00:00:00 发布

Liu Yang.

最新推荐文章于 2024-05-27 00:00:00 发布

阅读量260

点赞数 3

本文链接：https://blog.youkuaiyun.com/dubaiqaq/article/details/103500507

版权

CSS核心基础

CSS样式规则

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

2. 嵌入式：对页面中的各种元素的设置集中在<head></head>之间。

3. 导入式和链接式：目的都是将一个独立的CSS文件引入HTML文件中。链接式使用HTML的标记引入外部CSS文件，如

<link href="mystyle.css" rel="stylesheet" type="text/css" />.

导入式需使用： <style type="text/css"> @import"mystyle.css";</style>

基本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;}·
在这里插入图片描述

以下是本节构图：

作业：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>欢迎进入猫的世界</title>
		<style type="text/css">
		.test1{
			color: skyblue;
			font-size: 40px;
			font-weight: 100;
			font-style: italic;
			letter-spacing: initial;
			text-decoration: underline;
			text-align: left;
			line-height: 10px;
		}
		.test2{
			color: red;
			font-size: 30px;
			font-weight: 100;
			font-style: italic;
			letter-spacing: initial;
			text-decoration: underline;
			text-align: left;
		}
		.test3{
			color: orange;
			font-size: 30px;
			font-weight: 100;
			font-style: italic;
			letter-spacing: initial;
			text-decoration: underline;
			text-align: left;
			}
			.test4{
				color: blue;
				font-size: 30px;
				font-weight: 100;
				font-style: italic;
				letter-spacing: initial;
				text-decoration: underline;
				text-align: left;
		}
		.test5{
			color: greenyellow;
			font-size: 30px;
			font-weight: 100;
			font-style: italic;
			letter-spacing: initial;
			text-decoration: underline;
			text-align: left;
			}
	
		</style>
	</head>
	<body>
		
		<img src="呆猫.png"alt="正在加载一只小可爱"
			 align="left"title="这是一只呆猫"height="500">

	<h1 class="test1">家猫</h1>
	<h2 class="test2">插须豁口直鼻弓,<br>
	环眼竖眉一线瞳。</h2>
	<h2 class="test3">豹爪虎斑狮子面,<br>
	转耳辩听八方声。</h2>
	<h2 class="test4"><font  color="pink">小猫小猫</font>真可爱<br>
	鸿林改诗人人爱</h2>
	<h2 class="test5">无忧无虑生活好,<br>
	鸿林喜欢不奇怪.</h2>
	
	</body>
</html>

运行结果：
在这里插入图片描述