CSS——常见属性和外部样式表(外链式)

常见属性:

<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">
		.p{
			color:red;
			font-size: 30px;
			text-decoration: underline;
			font-weight:bold;
			text-align: center;
		}
		.h1{
			color:skyblue;
			font-size:50px;
			font-weight:bold;
			background-color:pink;
		}
	</style>
</head>
<body>
	<h1>这是一个标题</h1>
	<p>这是一个段落</p>
</body>

css可以写在head里面,也可以写在单独的文件里面。
语法:< style type=“text/css”>< /style>
type表示“类型”,text就是“纯文本”。
sublime中输入< st+tab键 可以自动生成style type。

CSS对换行不敏感,对空格也不敏感,但是语法一定要标准,冒号分号都不能省略。
语法:

	.选择器1{
			标签: 样式;
			标签: 样式;
			标签: 样式;	
	}
	.选择器2{
			标签: 样式;
			标签: 样式;
			标签: 样式;
	}	

字体颜色:
color: red;
color属性的值可以是英语,如常见的red, yellow, blue, 也可以是lightyellow, skyblue等单词,也可以是rgb和十六进制。
sublime中快捷键是c+tab

背景颜色:
background-color: blue;
sublime中快捷键是bgc+tab

text-align设置文本内容的水平对齐。left:左对齐(默认值);right:右对齐;center:居中对齐。

text-indent首行缩进,其属性值可为不同单位的数值、em字符宽度的倍数或相对于浏览器窗口宽度的百分比%,允许使用负值,建议使用em作为设置单位,1em就是一个字的宽度。

text-decoration文本装饰。下划线:text-decoration: underline;无下划线: text-decoration: none;

font属性
使用font属性,能够一起设置字号、行高、字体:
font: 14px/24px “宋体”;size是尺寸,px是像素;等价于三行语句:

font-size: 14px;
line-height: 24px;
font-family:"宋体";

font-family就是“字体",但不是所有字体都能用,因为这个字体要看用户的电脑里装没装。

比如设置font-family:“华文彩云”;如果用户电脑里没有这个字体,那么就会变成宋体。

页面中,中文只使用:微软雅黑、宋体、黑体。如果页面中需要其他字体,那么需要切图。英语:Arial、Times New Roman

为了防止用户电脑里面没有微软雅黑这个字体,那么就要用英语的逗号隔开备选字体,即如果用户电脑里面没有安装微软雅黑字体,那么就是宋体:font-family:“微软雅黑”, “宋体”; 备选字体有无数个,用逗号隔开。

我们要将英语字体放在最前面,这样所有的中文就不能匹配英语字体,就自动变为后面的中文字体:font-family: “Times New Roman”,“微软雅黑”,“宋体”。

所有的中文字体,都有英语别名:微软雅黑的英语别名:font-family: “Microsoft YaHei”; 宋体的英语别名:font-family: “SimSun”;

font属性能够将font-size、line-height、font-family合三为一:font: 12px/30px “Times New Roman”,“Microsoft YaHei”,“SimSun”;

行高可以用百分比,表示字号的百分之多少。一般来说都是大于100%,因为行高一定要大于字号。

font: 12px/200%“宋体”;等价于font: 12px/24px"宋体"; 反过来,比如: font: 16px/48px"宋体";等价于font: 16px/300%“宋体”;

尽量使用偶数字号,各字体之间必须使用英文状态下的逗号隔开,中文字体需要加英文状态下的引号,英文字体一般不需要加引号。

当需要设置英文字体时,英文字体名必须位于中文字体名之前。如果字体名中包含空格、#、¥等符号,则该字体必须加英文状态下的单引号或双引号,如font-family: “Times New Roman”;。

fount-weight: 字体粗细
可用属性值:normal/bold/bolder/lighter/100~900(100的整数倍)
数字400等价于normal,而700等价于bold

font-style: 字体风格
如设置斜体、倾斜或正常字体,可用属性值如下:
normal:默认值,显示标准字体样式;italic:显示斜体的字体样式;oblique:显示倾斜的字体样式。

外部样式表(外链式)
嵌入式是将所有样式放在一个或多个以.CSS为扩展名的外部样式表文件中,通过link标签将外部样式表文件链接到HTML文档中,其基本语法格式:

<head>
	<link href="CSS文件路径" type=“text/CSS” rel="stylesheet" />
</head>

该语法中,link标签需要放在head头部标签中,且必须指定link标签的三个属性:
href:定义所链接外部样式表文件的URL,可以是相对路径,也可以是绝对路径。
type:定义所链接文档的类型,这里需要指定为"text/CSS",表示链接的外部文件为CSS样式表。
rel:定义当前文档与被链接文档之间的关系,这里需要指定为"stylesheet",表示被链接的文档是一个样式表文件。

  • 4
    点赞
  • 24
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值