百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

零基础学习HTML之CSS篇样式优先权和字体样式与段落样式

zhezhongyun 2025-03-04 15:52 21 浏览

CSS样式优先权

1.写法优先权

优先级依次是:行内样式表 > 内部样式表> 外部样式表。

2.选择符优先权

对于id 与 class 而言,id的定义优先于class 的定义。具有class属性的比没有class属性的优先权要大。

id > class > 类型选择符

样式继承

1.HTML 中的子标签会继承部分父标签的样式。

如: body { color:#ff0000;}那么页面中,body之下的所有标签及标签下的所有子标签的文本都将变成红色。

2. !important

在两行相同类型的css样式定义中,往往优先执行后面一个;

p{font-size:14px;font-size:20px;}

但是可以通过!important 语法,提升某一句样式表的重要性,使及优先执先 !important标注的语句。

p{font-size:14px !important;font-size:20px;}

css 代码注释,以 /* 开始 */ 结束。

如:/* body样式*/

body { margin:0px; padding:0px;}

/*LOGO样式*/

#logo{ ……}

/*导航样式结束*/

字体样式

1.字体

font-family设置文字名称,可以使用多个名称,或者使用逗号

分隔,浏览器则按照先后顺序依次使用可用字体。

例:Arial

p { font-family:'宋体','黑体'}

2.字号

font-size设置文字的尺寸

例:p { font-size:14px;}

3.字体加粗

font-weight : normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

例:p { font-weight:bold;}

4.斜体

font-style : normal | italic | oblique

例:p { font-style: normal; }

p { font-style: italic; }

p { font-style: oblique; }

5.下划线控制

text-decoration : none || underline || blink || overline || line-through

例:

p { text-decoration:overline;}

p { text-decoration:underline;}

p { text-decoration:line-through;}

6.字体样式缩写

font : font-style || font-variant || font-weight || font-size || line-height || font-family

例:

P {

font-style:italic;

font-weight:bold;

font-size:14px;

line-height:22px;

font-family:宋体;

}

也可以缩写的形式:

p { font:italic bold 14px/22px 宋体}

1.行高

line-height : normal | length

例:p{ line-height:25px;} p{ line-height:150%}

2.段落缩进

text-indent : length; p{ text-indent:4px;}

3.段落对齐

text-align : left | right | center | justify

对于text-aligh,不但是文本,对象中的其它元素也能够被text-align进行对齐方式的设置。

例:

p { text-align:right;}

p { text-align:center;}

4.文字间距

letter-spacing : normal | length

p{ letter-spacing:5px;}

关于margin外边距和padding内边距会在下一章中讲到。

相关推荐

轻松玩转windows控制台(五):彻底搞懂屏幕缓冲区

写在前面在上一篇文章中,详细地介绍了控制台程序最容易令人困惑和混淆的地方,即什么是控制台窗口,什么是控制台屏幕缓冲区。并通过几个示例程序,演示了如何设置控制台窗口“显示区域”的大小。(轻松玩转wind...

零基础教你学前端——85、高度自适应

这节课,我们学习如何让元素的宽度和高度在容器里自适应。什么是宽高自适应呢?页面里有两个div,开始的时候宽度都是800px,当我们将浏览器窗口的宽度拖动到小于800px的时候,我们发现:上面的...

Grafana可视化平台面板之Gauge仪表和Bar Gauge条形仪表

仪表(Gauge)仪表是一种用于展示单个数值指标并跟踪其随时间变化的图表类型。它通常用于显示系统的实时状态或关键性能指标,如CPU使用率、内存占用率等。仪表通过一个圆形或半圆形的表盘来展示数值,并可以...

网页五指棋游戏(五指棋单机)

完整代码如下,大家可以保存到html文件点击打开,就可以看到如上效果<!DOCTYPEhtml><htmllang="zh-CN"><head>...

2020年度中央机关公开遴选和公开选调公务员报名即将开始

新华社北京10月27日电(记者林晖)记者27日从国家公务员局获悉,2020年度中央机关公开遴选和公开选调公务员报名即将开始,考生可于10月28日8时至11月6日18时期间,登录“2020年度中央机关公...

小程序学习日志7:可滚动的视图区域组件(滚动条)

导读经过这段日子的学习,大家对小程序的了解多了多少呢?我们这段时间学了很多组件的用法,以及这些组件的属性和属性的合法值,图片、文字、块,还了解了不少的样式代码和小程序的基本知识。我们今天来讲一个可滚动...

四叶草SEO:主要SEO作弊方法之隐藏文字

石家庄四叶草SEO小编在这里介绍黑帽,并不意味鼓励大家使用黑帽,恰恰相反,而是因为很多SEOer无意之中就使用了黑帽手法,自己却不知道。对于一个正常的商业网站和大部分个人网站来说,做好内容,正常优化,...

鸿蒙仓颉语言开发实战教程:商城搜索页

大家好,今天要分享的是仓颉语言商城应用的搜索页。搜索页的内容比较多,都有点密集恐惧症了,不过我们可以从上至下将它拆分开来,逐一击破。导航栏搜索页的的最顶部是导航栏,由返回按钮和搜索框两部分组成,比较简...

鸿蒙Next仓颉语言开发实战教程:设置页面

仓颉语言商城应用的页面开发教程接近尾声了,今天要分享的是设置页面:导航栏还是老样式,介绍过很多次了,今天不再赘述。这个页面的内容主要还是介绍List容器的使用。可以看出列表内容分为三组,所以我们要用到...

CSS box-sizing 属性详解(css中box属性有哪些)

box-sizing是CSS的一个非常重要的属性。CSS的box-sizing属性用于控制元素尺寸的计算方式,决定了元素的宽度(width)和高度(height)是否包含内边距(...

68.C# MenuStrip控件(c#基本控件)

摘要MenuStrip控件是在.NETFramework版本2.0中引入的。可以通过MenuStrip控件,轻松创建像MicrosoftOffice中的菜单。MenuStrip...

Qt使用布局管理器实现扩展对话框(qt选择文件路径对话框)

今天跟大家讲讲扩展对话框的实现;扩展对话框效果如下所示:(1)初始界面:(2)单击<More>按钮:(3)再次单击<More>按钮:这节主要讲解用布局管理器方式实现,下节讲解用...

探讨小程序开发的布局(小程序开发部署流程)

谈到小程序布局就不得不谈WXSS(WeiXinStyleSheets)!WXSS是微信小程序专用的样式语言。WXSS与css虽然在尺寸单位和样式导入不同,但是,具有CSS大部分特性。小程序的样式...

图片懒加载的现代 JavaScript 实现,仅需 10 行代码

过去,实现懒加载通常需要监听scroll事件,并结合getBoundingClientRect()等方法计算元素位置,代码不仅繁琐,而且频繁的计算会引发性能问题。现代浏览器提供了Inters...

JS实现轮播图案例(一看就懂,逻辑清晰)

1.功能分析实现如图所示的轮播图,要实现的功能主要有:鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮。点击右侧按钮一次,图片下滑一张;点击左侧按钮,图片上滑一张。图片播放的同时,下面小圆圈模块跟...