css字体相关

字体样式

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>font</title><style>h1{/*字体类型*/font-family: 华文彩云;}.s1{/* 字体大小 */font-size: 30px;/*字体样式*/font-style: oblique;/*宽度  100~900*/font-weight: bold;}.s2{/*字体属性的顺序：字体风格→字体粗细→字体大小→字体类型*/font: italic bold 30px "楷体";}</style></head><body><h1>黄晓明突然登上热搜，被曝与离异女网红恋爱，杨颖粉丝跪求放过！</h1><p>随着<span class="s1">《乘风破浪的姐姐》</span>第三季热播，各路姐姐持续霸屏热搜，节目粉直呼看不够，但也有网友觉得审美疲劳，想吃吃其他明星的“瓜”。眼看着内娱很久无“<span class="s2">瓜</span>”可吃了，有着“老好人”之称的黄晓明突然登上热搜，瞬间引起了围观。</p></body>
</html>

文本样式

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>font</title><style>h1{/*字体类型*/font-family: 华文彩云;}.s1{color: #F90;}.s2{text-decoration: line-through;}p{text-align: center;}a{/*去除a标签的下划线*/text-decoration: none;}</style></head><body><h1>黄晓明突然登上热搜，被曝与离异女网红恋爱，杨颖粉丝跪求放过！</h1><p>随着<span class="s1"><a href="#">《乘风破浪的姐姐》</a></span>第三季热播，各路姐姐持续霸屏热搜，节目粉直呼看不够，但也有网友觉得审美疲劳，想吃吃其他明星的“瓜”。眼看着内娱很久无“<span class="s2">瓜</span>”可吃了，有着“老好人”之称的黄晓明突然登上热搜，瞬间引起了围观。</p></body>
</html>

超链接伪类

标签名:伪类名{声明;}

伪类名称	含义	示例
a:link	未单击访问时超链接样式	a:link{color:#9ef5f9;}
a:visited	单击访问后超链接样式	a:visited {color:#333;}
a:hover	鼠标悬浮其上的超链接样式	a:hover{color:#ff7300;
a:active	鼠标单击未释放的超链接样式	a:active {color:#999;}

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>超链接伪类</title><style>/*未单击访问时超链接样式*/a:link{color: blue;}/*单击访问后超链接样式*/a:visited{color: gray;}/*鼠标悬浮其上的超链接样式*/a:hover{color: red;}/*鼠标单击未释放的超链接样式*/a:active{color: chartreuse;}</style></head><body><h1><a href="https://www.baidu.com">字体样式</a></h1></body>
</html>

设置鼠标形状

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>超链接伪类</title><style>h2{cursor: wait;}</style></head><body><h1><a href="https://www.baidu.com">字体样式</a></h1><h2>你好</h2></body>
</html>

div标签

DIV元素是用来为HTML文档内大块（block-level）的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这一块区域，其中所包含元素的特性由DIV标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。
DIV标签称为区隔标记。
作用：设定字、画、表格等的摆放位置。用来布局网页中的所有元素

用法<div> 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 <div> 固有的唯一格式表现。可以通过 <div> 的 class 或 id 应用额外的样式。不必为每一个 <div> 都加上类或 id，虽然这样做也有一定的好处。可以对同一个 <div> 元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>div</title><style>.top{background: lightblue;height: 200px;/* width: 600px; *//*如果不设置高度，宽度默认高度:就是内容的高度默认宽度：占用一整行*/}.center{background-color: chartreuse;height: 800px;}.bootom{background-color: aquamarine;height: 200px;}</style></head><body><div class="top">这是顶部</div><div class="center">中部</div><div class="bootom">底部</div></body>
</html>

背景样式

背景颜色

background-color

.center{background-color: chartreuse;}

背景图像

background-image

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>背景</title><style>body{background-image: url(img/Snipaste_2022-05-24_16-09-17.png);}</style></head><body></body>
</html>

背景重复方式

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>背景</title><style>body{background-image: url(img/game01.jpg);background-repeat: repeat-y;}</style></head><body></body>
</html>

背景

背景定位

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>背景</title><style>body{background-image: url(img/game01.jpg);background-repeat: no-repeat;background-position:40% 200px;}</style></head><body></body>
</html>

列表样式

属性	描述
[list-style]	简写属性。用于把所有用于列表的属性设置于一个声明中。
[list-style-image]	将图象设置为列表项标志。
[list-style-position]	设置列表中列表项标志的位置。
[list-style-type]	设置列表项标志的类型。
marker-offset

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>列表</title><style>ul{/* list-style-image:url(img/pic1.png) ; *//* list-style-position: inside; *//* list-style-type: georgian; *//*去除样式*/list-style: none;}</style></head><body><ul><li>网页</li><li>图片</li><li>资讯</li><li>贴吧</li><li>导航</li></ul></body>
</html>

线性渐变

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>渐变</title><style>.a{height: 200px;background-image: linear-gradient(to top,red,yellow,blue);}.b{height: 300px;background-image: radial-gradient(red, yellow, green,red);}</style></head><body><div class="a"></div><div class="b"></div></body>
</html>

第五章 css字体相关样式相关推荐

css字体相关样式的处理
连字符断行实现文本两端对齐的方式,可以使用hyphens,它接收三个值none.manual 和auto.manual是它的初始值,将hyphens设置成auto可以实现.为了确保它奏效,需要在HT ...
html中文字处理美化的效果,css字体相关样式的处理
连字符断行实现文本两端对齐的方式,可以使用hyphens,它接收三个值none.manual 和auto.manual是它的初始值,将hyphens设置成auto可以实现.为了确保它奏效,需要在HT ...
字体相关样式/ fontawesome库/阿里iconfont库的使用方法
1.字体相关样式: 1.1 color 用来设置字体颜色 1.2 font-size 字体的大小, 和font-size相关的单位 em 相当于当前元素的一个font-size rem 相对于根元素的 ...
第十五章 - 垃圾回收相关算法
第十五章 - 垃圾回收相关算法文章目录第十五章 - 垃圾回收相关算法 1.标记阶段:引用计数算法 1.1 垃圾标记阶段:对象存活判断 1.2 引用计数算法 1.3 小结 2.标记阶段:可达性分析算 ...
CSS 字体文本样式
文章目录 CSS字体文本样式字体样式 color 字体颜色 font-size 字体大小 font-family 字体类型 font-weight 字体粗细 font-style 字体风格综合简写 ...
运用CSS选择器、CSS文本相关样式及高级特性实现如图所示的宣传页面
运用CSS选择器.CSS文本相关样式及高级特性实现如图所示的宣传页面首先新建文件夹,给它命名为宣传页面提前下载好图片,并放至文件夹内然后开始建立网页结构使用<div>盒子模型,&l ...
font字体相关样式
1.字体颜色 color 2.字体大小 fofnt-size 相关单位 em rem 1em等于1个font-size(当前元素的font-size) 1rem等于1个根元素的font-size( ...
前端基础入门之css字体相关
文章目录字体 1. 字体相关的样式 2. font-family 3. 几种字体手写体艺术体乱码字体中文字体 4. @font-face 5. 图标字体(iconfont) 图标字体简介 f ...
css 字体颜色样式大全
CSS 颜色大全 css 字体颜色,将颜色代码代替css里面的颜色,就可以. div中控制某段字体颜色 html代码 divid=sidebar spanCSS 颜色大全 css 字体颜色/span ...

第五章 css字体相关样式