1.通过标签来修改样式的缺点:
1.1 需要记忆那些标签又那些属性,如果该标签没有这个属性,那么设置了也没有什么效果
1.2 当需求变更时我们需要修改大量的代码才能满足现有的需求
1.3 html只有一个作用就是用来添加语义
所以在企业开发中修改样式都交给css来做
2.通过CSS来修改样式的好处:
2.1 不用记忆那些属性属于那些标签
2.2 当需求变更时不需要修改大量的代码就可以满足需求
2.3 在前端开发中CSS只有一个作用,就是用来修改样式
<style type="text/css">
h1{
text-align: center;
color: red;
font-family: "微软 雅黑";
}
p{
text-align: center;
color:green;
font-family: "微软 雅黑";
font-size: 30px;
}
</style>
<h1 >成功的法则</h1>
<p >迟到毁一生</p>
<p >早退穷三代</p>
<p >按时上下班</p>
<p >必成高富帅</p>
3.注意点:
3.1 style标签必须写在head标签的开始标签和结束标签之间,(也就是必须和title标签是兄弟关系)
3.2 style标签中的type属性其实可以不用写,默认就是type="text/css"
3.3 设置样式时必须按照固定的格式来设置,key: value 其中不能省略,分号大多数情况下不能省略(无论是否可以省略,但是都不要省略)
<style>
p{
font-style: italic;
font-weight: bold;
font-size: 30px;
font-family: "楷体";
}
</style>
<!--1.规定文字样式的属性
font-style: italic;
normal: 正常的,默认就是正常的
italic: 倾斜的样式
快捷键: fsi 然后按下table
fsn 然后按下table
2.规定文字粗细的属性
字母取值
bold:加粗
bolder:比加粗还要粗
lighter:细线,默认就是的细线
快捷键:
fwb 然后按下table font-weight: bold;
fwbr 按下table font-weight: bolder;
数字取值
100 ~ 900 之间整百的数字
3.规定文字大小的属性
font-size: 40px;
单位:px(像素 pixel)
注意点:通过font-size设置大小一定要带单位,也就是一定要写px
快捷键:
fz font-size:
fz30 font-size:30px;
4.规定文字字体的属性
font-family: "楷体";
注意点:
1.如果取值是中文的话,需要使用单引号或者双引号括起来
2.设置的字体必须使用户电脑里面安装的字体
3. ff 然后按下table
-->
<!--设置的字体就是不存在
怎么办?
1.如果设置的字体不存在,那么系统会使用默认的字体来显示
2.如果设置的字体不存在,而我们又不想使用默认字体怎么办?
font-family:"发件方垃圾分类","微软雅黑",,,,;备选方案
3.如果想给中文和英文设置不同的字体怎么办?
但凡中文字体,里面都包含了英文
但凡英文字体,里面都没有包含中文
注意点:如果想给界面中的英文单独设置字体,必须把英文写在前面
补充:在企业开发中最常见的字体有以上几个:
中文:宋体,黑体,微软雅黑 系统自带
英文:Times New Roman /Arial 系统自带
还需知道:就是并不是名称是英文就一定是英文字体,
因为中文字体其实都有自己的英文名称,所以是不是
中文字体主要看能不能处理中文
宋体 SimSum
黑体 SimHei
微软雅黑 Microsoft YaHei
-->
<style>
p{
/*font-family:"发件方垃圾分类","微软雅黑";*/
font-family:"Times New Roman","微软雅黑";//备选方案用与中文
}
</style>
html -- 使用CSS修改样式01
最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
- 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
推荐阅读更多精彩内容
- 最近再做Again的项目。在用Readability降噪页面后,返回一串html的字符串。使用loadHTMLSt...
- 今天一位朋友提出了一个很有意思的需要:“现在淘宝后台在不增加CSS相应权限情况下,如何把以前的Css文件里的内容快...
- 一、 放入 redis 中(PHP 需要安装 redis 扩展) yum 安装 redis 扩展 修改 php.i...