CSS学习第一周

最新推荐文章于 2024-05-18 21:13:57 发布

Zhangzanhao

最新推荐文章于 2024-05-18 21:13:57 发布

阅读量116

点赞数

文章标签： css css3 前端

本文链接：https://blog.csdn.net/Zhangzanhao/article/details/122656032

版权

CSS修改字体

我们可以用CSS来修改自己网页上字体的样式，包括多大多小，什么样式，粗细倾斜等

字体样式

字体样式的调节可以用font-family

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS字体</title>
		<style>
        /*font-family 字体样式
			字体名除非是一个单词，不然就要加“”,英文可用中文代替
			雅黑没有就用tahoma
			字体名也可用Unicode编码写 "\5B8B\4F53"*/
		h2 {
			font-size: 50em;
			font-family:"microsoft yahei"，tahoma ;
			
		}
        </style>
    </head>
    <body>
    <h2>下载</h2>
    </body>

其中要是字体名称是几个单词的，就要加双引号，不然不加。

字体可接几种字体，意思是要是用户电脑没有前者字体，就用后者字体表示。

要是更牛一点的，字体名也可用Unicode编码来表示

字体粗细

字体粗细可以用font-weight表示

有几个量：normal 正常粗细 bold 加粗 bolder 加更粗

当然哈，也可用数值来表示粗细程度区间为100~900

<!DOCTYPE html>
<html>
    <head>
    <meat "utf-8">
    <title>CSS字体</title>
    <style>
    b {
        font-weight:900;
    }
    </style>
    </head>

    <body>
    <b>我要最粗</b>
    </body>

</html>

字体倾斜

字体倾斜可以用font-style表示

有俩个值：倾斜（italic）正常（normal）正常的意思就代表着不倾斜

所以我们就可以有：在<body>中用标签<i>或<em>让文字倾斜，然后在<style>中写normal

这样子本来倾斜的字被你一改，就不倾斜了

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS字体</title>
		<style>
            em {
				font-style: normal;
				color:blue
			}
        </style>
    </head>
    <body>
    <em>我是倾斜还是不倾斜</em>
    </body>
</html>

但会有人说了，要是我四个要素全都要调岂不是很麻烦？

但别人早就想到了这点，所以会有个综合模式

综合模式

这个时候可以用 font { ，，，，}

里面可以填四个空分别是样式粗细大小倾斜

其中大小倾斜要必填，剩下的俩个按系统默认的

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS字体</title>
		<style>
        font {
				font: ltalic,bold,50px,"微软雅黑";
			}
		</style>
    </head>
    <body>
    <font>综合模式</font>
    </body>
</html>

CSS选择器

CSS选择器目前我学到的有四个：标签选择器类选择器 id选择器伪类选择器

选择器就是在{} 前面要指定的对象对象选对了才能正确的改成你想要的样式

标签选择器

这个很简单理解，就是在{}前写上对象的标签就可以了，前面讲字体的时候都是使用这种方式指定

但有一点不好，就是凡是是这个标签的都会被选中

类选择器

格式为 .类名 {}

但是要在想选定的对象标签里用class把类名打出

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS选择器</title>
        <style>
        .orange {
			color: orange;
		}
        </style>
    </head>
    <body>
    <p class="orange">别浪呀兄弟</p>
    </body>
</html>

其中类名不得用纯数字表示，也尽量不要用汉字

id选择器

id选择器跟类选择器差不多，要有id名，用id=（id名）命名

格式为 #（id名）{}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS选择器</title>
        <style>
        #red {
			color: aquamarine;
		}
        </style>
    </head>
    <body>
    <h2 id=red>id名</h2>
    </body>
</html>

伪类选择器

伪类选择器又分三种：超链接伪类选择器结构伪类选择器目标伪类选择器

这三种都是针对不同的对象进行样化，分别对着超链接的样式改变，结构类的样式改变，目标类的

超链接伪类选择器

大家都知道超链接是几个文字下有一个下划线，但是有时会觉得不好看想修改

这个时候就要用到这个选择器了

格式为 a.(link,visited,hover,active) {}

link 表示未选超链接时的样式

visited 表示点击过一遍超链接之后的样式

hover 表示鼠标选中了超链接后的样式

active 表示鼠标在点击了超链接不松手时的样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS选择器</title>
       <style>
        a {
			color: #FFA500;
			font-size: 16px;
			font-weight: 800;
		}
		a:hover {
			color: red;
		}
        </style> 
    </head>
    <body>
    <div> <a href="#">秒杀</a> </div>
    </body>
</html>

结构伪类选择器

结构伪类选择器是对列表等父级下面有多个子级难以选中某一子级的问题
框架：标签:(frist-child,last-child,nth-child（）)
           frist-child 表示所选标签的父级的第一个子级
           last-child 表示所选标签的父级的最后一个子级
           nth-child（）表示可以指定是哪一个子级，括号里可填4，7，3n,even（偶）,odd（奇）

nth-last-child（）就是以最后一个作为第一个来算

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS选择器</title>
        <style>
        li:first-child {
			color: #0000FF;
		}
		li:nth-child(2n) {
			color: beige;
		}
		li:nth-child(odd) {
			color: #7FFFD4;
		}
        </style>
    </head>
    <body>
        <ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
		</ul>
    </body>
</html>

目标伪类选择器

目标伪类选择器就是可用于选取当前活动的目标元素

框架: .target {}

怎么理解呢？可以这么说

你点进我这篇文章后再点目录里的某一节，那么你就会跳转到那节去，对应的那节标题就是当前你选定的目标

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS选择器</title>
        <style>
        .target {
			color: #7FFFD4;
		}
        </style>
    </head>
    <body>
    <a href="#you">跳转到下面</a>
    <h2 id=you>跳转到这里</h2>
    </body>

好了这次就先讲到这里

Zhangzanhao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS学习第一周

目录CSS修改字体字体大小字体样式字体粗细字体倾斜综合模式CSS选择器标签选择器类选择器id选择器伪类选择器超链接伪类选择器结构伪类选择器目标伪类选择器CSS修改字体我们可以用CSS来修改自己网页上字体的样式，包括多大多小，什么样式，粗细倾斜等字体大小字体大小的可以用font-size来调节<!DOCTYPE html><html> <head> <meta charset=...
复制链接

扫一扫