前端学习记录4-CSS(三种写法,代码风格,font字体样式)

最新推荐文章于 2022-08-16 22:17:23 发布
最新推荐文章于 2022-08-16 22:17:23 发布
阅读量629 收藏 1
点赞数
分类专栏： 学习记录 文章标签： html html5 css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44541948/article/details/106951476
版权
本文介绍了CSS的三种写法——行内式、内部样式表（内嵌式）和外部样式表（链入式），讨论了它们的优缺点。此外，文章详细阐述了CSS代码风格的选择，推荐使用展开式以提高可读性。接着，讨论了`font`属性，包括`font-size`、`font-family`、`font-weight`和`font-style`，并提醒开发者注意字体选择对用户体验的影响。
摘要由CSDN通过智能技术生成

前端学习记录4-CSS-三种写法,代码风格,font字体样式

使用CSS的目的

html有个局限性，忒丑 并且在某些地方使用很麻烦 直接在标签中添加样式 非常复杂
并且代码观感上难看

理想状态：html与css分离
html只负责结构 css来控制样式 css(层叠样式表) 主要设置html中文本内容(字体、大小、对齐等)
图片的外形(宽高、边框、边距等) 页面的布局和外观显示样式 可针对不同浏览器设计不同样式

CSS三种写法

行内式

行内样式表 直接在标签内容写
style="属性1:属性值;属性2:属性值;......."
问题：容易冗余 一个样式写好几遍
没有实现html与css分离

<h1 style="color: gray;font-size: 2px;">我爱你，山河湖海，日月星辰</h1>

内部样式表(内嵌式)

将CSS代码集中写在html文档的head标签中，并且用style标签定义

style标签可以放在html任何地方
但是一般都在<head></head>中
type="text/css"可以省略但是最好也别省略
缺点是只能控制当前页面 没有彻底分离

<style type="text/css">
			h1 {
    
				color: green;
				font-size: 20px;
			}
			h3 {
    
				color: purple;
				font-size: 18px;
最低0.47元/天 解锁文章
SHoadgnaw
关注
专栏目录
大前端学习笔记--持续随缘更新
JackieDYH的博客
02-10 1198
目录 0210--前端知识&HTML常用标签 0210--前端知识&HTML常用标签 1、浏览器及内核介绍： chrome谷歌： 特点——简洁、快速、安全 内核——webkit,Blink 费用——收费 Firefox火狐——Mozilla公司： 特点——非盈利、Gecko项目开源 内核——Gecko Safari苹果——苹果...
学习笔记-CSS
seruyyyyyy的博客
03-15 477
CSS简介（层叠样式表） css主要用于场景，用于美化页面 HTML只关心内容的语义，所以外观样式一般由css来负责，使页面更美观 css语法规范 由选择器和一条或多条声明构成 <style> /* 选择器 */ /* 给谁改样式（改什么样式） */ p { /* 修改文字为红色 */ color: red; /* 修改文字大小为十二像素 */
前端学习（三）——CSS的三种写法与优先级
tjq980303的博客
09-09 1021
1.style属性中写CSS   样例： CSS写法优先级测试 CSS写法优先级测试     2.在标签中写CSS   样例： CSS写法优先级测试 p{ color: green; font-size: 50px; } CSS写法优先级测试     3.link标签外联样式表   创建文件如下 test.html
css 字体大小_#HTML#-CSS样式-设置元素样式的三种方式
weixin_42468901的博客
12-27 218
层叠样式表(Cascading Style Sheets，CSS)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言，CSS备受前端开发者的青睐。本文对基本的CSS元素的基本属性进行介绍。图片源于网络CSS的基础元素包括style，本文主要对style中font-size(设置字体大小)和color设置文本颜色两种属性设置这两种属性主要...
前端CSS3--三大样式
weixin_45981384的博客
08-24 1290
一、内联式css样式 内联式css样式表就是把css代码直接写在现有的HTML标签中，css样式代码要写在style=""双引号中，如果有多条css样式代码设置可以写在一起，中间用分号隔开。如下代码：如下面代码： <p style="color:red;font-size:12px">这里文字是红色。</p> 二、嵌入式css样式 嵌入式css样式，就是可以把css样式代码写在<style type="text/css"></style>标签之间。代码如下：
CSS设置style属性的3种方法
热门推荐
韬光养晦
09-14 1万+
CSS：层叠样式表 可以将css样式编写到元素的style属性当中： 1.将样式直接写到style属性中，这种样式我们称为内联样式，内联样式只对当前的元素中的内容起作用，内联样式不方便复用，不推荐使用。 eg： <p style="color:blue;font-size: 50px;">明月几时有，把酒问青天！</p> 2.也可以将CSS样式编写到head中的style...
web前端学习笔记--css书写位置
weixin_46493903的博客
08-04 579
css 全称 cascading style sheets，层叠式样式表，是一种用来表现 HTML的文件样式的计算机语言。 作用：静态地修饰网页，并且可以配合各种脚本语言动态地对网页各元素进行格式化 css规则：由两个主要的部分组成：选择器、以及一条或多条的声明 p{width：300px;font-size:14px;} 其中，p是选择器，{}里的是多条样式属性，每一条样式属性由属性名：属性值组成 书写位置： 根据书写位置的不同，可以分为内联式、内嵌式、外联式、导入式 内联式(行内式) 书写位置:在
前端学习（初识CSS 上）——选择器、优先级和字体样式
weixin_43866830的博客
03-14 3713
前端学习之初识CSS一、什么是CSS？二、CSS基础语法1.代码结构2.CSS的引用方法（1）内联式（2）嵌入式（3）链接式（4）导入式三、CSS选择器1.标签选择器2.类选择器3.ID选择器4.群组选择器5.通配符（全局）选择器6.后代选择器7.子选择器8.伪类选择器（1）链接伪类（2）伪类选择器的其他用法9.属性选择器10.选择器的优先级以及权重11.!important用法 一、什么是CSS？ 1.CSS 指层叠样式表 (Cascading Style Sheets)。 2.样式定义如何显示 HTML
CSS字体 ,文本属性
m0_72686745的博客
08-16 328
1.使用多个字体名称形成一个回退系统（也就是备用字体），当浏览器不支持第一个字体的时候则会尝试下一个字体，多个字体之间用逗号隔开。/*font-family:"宋体","微软雅黑";*//*与上一个相比产生的效果不同，谁在前使用哪一个*/方法：测量两行文字中间的间距，然后除以2，得到平均间距，拉出参考线，进行标注，方便测量。/*第一个任意改写一个系统不存在的字体，会按照第二个字体显示*//*font-family:"微软雅黑","宋体";顺序：文字的样式 文字的加粗 文字的字号/行高 文字的字体。...
vue中style的三元表达写法
weixin_44090753的博客
04-22 1220
<a :style="{'margin-left':'10px','color':record.status==0?'#76CBC2':'gray','cursor':record.status==0?'':'default'}">发布</a>
CSS的行内样式书写规范
css教程
12-26 3228
现在做网站的大都是使用现成的CMS，都很少使用到CSS了。 我自网站建成到现在五个月，期间一直是在用后台在维持网站更新，今天浏览主页时发现有个地方已经过时了，需要修改以下，然后通过编辑器找到CSS源代码 发现如果改了其它页面也会受影响，所以就决定使用CSS行内样式了。但是想动手修改时发现写不出来了（忘了行内样式的书写规范了），然后在网站找了一些CSS样式表 行内样式的范例参考了一下，改出了自己
salesforce 零基础学习（四十六）动态美观显示列表中记录的审批状态
weixin_30437847的博客
09-25 233
项目中，申请者申请某些事项以后，常常需要在申请列表中查看当前申请的记录所在的审批状态，动态美观的显示状态可以使UI更符合客户要求，比如下面这样。 以Goods__c表为例，申请者申请的一些采购以前需要得到批准，申请者列表需要显示所有的申请记录，状态（Status__c）有以下情况： 　　直线经理审批; 　　部门经理审批; 　　总经理审批; 　　审批通过。 实现上述方式主要实现思路:...
CSS行内盒模型及文字样式
Taciturn_Grasp的博客
02-12 328
1. 什么是行内盒模型 行内盒模型（inline box moldel），是W3C规定一个浏览器如何渲染、显示、排版文字的一整套规则 内容区:由font-size决定大小 文本基线:由字体本身的设计决定 行框:由line-height控制最小行框高度 行间距=(line-height – font-size) 2. 行内盒模型的概念分析 2.1行内盒模型内容区 内容区:由font-si...
CSS样式规则
qq_43498002的博客
09-23 1763
CSS css作用：设置HTML版面的布局和外观的显示样式 一、引入CSS样式表 1、行内式（内联样式） 概念： 称为内样式，行间样式 是通过标签的style属性来设置元素的样式 语法格式： <标签名 style="属性1：属性值1； 属性2：属性值2；属性3：属性值3；">内容</标签名> 2、内部样式表（内嵌样式表） 概念： 称内嵌式 是将CSS代码集中卸载HTML文档的head头部标签中，并用style标签来定义 语法格式： <style type="text/css
前端 字体样式
ball4022的博客
08-01 2067
字体样式 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>文本属性</title> <style> .box { width: 300px; he...
css、js外链式写法
thaiilk的博客
02-27 4752
css： &lt;link rel="stylesheet" href="文件位置"&gt;   js： &lt;script type="text/javascript" src="文件位置"&gt;&lt;/script&gt;    
第十一课 CSS介绍与font字体 css学习1
aofu9615的博客
02-26 210
一、CSS样式规则 1、基本结构 <html> 　　<head> 　　　　<style> 　　　　　　h1{ 　　　　　　　　color: orange; 　　　　　　　} 　　　　</style> 　　</head> 　　<body> 　　</body> </html&gt...
"前端学习之路-CSS基础笔记：掌握层叠样式表技术，精确控制网页布局和效果
在这一步骤中,我们可以利用CSS技术来进行网页的样式美化,通过设置字体、颜色、背景等样式属性来实现对网页的精确控制.同时,我们还可以通过DOM技术来实现对网页元素的动态操作,如添加、删除、修改等.最后,当页面设计...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值