请开始你的CSS学习

最新推荐文章于 2024-07-18 17:34:14 发布

吗吗哈哈

最新推荐文章于 2024-07-18 17:34:14 发布

阅读量134

点赞数

分类专栏：笔记 CSS 文章标签： css

本文链接：https://blog.csdn.net/qq_44715697/article/details/106767244

版权

CSS 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

笔记

2 篇文章 0 订阅

订阅专栏

一、CSS简介

1.主要作用

CSS的主要作用是美化、布局页面。

（1）HTML的局限性
只关注内容的语义，比如：<h1>表示一个标题，<p>表示一个段落，<img>表示一张照片，<a>表示一个链接。如果想要为网页进行样式的设定，会非常繁琐。

（2）CSS的优点
CSS是一种标记语言，主要设置html页面中的文本内容（字体，大小，对齐方式等）、图片的外形（宽高，边框样式，边距等）以及版面的布局和外观显示样式。

总结：
CSS最大价值是有HTML专注去做结构，样式交给CSS，即结构和样式相分离。

2.语法规则

CSS主要由两部分组成：选择器和声明。
在<head></head>标签内部定义<style></style>标签，在其中进行CSS内容书写。

h1 {
	color: red;               /*设置颜色*/
	font-size: 200px;         /*设置大小*/
   }

（1）选择器是用于指定CSS样式的标签，括号内是对该对象的值的具体设置。
（2）属性和属性值以键值对的形式出现。
（3）属性和属性值之间用":“分隔。
（4）不同键值对之间用”;"分离。

二、CSS基础选择器

1.CSS选择器作用

根据不同的需求把不同的标签选择出来。

2.选择器分类

选择器分为基础选择器和复合选择器两大类。

基础选择器由单个选择器组合而成。
基础选择器又包括标签选择器，类选择器，id选择器，通配符选择器。

（1）标签选择器
选择器指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。

名称 {
	属性1: 属性值1;
	属性2: 属性值2;
	属性3: 属性值3;
     }

<head>
	<style>
		p {
			color: red;
		  }
		  
		div{
			color: green;
		   }
	</style>
</head>
<body>
	<p>张三</p>
	<p>张三</p>
	<p>张三</p>
	<div>李四</div>
	<div>李四</div>
	<div>李四</div>
</body>

优点：把页面中同一标签全部选择出来，统一设置样式。
缺点：不能差异化设置样式。

（2）类选择器

想要差异化设置样式，就需要类选择器

.类名{
	属性1: 属性值1;
	属性2: 属性值2;
	...
}

<head>
	<style>
		.red {
			color: red;
		}
		.green {	
			color: green;
		}
	</style>
</head>
<body>
	<ul>
		<li class="red">张三</li>
		<li class="green">李四</li>
		<li class="red">王五</li>
	</ul>
</body>

<1> 类选择器使用“.”标识，后面接上自定义的类名。
<2> 较长的类名中间可以加入连字符-，不要用纯数字，中文定义类名，命名要有意义。

注意：

类选择器-多类名

可以给一个标签指定多个类名，从而达到更多的目的。

<1>多类名使用方式

<style>
	.red {
		color: red;
	}
	.font50 {
		font-size: 50;
	}
</style>
<div class="red font50">科比</div>
/*此处<head>与<body>标签省略*/

(1) 在class属性中写入多个类名
(2) 多个类名中必须用空格隔开

<2>使用场景

(1) 可以把一些标签元素相同的样式放到同一个类中。
(2) 标签可以调用公共的类之后，再调用自己独有的类。

（3）id选择器

id选择器可以为有特定id的HTML元素指定特定的样式，CSS中id选择器用“#”来定义。

#id名 {
	属性1：属性值1；
	...
}

<style>
	 #red {
		  color: red;
	 }
</style>

<div id="red font50">科比</div>

id选择器与类选择器使用方法一致，不同的是id选择器只能调用一次，多用于网页中唯一的元素。

（4）通配符选择器

在CSS中，通配符选择器以“*”定义，他表示选取页面中所有的标签。

<style>
	* {
		color: red;
	}
</style>

<div>kobe</div>
<span>kobe</span>

三、字体属性

CSS中font属性用于定义字体系列，大小粗细和文字样式。

1.字体系列

CSS用font-family属性定义文本的字体体系。

p {
	font-family:"微软雅黑";
}

div {
	font-family="Arial,'MicroSoft YaHei'"
}

（1）各种字体之间必须用英文逗号隔开。
（2）如果有空格的多个单词组成的字体，需要加引号。

2.字体大小

CSS用font-size属性定义字体的大小

p {
	font-size: 16px;
}

（1）px(像素)是网页中最常用的单位。
（2）不同浏览器默认字体大小的值不同，尽量自己给定一个大小。
（3）如果为<body></body>中的文本设定字体大小，标题标签中的文本需要单独设置。

3.字体粗细

CSS用font-weight属性定义字体的粗细

p {
	font-weight: normal/bold/number;
}

属性	属性值
normal	默认值，不加粗
bold	加粗
100-900	400相当于normal，700相当于bold，数值后面不加单位

实际开发中，使用数字更加普遍。

4.字体样式

CSS用font-style属性定义字体的样式。

p {
	font-style: normal/italic;
}

属性值	作用
normal	默认值，显示正常的字体样式
italic	显示斜体的字体样式

在开发中，使用斜体字体的机会很少，但是将斜体标签（em，i）改为正常字体比较普遍。

5.字体复合属性

字体属性可以结合起来一起使用，这样更节约代码。

p {
	font: font-style font-weight font-size font-family;
}

（1）使用font属性时，必须按照上面的顺序书写，不能随意调换顺序，各属性之间用空格隔开。
（2）可以将不需要的属性省略，但是font-size和font-family一定不能省略。

四、文本属性

CSS中text属性可以定义文本的外观，比如对齐文本，装饰文本，文本缩进，行间距等。

1.文本颜色

color属性用于定义文本的颜色。

div {
	color: red;
}

属性表示	属性值
预定义的颜色	red，green，blue
十六进制	#FF0000，#FF6600
RGB代码	rgb(255,0,0)或rgb(100%,0%,0%)

2.文本颜色

text-align属性用于设置元素内的文字的水平对齐方式。

div {
	text-align: center;
}

属性值	描述
left	左对齐
center	居中
right	右对齐

3.装饰文本

text-decoration属性规定添加到文本的修饰，可以给文本添加下划线，删除线，上划线。

div {
	text-decoration: underline/line-through/overline
}

属性值	描述
none	默认值，没有装饰线
underline	下划线
line-through	删除线
overline	上划线

如果想要删除装饰线，可以将属性值设为none。

4.文本缩进

text-indent用于指定文本第一行的缩进，通常是将段落的首行缩进。

div {
	text-indent: 20px;
	/*所有元素的第一行都会有一个缩进，甚至缩进时负数也可以*/
}

div {
	text-indent: 2em;
}

em是一个相对单位，就是相对于当前元素（font-size）一个元素的大小。如果当前元素没有设置大小，则会按照父元素的1个文字大小。

5.行间距

line-height属性用于设置文字行之间的距离。

p {
	line-height: 25px;
}

在这里插入图片描述

五、CSS引入方式

1.CSS的三种样式表

按照CSS的书写位置，可以分为三种样式表。
（1）行内样式表
（2）内部样式表
（3）外部样式表

2.内部样式表

内部样式表是写到HTML页面内部，将所有CSS代码提取出来，单独放到一个<style>标签中。

<style>
	div {	
		color: red;
		font-size: 25px;
	}
</style>

（1）<style>标签理论上是可以放在HTML文档的任何地方，但是我们习惯放在<head>标签内部。
（2）通过这种设置，方便控制当前整个页面的样式。
（3）没有实现结构和样式完全分离。

3.行内样式表

行内样式表是在元素标签内部的style属性中设定CSS样式，适合于修改简单样式。

<div style="color: red; font-size: 25px">

注意：这种方式书写繁琐，没有将样式与结构相分离，只有对当前元素添加简单样式的时候使用。

4.外部样式表

在实际开发中多用外部样式表，核心是样式单独写到CSS文件中，之后把CSS文件引入到HTML页面中，可以控制多个页面。

引入外部样式表的两步：
（1）新建一个后缀名为.css的样式文件，在此文件中写入CSS代码。
（2）在HTML页面中，使用<link>这个标签引入文件。

<head>
	<link rel="stylesheet" href="css文件路径">
</head>

吗吗哈哈

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
请开始你的CSS学习

一、CSS简介1.主要作用CSS的主要作用是美化、布局页面。（1）HTML的局限性只关注内容的语义，比如：<h1>表示一个标题，<p>表示一个段落，<img>表示一张照片，<a>表示一个链接。如果想要为网页进行样式的设定，会非常繁琐。（2）CSS的优点CSS是一种标记语言，主要设置html页面中的文本内容（字体，大小，对齐方式等）、图片的外形（宽高，边框样式，边距等）以及版面的布局和外观显示样式。总结：CSS最大价值是有HTML专注去做结构，样
复制链接

扫一扫