前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >CSS样式更改——字体设置Font&边框Border

CSS样式更改——字体设置Font&边框Border

作者头像
前端皮皮
发布于 2020-11-25 06:32:28
发布于 2020-11-25 06:32:28
3.4K02
代码可运行
举报
运行总次数:2
代码可运行

前言

上篇文章主要讲述了CSS样式更改中的背景Background,这篇文章我们来谈谈字体设置Font&边框Border的基础用法。。

1.字体设置Font
1).字体系列
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<div style='font-family: sans-serif normal'></div>
可用字体:
Serif
Sans-serif
Monospace
Cursive
Fantasy
Times
Courier
2).字体风格
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<div style='font-style:normal'></div>
文本倾斜:
normal   文本正常显示
italic   文本斜体显示
oblique  文本倾斜显示
3).字体变形
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<div style='font-variant:small-caps'></div>
normal       显示标准字体。
small-caps      显示小型大写字母的字体。
4).字体加粗
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<div style='font-weight:normal'></div>
normal    标准的字符
bold      粗体字符
bolder    更粗的字符
lighter   更细的字符
也可以使用数字表示,范围为100~900
5).字体大小
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<div style='font-size:60px'></div>
smaller 变小
larger  变大
length  固定值
而且还支持百分比
2.边框Border

首先说一下边框风格,它的风格比较多,常用的一般是实线为主:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<div style='border-style:none'></div>
hidden     隐藏边框
dotted     点状边框
dashed     虚线边框
solid      实线边框
double     双线边框
groove     3D凹槽边框
ridge      3D垄状边框
inset      3D inset边框
outset     3D outset边框
边框也有四面,所以也会有上下左右
所以有时候为了更精确定位并修改样式可以使用:
border-top-style     上边框样式
border-right-style   右边框样式
border-bottom-style  下边框样式
border-left-style    左边框样式

先定义边框的宽度 风格和颜色,然后定义边框的其它属性。

1).边框形状
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<div style='border-radius:25px;'></div>
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
2).边框阴影
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<div style='box-shadow:1px 2px 2px 2px red'></div>
参数含义:
边框各个方向的大小和颜色
3).边框图片
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<div style='border-image:url(1.png) 30 30 10 round'></div>
参数含义:
边框图片的路径
图片边框向内偏移
图片边框的宽度
边框图像区域超出边框的量
图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)

参考文档:W3C官方文档(CSS篇)

二、总结

这篇文章主要介绍了CSS样式更改篇中的字体设置Font&边框Border设置,希望让大家对CSS样式更改有个简单的认识和了解。

看完本文有收获?请转发分享给更多的人

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2020-10-19,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 IT共享之家 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
css样式大全
字体属性:(font) 大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX、PD 样式 {font-style: oblique;}(偏斜体) italic;(斜体) normal;(正常) 行高 {line-height: normal;}(正常) 单位:PX、PD、EM 粗细 {font-weight: bold;}(粗体) lighter;(细体) normal;(正常) 变体 {font-variant: small-c
程序员互动联盟
2018/03/16
4.3K0
一篇文章带你了解CSS基础知识和基本用法
相信做过网页的对Css都不是很陌生,它可以帮助我们重铸网页中很多绚丽的特效,尤其是现在Css已经发展3.0版本,很多功能更是丰富多彩,让我们的开发时间不仅大大缩短,而且还可以轻松做出许多华丽的特效,需要注意的是,Css相当于Html的一个美化装置,所以它必须依赖于Html才能发挥作用,那么今天我们就来深入了解下它吧。
前端皮皮
2020/11/26
11.2K0
一篇文章带你了解CSS基础知识和基本用法
Css代码
1 1,225 views A+ 所属分类:技术 〓注意事项〓说明仅供参考,因浏览器显示差异或属性覆盖等问题可能看不到效果,具体使用请自行摸索,欢迎各位提供纠正完善,更多属性代码参考请到W3school,谢谢。 以下是通用代码(即红色部分),你可以利用它修改你想修改的区域(即下面蓝色的部分)的属性,即:区域{通用代码} *如body{font:italic bold 105% small-caps"Times New Roman",Georgia,Serif;} 记得删除类似①②③的标识。 〓字
用户1127987
2018/06/04
2K0
CSS笔记
link rel=”stylesheet” href=”文件名” margin:0px auto;(块级元素居中)和width:的组合 写2个数:第一个代表上下,第二个代表左右 写3个数:第一个代表上,第二个代表左右,第三个下 写4个数:上,右,下,左 text-align:center;(行级元素居中) list-style:none (去除符号) clear:both(去除浮动) overflow:hidden;(超过大小就不显示) overflow:scroll 滚动条 border:none;outline:none;去除按钮边框
小城故事
2023/02/27
7760
CSS样式规则及字体样式
CSS通常称为CSS样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局等外观显示样式。
星辰_大海
2020/09/30
4.1K0
CSS基本知识(慕课网)
  1、注释     注解:CSS中注释/*这里是注释的文字*/   HTML中注释<!--这里是注释的文字-->   2、外部式css样式,写在单独的一个文件中     注解: 外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中,这个css样式文件以“.css”为扩展名,在<head>内(不是在<style>标签内)使用<link>标签将css样式文件链接到HTML文件内,如下面代码: <link href="base.css" rel="stylesheet" type="tex
听着music睡
2018/05/18
2.2K0
Css学习手册之基本篇
Css学习手册之基本篇 每次写前端都是一个痛苦的过程,总是静不下来,彻底的研究下前端的技术,导致每次套页面都是直接采用一些封装好的控件,而有时对这些样式不满意时,又得百度一下该怎么用,低效且不愉快,强制自己好好的学习下基本功 <!-- more --> I. 基本使用姿势 0. 几种css使用姿势 主要有下面三个使用姿势,其中优先级为 c > b > a a.直接引入css文件 b.在html中,直接写css: c.在标签中直接写css <!-- 方式 a --> <link rel="stylesheet
一灰灰blog
2018/04/18
1.9K0
Css学习手册之基本篇
CSS使用技巧
在修改模板的过程中,需要重写CSS样式表。正好看到instantshift.com有一篇CSS常用技巧的总结文章,我就把它整理出来,供自己参考,也希望对大家有用。
ruanyf
2018/09/21
1.2K0
CSS使用技巧
CSS使用技巧
然后,将小容器定位为absolute,再将它的左上角沿y轴下移50%,最后将它margin-top上移本身高度的50%即可。
神葳
2021/01/22
1.3K0
CSS再学
css的注释 /*.......*/ 直接在html代码中写css <p style="color: rebeccapurple;font-size: 18px">Hao</p> css代码写在当前文件中 <head>     <meta charset="UTF-8">     <title>Title</title>     <style type="text/css"> p{ color: red; font-size: 19px;         }     </style> </head>
用户1173509
2018/01/17
2K0
全栈之前端 | 8.CSS3基础知识之文本样式学习
描述: 通过前面几章的学习,相信大家已经对CSS有了一个简单的了解吧,现在我们又回到使用频率较高的 文本 text、图像 images、表单 table 等元素CSS样式的设置,此章节主要讲解针对文本的相关CSS属性以其使用的示例演示。
全栈工程师修炼指南
2023/10/31
4060
全栈之前端 | 8.CSS3基础知识之文本样式学习
CSS基础知识
1.认识CSS样式 CSS全称为“层叠样式表 (Cascading Style Sheets)”,它主要是用于定义HTML内容在浏览器内的显示样式,如文字大小、颜色、字体加粗等。 如下列代码: p{
用户1667431
2018/04/18
2.8K0
CSS基础知识
css常用的样式总结
word-break 换行 word-break:break-all 所有的都换行 word-wrap:break-word 如果一行文字有可以换行的点,如空格,或CJK之类的,就让这些换行点换行,不关心对不对齐,好不好看。容易出现一片一片的空白 css3中自动调整大小 div{ width: 300px; height: 300px; padding: 10px; border: 2px solid green;
友儿
2022/09/13
6940
【CSS】文本样式:font & text
font-variant 属性设置小型大写字母的字体显示文本,这意味着所有的小写字母均会被转换为大写,但是所有使用小型大写字体的字母与其余文本相比,其字体尺寸更小。
毛大姑娘
2021/05/06
1.1K0
HTML/CSS基础知识学习笔记
http://www.cnblogs.com/scue/p/4276339.html
bear_fish
2018/09/19
2.1K0
CSS基础知识巩固你的前端基础
CSS基础知识 css,英文 Cascading Style Sheets,中文名:级联样式表。层叠样式表。 css是一种表现语言,是对网页语言的补充。 css用于网页的风格设计,包括字体,颜色,位置等。 css使用的4中方式:引入外部样式文件,导入外部样式文件,使用内部样式定义,使用内联样式定义。 引入外部样式文件: <link type="text/css" rel="stylesheet" href="css样式文件的url"/> 导入外部样式文
达达前端
2022/04/13
2K0
DIV+CSS颜色边框背景等样式
使用缩写可以帮助减少你CSS文件的大小,更加容易阅读。css缩写的主要规则请参看《常用css缩写语法总结》,css缩写的主要规则如下:
全栈程序员站长
2022/07/15
1.8K0
CSS入门级学习
css入门学习 1:认识CSS   1.1:css简介,css全称是层叠样式表,Cascading style sheets   1.2:css的作用,主要是用于定义html内容在浏览器内的显示样式
别先生
2017/12/29
1.4K0
CSS入门级学习
CSS基础(一)
CSS引入方式: 1. 行内式: <div style = "..."></div>(使用最少,因为会产生冗余,而且不符合W3C规定) 2. 内嵌式: <style> ... (写的是样式)... </style>(不会有冗余) 3. 外链式:<link href = "style.css"> (用的最多)
且陶陶
2023/04/12
9370
CSS基础(一)
六. CSS 样式补充之 font & background
font-face可以将服务器中的字体直接提供给用户去使用 问题: 1.加载速度 2.版权 3.字体格式
小海怪的互联网
2020/10/26
2K0
相关推荐
css样式大全
更多 >
领券
社区富文本编辑器全新改版!诚邀体验~
全新交互,全新视觉,新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能,全面提升创作效率和体验
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文