Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >CSS样式更改——字体设置Font&边框Border

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

作者头像
前端皮皮
发布于 2020-11-25 06:32:28
发布于 2020-11-25 06:32:28
3.6K02
代码可运行
举报
运行总次数: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基础知识
1.认识CSS样式 CSS全称为“层叠样式表 (Cascading Style Sheets)”,它主要是用于定义HTML内容在浏览器内的显示样式,如文字大小、颜色、字体加粗等。 如下列代码: p{
用户1667431
2018/04/18
2.8K0
CSS基础知识
CSS使用技巧
在修改模板的过程中,需要重写CSS样式表。正好看到instantshift.com有一篇CSS常用技巧的总结文章,我就把它整理出来,供自己参考,也希望对大家有用。
ruanyf
2018/09/21
1.3K0
CSS使用技巧
css基本知识框架图
2.样式表基本类型-----1.内嵌样式 2.内联样式3.链入外部样式表4.导入外部样式
yaohong
2019/09/11
7670
css基本知识框架图
CSS入门级学习
css入门学习 1:认识CSS   1.1:css简介,css全称是层叠样式表,Cascading style sheets   1.2:css的作用,主要是用于定义html内容在浏览器内的显示样式
别先生
2017/12/29
1.4K0
CSS入门级学习
CSS使用技巧
然后,将小容器定位为absolute,再将它的左上角沿y轴下移50%,最后将它margin-top上移本身高度的50%即可。
神葳
2021/01/22
1.4K0
CSS使用技巧
http://www.ruanyifeng.com/blog/2010/03/css_cookbook.html
bear_fish
2018/09/20
7720
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.6K0
【CSS3 理论知识】表格边框(table-border)你知多少???
table之间的边框存在共用问题,自然而然就存在冲突。既然存在冲突,那么就势必涉及到最后渲染哪一个样式的问题。本文就主要研究当冲突产生时,如何让浏览器按照自己意愿渲染冲突边框。在这篇文章中都有介绍,以
QUXINGDONG.COM
2018/04/17
4.7K0
【CSS3 理论知识】表格边框(table-border)你知多少???
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常用的样式总结
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
7410
css多浏览常见问题
关于CSS对各个浏览器兼容已经是老生常谈的问题了, 网络上的教程遍地都是. 以下内容没有太多新颖, 纯属个人总结, 希望能对初学者有一定的帮助. 一、CSS HACK 以下两种方法几乎能解决现今所有HACK. 1, !important 随着IE7对!important的支持, !important 方法现在只针对IE6的HACK. (注意写法.记得该声明位置需要提前.) <style> #wrapper { width: 100px!important; /* IE7+FF */ wid
用户1112962
2018/07/03
1.1K0
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
8320
HTML/CSS基础知识学习笔记
http://www.cnblogs.com/scue/p/4276339.html
bear_fish
2018/09/19
2.2K0
CSS基础知识巩固你的前端基础
CSS基础知识 css,英文 Cascading Style Sheets,中文名:级联样式表。层叠样式表。 css是一种表现语言,是对网页语言的补充。 css用于网页的风格设计,包括字体,颜色,位置等。 css使用的4中方式:引入外部样式文件,导入外部样式文件,使用内部样式定义,使用内联样式定义。 引入外部样式文件: <link type="text/css" rel="stylesheet" href="css样式文件的url"/> 导入外部样式文
达达前端
2022/04/13
2.1K0
6-css样式
背景图片定位的值可以是应为left,right,top,bottom,center
达达前端
2020/05/18
2K0
全栈之前端 | 8.CSS3基础知识之文本样式学习
描述: 通过前面几章的学习,相信大家已经对CSS有了一个简单的了解吧,现在我们又回到使用频率较高的 文本 text、图像 images、表单 table 等元素CSS样式的设置,此章节主要讲解针对文本的相关CSS属性以其使用的示例演示。
全栈工程师修炼指南
2023/10/31
5460
全栈之前端 | 8.CSS3基础知识之文本样式学习
Css代码
1 1,225 views A+ 所属分类:技术 〓注意事项〓说明仅供参考,因浏览器显示差异或属性覆盖等问题可能看不到效果,具体使用请自行摸索,欢迎各位提供纠正完善,更多属性代码参考请到W3school,谢谢。 以下是通用代码(即红色部分),你可以利用它修改你想修改的区域(即下面蓝色的部分)的属性,即:区域{通用代码} *如body{font:italic bold 105% small-caps"Times New Roman",Georgia,Serif;} 记得删除类似①②③的标识。 〓字
用户1127987
2018/06/04
2.1K0
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
2.1K0
10.7 border-width边框粗细:outline与border有什么不同?
为什么线的粗细叫宽度?边框线像马路往前冲,马路的宽度就好比是线的宽度。此外,还有stroke-width,是以后学Canvas绘制时要接触到的,是绘制的线的粗细,它们的名字是类似的。
LIYI
2020/10/26
2.5K0
10.7 border-width边框粗细:outline与border有什么不同?
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.3K0
相关推荐
CSS基础知识
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验