阶一、CSS入门

核心基础

一、css样式规则

选择器{属性名:属性值;属性名:属性值;}

二、引入方式

1、行内式

需要用到HTML中每个标记都有的style属性
<p style="color:red;text-line:2px;">css基础</p>

2、内嵌式

<head>
	<style>
		.p{color:red;}
		.font{color:regy;}
	</style>
</head>

3、链入式

将所有样式放在一个或多个以.css为扩展名的外部样式表文件中,通过link标记链入

<head>
	<link rel="stylesheet" href="外部样式表文件地址" type="text/css">
</head>

4、导入式

在有外部样式表的情况下,在头部的style标记内使用@import语句导入

<head>
	<style>
		@import url(外部样式表路径)
	    或@import“外部样式表路径”  	
	    (此处还可放置其他css样式语句)
	<style>
</head>

三、css基础选择器

1、标记选择器

以HTML中的标记名作为选择器,也就是为某一标记统一css样式
标记名{属性名1:属性值1;属性名2:属性值2;}

2、类选择器

以“.”为标识,后跟类名,用class属性调用该类名,则拥有该类的css样式
.类名{属性名1:属性值1;属性名2:属性值2;}

3、id选择器

以“#”为标识,后跟类名,用class属性调用该类名,则拥有该类的css样式,只可出现一次
#类名{属性名1:属性值1;属性名2:属性值2;}

4、通配符选择器

用“”表示,范围广泛,课匹配页面中所有元素{属性名1:属性值1;属性名2:属性值2;}

<style type="text/css">
p{color:red;}
.one{font-size:2px;}
#two{font-family:"微软雅黑";}
*{font-weight:bold;}
</style>

四、css文本相关样式

CSS字体样式属性

1、font-size 设置字号

可使用相对长度单位,也可使用绝对长度单位
相对长度单位:
em 相对于当前对象内文本的字体尺寸
px 像素(最常用)
绝对长度单位:
in 英寸
cm 厘米
mm 毫米
pt 点

2、font-family 设置字体

p{font-family:"黑体";}

3、font-weight 定义字体粗细

属性值有:
normal 标准的字符(默认值)
bold 粗体
bolder 更粗
lighter 更细
100~900(100的整数倍) 由细到粗,值越大越粗(400等同于normal,700等同于bold)

4、font-variant 设置变体(字体变化)

一般用于定义小型大写字母,只对英文字符有效
normal 标准字体(默认值)
samll-caps 所有小写字母均会转换为大写

5、font-style 定义字体风格

设置斜体、倾斜、正常字体等
normal 标准字体样式(默认值)
italic 显示斜体的字体样式
oblique 显示倾斜的字体样式

6、font 对字体进行综合设置

选择器{font:font-style font-variant font-weight font-size/line-height font-family;}

css文本外观属性

发布了15 篇原创文章 · 获赞 0 · 访问量 280

猜你喜欢

转载自blog.csdn.net/weixin_46439490/article/details/105298302