web_0207_1-CSDN博客

本文链接：https://blog.csdn.net/monuo5659/article/details/104206071

1、CSS三种方式

行内样式属性

<div style="color:red;font-size: 18px;">秋风扫落叶</div>

内部仰视表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			h1
			{
				color:dimgray;
				
			}
			p.p1
			{
				color:red;
				font-size: 19px;
			}
			#p2
			{
				color:green;
				font-size: 25px;
			}
		</style>
	</head>
	<body>
		<h1>I am Gray!</h1>
		<p class="p1">I am red;</p>
		<p id="p2">I AM GREEN</p>
	</body>
</html>

外部样式表（外链式）

两大特征：

1、将CSS和HTML相分离。

2、可以共享CSS样式。

建立外部CSS和HTML之后通过Link链接

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

2、选择器

选择器的作用：找到特定的html中的元素。

2.1 标签选择器

概念：也称为元素选择器，是指利用html中的元素名称作为选择器。

h1,p
{
    color:red;
    text-align:center;
}

2.2 类选择器(用得最多的)

.red
{
    color:red;
    text-align:center;
}

<h1 class="red">this is a heading1</h1>

类选择器的特殊用法

<style>
			.red
			{
				color:red;
			}
			.font100
			{
				font-size: 100px;
			}
		</style>

<p class="red font100">I am a red </p>

一个元素可以使用多个CSS，不过类中要有空格！

2.3 ID选择器

概念：id选择器相当于身份证号码，一个元素用了之后其它的元素再用就不得行了！

ID选择器和类选择器的区别：类选择器就是公交车，谁都可以上。ID选择器就是chunv并不是谁都可以上的，上了一次就没了。hhh

2.4 通配符选择器

通配符选择器就是选择所有标签

优缺点：会匹配页面所有元素，但是会降低页面的响应速度，不建议随便使用。

*
{
    margin:0;
    padding:0;
}

总结：尽量少用*通配符选择器，尽量少用ID选择器；不使用无定义的div、span标签选择器

3、字体font

3.1 字号 font-size

可以用绝对长度单位，也可以用相对长度单位，推荐使用像素px;

相对长度单位	说明
em	相对于当前文本字体的字体尺寸（看不懂啊谁解释一下）
px	像素，最常用，推荐使用
绝对长度单位	说明
in	英寸
cm	厘米
mm	毫米
pt	点

注意：不同浏览器的页面文字大小不同，通常在开始之前，大多数浏览器默认字体大小为16px;

可以在开始之前写个

body
{
    font-size:16px;
}

3.2 font-family字体

p
{
	font-family: arial,"microsoft yahei","微软雅黑","宋体";
}

1、可以写多个字体，目的是，通过多个字体然后，如果第一个字体在电脑中未找到或者浏览器不支持，那就用第二个字体，第二个未找到，找第三个，所有的没找到就用默认的字体。

2、中文字体需要加引号，通常英文字体不需要加引号，但是如果字体中存在空格，￥，$等特殊字符则需要加引号。

3、尽量使用系统字体，这样能保证正常显示，比如什么毛泽西字体，类似这种的尽量避免使用，防止非正常显示。

3.2.2 Unicode字体

目的：采用unicode字体的目的是一些较为老的系统不支持中文，则可以选用unicode字体；

例如

字体名称	英文名称	unicode编码
宋体	SimSun	\5B8B\4F53
华文宋体	STSong	\534E\6587\5B8B\4F53
微软雅黑	Microsoft YaHei	\5FAE\8F6F\96C5\9ED1
隶书	LiSu	\96B6\4E66
楷体	KaiTi	\6977\4F53

3.3 font-weight字体粗细

字体加粗的方式

可以使用标签，例如<strong></strong>或者<b></b>的方式
可以使用font-weight;

属性值	描述
normal	默认值不加粗
bold	定义粗体
100-900	400为normal，700等于bold，必须是整数

3.4 font-style字体风格

属性	作用
normal	正常显示
italic	斜体
oblique	倾斜，在浏览器中italic和oblique几乎一致

平时我们很少让字体变得倾斜，往往是把倾斜字体变成正常。

例如：

em
	{
		font-style: normal;
	}

	<p><em>这是一个倾斜字体变成了正常字体</em></p>

3.5字体的综合写法（重点）

p
{
	/*font:font-style font-weight font-size/line-height font-family; */
	font:italic 600 19px "microsoft yahei";
	color:#BEBEBE;		
}

字体综合写法必须严格按照上面的顺序，不得更换顺序，各个属性按照空格隔开。

小结

属性	表示	注重点
color	颜色	三种方式rgb（）,十六进制，#fff
line-height	行高	控制行与行之间的距离
text-align	设置文字的对其方式	left，right，center三种。
text-indent	首行缩进	通常用2字符缩进，即text-indent:2em；
text-decoration	文本修饰	添加下划线，删除下划线，