css选择器、字体/文本属性、引入方式

css基础(1)


css常写在 <head></head>之中

选择器(如h1){

样式

}

给谁改样式{

改什么样式

}

例:p{

​ color: red;

​ font-size:12px;/修改文字为十二像素/

​ }

css选择器

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

标签选择器

基础选择器

基础选择器是由单个选择器构成的

标签选择器

标签名作为选择器

把某一类标签全部改掉

<style>
	p{
		color:green;
	}
</style>
类选择器

单独选一个或几个标签

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

结构需要用class属性来调用

<style>
	.red{
		width: 100px;
		height: 100px;
		color: red;
	}
</style>
<body>
	<ul>
		<li class="red">变红</li>
		<li class="red">变白</li>
	</ul>
	<div class="red">变黑</div>
</body>

谁想使用就加上class=‘类名’

类名是自定义的,但不能是标签名;

长的类名可以中间加上短横线来分割;

不要使用纯数字,中文等命名。

多类名
<style>
	.red{
		color: red;
	}
	.font35{
		font-size: 35px;
	}
</style>
<body>
	<div class="red font35">变黑</div>
</body>

在标签class属性中写多个类名;

多个类名中间必须有空格;

这个标签就可以分别具有只些类名的样式

id选择器

井号+id名

<style>
	#red{
		color: red;
	}
</style>
<body>
	<div id="red">变红</div>
</body>

id选择器只能在html文件中出现一次

通配符选择器

使用“*”定义,它表示选取页面中所有元素(标签)。

*{

属性:属性值;

}

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

所有标签的颜色都会变成红色

通配符选择器不需要调用,自动就给出所有元素的使用样式。

在这里插入图片描述

CSS字体属性
font-family属性
p(标签){ 
	font-family:'Microsoft YaHei',Arial;
}

两个词拼写而成的用引号(单引号双引号都可以)包含,单个词不用

并列好几个字体,会有优先级,如果都没找到相应字体,会使用默认字体。

font-size属性
<style>
	body(任意标签){
		font-size: 35px;
	}
</style>

注:标题标签比较特殊,需单独定义

font-weight属性
<style>
	.bold{
		font-weight: 700;(细的加粗)
	}
	h2{
		font-weight: 400;(粗的变细)
	}
</style>
<body>
	<h2>属性</h2>
	<p class="bold">变红</p>
</body>

在这里插入图片描述

实际开发中,更喜欢使用数字改变粗细。

font-style属性

在这里插入图片描述

p{
	font-style: normal;
}
font复合属性写法
div{
	/*font: font-style font-weight font-size/line-height font-family;*/
	font: italic 700 16px/20px "Microsofe yahei";
}

必须按照font: font-style font-weight font-size/line-height font-family;的顺序写,不可以颠倒顺序。

不需要设置的属性可以省略(取默认值),但是必须保留font-size和font-family属性,否则font属性将不起作用。

在这里插入图片描述

CSS文本属性
文本颜色color

color: 颜色值(red)

或六位十六进制数(#ff0000)(常用)

或RGB代码(rgb(255,0,0)或rgb(100%,0%,0%))

对齐文本text-align
div{
	text-align: center/left(默认)/right;
}
装饰文本text-decoration
div{
	text-decoration: underline;
}

在这里插入图片描述

去掉链接默认的下划线:

a{
	text-decoration:none;
}

<a href="  ">去掉下划线</a>
文本缩进text-indent

用来指定文本第一行缩进多少距离。

p{
	text-indent: 20px;
	text-indent: 2em;
	//缩进当前文字2个大小的距离
}

像素值为负就会往左边缩进。

em为相对单位,就是当前元素(font-size)1个文字的大小,如果当前元素没有设置大小,则会按照父元素的1个文字大小。

行间距line-height

用于设置行间的距离,可以控制文字行一行之间的距离。

p{
	line-height: 16px;
}

在这里插入图片描述

注:FSC屏幕标尺可以测量行间距

CSS引入方式
内部样式表

把html文件中所有CSS代码放在<style>中,<style>理论上可以放在任何位置,一般放在<head>中。

行内样式表

在元素标签内部style属性中设定CSS样式,适合修改简单样式。

<div style="color:red; font-size: 12px;">行内样式表</div>
外部样式表

样式单独写到CSSS文件中,然后把CSS文件引入到HTML页面中使用。

使用步骤:

新建一个后缀名为.css的样式文件,把所有CSS代码都放在此文件中。

(CSS文件里只有样式,没有标签)

在HTML页面中,使用<link>标签引入这个文件。

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

行内样式表

在元素标签内部style属性中设定CSS样式,适合修改简单样式。

<div style="color:red; font-size: 12px;">行内样式表</div>
外部样式表

样式单独写到CSSS文件中,然后把CSS文件引入到HTML页面中使用。

使用步骤:

新建一个后缀名为.css的样式文件,把所有CSS代码都放在此文件中。

(CSS文件里只有样式,没有标签)

在HTML页面中,使用<link>标签引入这个文件。

<link rel="stylesheet" href="css文件路径">
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值