CSS样式剖析

最新推荐文章于 2022-05-11 14:56:49 发布
原创 最新推荐文章于 2022-05-11 14:56:49 发布 · 578 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文深入探讨CSS技术，从层叠式样式表的概念出发，详细介绍了CSS的特点、语法规则及与HTML、脚本的结合方式，并展示了如何应用CSS进行网页元素布局、排版和显示效果的控制。

 

1. CSS简介：
CSS-- Cascading Style Sheets，层叠式样式表。该技术始于1996年，1998年5月，level2(水平) 成为了W3C 的新标准。CSS扩展了HTML的功能，CSS与HTML、脚本相结合，可以更加有效的实现对网页元素的布局、排版和显示效果的控制。
2. CSS特点：
(1)标识语言，纯文本，可以使用各种文本编辑器编写； (Dreamweaver是首选)
(2)CSS可以灵活的方式与HTML和脚本相结合；
(3)易用性、高效率、一致性、可靠性、可维护性、可移植性；
(3)CSS文件扩展名：css；
(5)CSS文件亦需在Web浏览器上解释执行；（运行环境）
(6)具有跨平台性。
3. CSS语法规则： （selector） 选择器
(1)tag {property:value;...} //标签，属性：值
(2)tag.Classname {property:value;...}　　//Class-selector，关联选择符
(3).Classmate {property:value;...}　　//Class-selector，独立选择符
(4)tag#IDname {property:value;...}　　//ID-selector，关联选择符
(5)#IDname {property:value;...}　　//ID-selector，独立选择符
(6)归类规则：
   h1,p{font-family:"黑体"}
(7)继承规则：
   <b>b标签设定的样式<i>i标签内的元素将予以继承</i></b> ；如果不继承，若要采用独立的样式用<span>
(8)情景选择规则：
   格式：情景标签 标识符{属性：值；...}
   例：
   <html>
   <head>
   <title>带情景选择的样式表实例</title>
   </head>
   <style type="text/css">
   p i{font-size:30pt;color:red}
   </style>
   <body bgcolor=lightblue>
   <center>
   <h1>这是一个<i>样式表</i>实例</h1>
   <p>这是一个<i>样式表</i>实例</p>
   </center>
   </body>
   </html>
4. CSS与HTML结合方式：
(1)内联：<tag style="property:value;...">[</tag>]
(2)嵌入：
　　 <STYLE type="text/css">
　　 <!--
　　 selector {property:value;...}
　　 ...
　　 -->
　　 </STYLE>
(3)链接外部样式表文件：
　　 <link href="../mycss.css" rel="stylesheet" type="text/css">
(4)导入外部样式表文件：
　　 <STYLE type="text/css">
　　 <!--
　　 @import url("../mycss.css");
　　 -->
　　 </STYLE>
(5)外部样式表文件：
　　 扩展名：.css
　　 不能包含任何HTML标签
　　 遵循CSS语法规则
5、CSS应用：
(1)<tag>[</tag>]
(2)<tag style="property:value;...">[</tag>]
(3)<tag class="Classname">[</tag>]
(4)<tag id="IDname">[</tag>]
(5)优先顺序：(后定义的优先) 内联样式最高；
      其它，按层次处理。
?font：
? 字体属性：font-family
 
<html>
<style type="text/css">
<!--
p{font-family:幼圆,隶书,宋体}
.en{font-family: "Times New Roman", "Times", "serif";}
-->
</style>
<head>
<title>font-family属性</title>
</head>
<body bgcolor=lightyellow>
<center>
<font size=5 color=red>font-family属性的应用效果</font>
</center>
<p>
将按照幼圆、隶书、宋体的顺序对字体进行设置
</p>
</body>
</html>
 
? 字体风格：font-style
字体风格通常指字型，主要有 正常，斜体，和偏斜体，分别对应值为normal,italic,oblique
 
<html>
<style type="text/css">
<!--
.p1{font-style:normal}
.p2{font-style:italic}
.p3{font-style:oblique}
-->
</style>
<head>
<title>font-style属性</title>
</head>
<body bgcolor=lightyellow>
<center>
<font size=5 color=red>font-style属性的应用效果</font>
<font size=5>
<p class=p1> 这是normal风格</p>
<p class=p2> 这是italic风格</p>
<p class=p3> 这是oblique风格</p>
</center>
</body>
</html>
 
? 字体变形：font-variant
字体变形具备如下属性：正常和小型大写字母两种，主要对英文字母有效果。对应值为normal,small-caps
? 字体加粗：font-weight
默认，粗体，特粗，细体和具体的值，分别对应

参数值 说明
normal 浏览器默认字体为7，字体粗细约为400
bold 粗体，字体粗细约为700
bolder 粗全再加粗，字体粗细约为900
lighter 比默认字体还细
100~900 数字越小字体越细，数字越大字体越粗
 
<html>
<style type="text/css">
<!--
#w-normal {font-weight:normal}
#w-bold {font-weight:bold}
#w-bolder {font-weight:bolder}
#w-lighter {font-weight:lighter}
#w-1 {font-weight:100}
#w-2 {font-weight:900}
-->
</style>
<head>
<title>font-variant属性</title>
</head>
<body bgcolor=lightyellow>
<center>
<font size=5 color=red>font-weight属性的应用效果</font>
<table border=2 >
<tr align=center>
<td id=w-ligher>lighter</td>
</tr><tr>
<td id=w-normal>normal</td>
</tr><tr>
<td id=w-bold>bold</td>
</tr><tr>
<td id=w-bolder>bolder</td>
</tr>
<tr>
<td id=w-1>字体粗细为100</td>
</tr><tr>
<td id=w-2>字体粗细为900</td>
</tr>
</table>
</center>
</body>
</html>
 
? 字号：font-size
语法格式：font-size:<绝对尺寸>|<关键字>|<相对尺寸>|<比例尺寸>
⑴ 绝对尺寸举例：
 
<html>
<head>
<title>使用绝对尺寸控制字号的大小</title>
</head>
<body bgcolor=lightyellow>
<font style="font-size:5em"> 字号为5em</font><br>
<font style="font-size:5ex"> 字号为5ex </font><br>
<font style="font-size:0.5in">字号为0.5in </font><br>
<font style="font-size:1cm"> 字号为1cm </font><br>
<font style="font-size:10mm"> 字号为10mm </font><br>
<font style="font-size:25pt"> 字号为25pt </font><br>
<font style="font-size:25px"> 字号为25px </font><br>
<font style="font-size:2pc"> 字号为2pc</font><br>
</body>
</html>
 

   (2) 关键字和相对尺寸举例：
 
<html>
<head>
<title>使用关键字和相对尺寸控制字号大小</title>
</head>
<body bgcolor=lightyellow>
这是浏览器默认的字号<br>
<font style="font-size:xx-small"> 关键字为xx-small </font><br>
<font style="font-size:x-small"> 关键字为x-small </font><br>
<font style="font-size:small"> 关键字为small </font><br>
<font style="font-size:medium"> 关键字为medium </font><br>
<font style="font-size:large"> 关键字为large </font><br>
<font style="font-size:x-large"> 关键字为x-large </font><br>
<font style="font-size:xx-large"> 关键字为xx-large </font><br>
<font style="font-size:smaller"> 相对尺寸为smaller </font><br>
<font style="font-size:larger"> 相对尺寸为larger </font><br>
</body>
</html>
 
   (3) 比例尺寸举例
 
<html>
<head>
<style type="text/css">
<!--
p{font-size:15pt}
b{font-size:300%}
-->
</style>
<title>使用比例尺寸控制字号大小</title>
</head>
<body>
<p>风格<b>风格</b></p>
</body>
</html>
 
? 文字的更改：text-transform
方便网页设计者控制字母的大小写。
 
<html>
<head>
<title>文字的更改</title>
</head>
<body bgcolor=puer>
<font style="text-transform:uppercase"> uppercase:使所有字母大写显示 </font><br>
<font style="text-transform:lowercase"> LOWERCASE：使所有字母小写显示 </font><br>
<font style="text-transform:capitalize"> capitalize：词首字母大写 </font><br>
<font style="text-transform:none"> none：字母以正常形式显示 </font><br>
</body>
</html>
 
? 文字的修饰：text-decoration
格式：text-decoration:underline|overline|line-throungh|blink|none
 
<html>
<head>
<title>text-decoration属性</title>
</head>
<style type="text/css">
<!--
#under{text-decoration:underline}
#over {text-decoration:overline}
#through{text-decoration:line-through}
-->
</style>
<body bgcolor=lightyellow>
<center>
<font size=5 color=red>text-decoration属性的应用效果</font>
</center>
<p id=under>此行文字加下划线</p>
<p id=over>此行文字加顶线</p>
<p id=through>此行文字加删除线</p>
</body>
</html>
 
? 字体属性font：{font： 字体风格||字体变形||字体加粗||字号/行高||字体}
格式：font:font-family||font-style||font-variant||font-weight||font-size
说明：字体属性主要用于不同字体属性的略写；可以同时设置多种属性；属性与属
      性之间必须利用分号隔开。
p{font:italic small-caps bold 22pt/54px 隶书,宋体}
? 控制图文布局
? 字距：letter-spacing word-spacing
letter-spacing用于设置英文字母之间距离;word-spacing设置英文单词之间距离
 
<html>
<head>
<title>word-spacing和letter-spacing属性</title>
</head>
<style type="text/css">
<!--
#letter1{letter-spacing:4pt}
#letter2{letter-spacing:normal}
#word1{word-spacing:10pt}
#word2{word-spacing:normal}
-->
</style>
<body bgcolor=lightyellow>
<center>
<font size=5 color=red>word-spacing和letter-spacing属性的应用效果</font>
<table border=4>
<tr>
<td>字母间距为4pt</td>
<td id=letter1>CSS的英文全称为Cascading Style Sheets</td>
</tr>
<tr>
<td>字母间距为正常</td>
<td id=letter2>CSS的英文全称为Cascading Style Sheets</td>
</tr>
<tr>
<td>单词间距为10pt</td>
<td id=word1>CSS的英文全称为Cascading Style Sheets</td>
</tr>
<tr>
<td>单词间距为正常</td>
<td id=word2>CSS的英文全称为Cascading Style Sheets</td>
<tr>
</table>
</center>
</body>
</html>
 
? 行距：line-height
数字行距：p{font-size:12pt;line-height:2;}//12pt*2
单位行距：p{line-height:9pt;}
比例行距：p{font-size:10pt;line-height:140%;}//10pt*140%
? 文本对齐
格式：text-align：left|right|center|justify
 vertical-align：top|bottom|text-top|text-bottom|baseline|middle|sub|super
说明：text-align属性用于文字水平对齐，但这个属性只用于整块内容，如：<p><h1>~<h6><u1>等;vertical-align属性用于控制文字或其它网页对象相对于母体对象的垂直位置。
<HTML>
<HEAD>
<TITLE>vertical-align垂直对齐属性</TITLE>
<STYLE TYPE="TEXT/CSS">
<!--
#base {vertical-align:baseline}/*此为默认值*/
#sub {vertical-align:sub; font-size:0.5em}/*设置垂直对齐方式为下标*/
#sup {vertical-align:super; font-size:0.5em}/*设定垂直对齐方式为上标*/
#top{vertical-align:top}/*设置垂直对齐方式为向上对齐*/
#t-top{vertical-align:text-top}/*设置为文字垂直向上对齐*/
#mid{vertical-align:middle}/*设置垂直对齐方式为居中对齐*/
#bot{vertical-align:bottom}/*设置垂直对齐方式为向下对齐*/
#t-bot{vertical-align:text-bottom}/*设置为文字垂直向下对齐*/
-->
</STYLE>
</HEAD>
<BODY BGCOLOR=lightyellow>
<CENTER>
<FONT SIZE=5 COLOR=RED>vertical-align垂直对齐属性的应用</FONT>
<TABLE BORDER=2 HEIGHT=200>
<TR BGCOLOR=LIGHTGREEN align=center>
<TD>设置vertical-align属性</TD><TD>显示结果</TD>
<TD>设置vertical-align属性</TD><TD>显示结果</TD></TR>
<TR>
<TD>vertical-align:sub</TD>
<TD>C+O<FONT ID=sub>2</FONT>-->CO<FONT ID=sub>2</FONT></TD>
<!--在FONT标签内利用ID选择符，引用sub样式-->
<TD>vertical-align:super</TD>
<TD>a<FONT ID=sup>2</FONT>+b<FONT ID=sup>2</FONT>
=c<FONT ID=sup>2</FONT></TD>
<!--在FONT标签内利用ID选择符，引用sup样式-->
</TR>
<TR>
<TD ID=top>vertical-align:top</TD>
<TD ID=top><IMG SRC="logo.gif"></TD>
<!--在TD标签内利用ID选择符，引用top样式-->
<TD ID=t-top>vertical-align:text-top</TD>
<TD ID=t-top><IMG SRC="logo.gif"></TD>
<!--在TD标签内利用ID选择符，引用t-top样式-->
</TR>
<TR>
<TD ID=mid>vertical-align:middle</TD>
<TD ID=mid><IMG SRC="logo.gif"></TD>
<!--在TD标签内利用ID选择符，引用mid样式-->
<TD ID=base>vertical-align:baseline</TD>
<TD ID=base><IMG SRC="logo.gif"></TD>
<!--在TD标签内利用ID选择符，引用base样式-->
</TR>
<TR>
<TD ID=bot>vertical-align:bottom</TD>
<TD ID=bot><IMG SRC="logogriph"></TD>
<!--在TD标签内利用ID选择符，引用bot样式-->
<TD ID=t-bot>vertical-align:text-bottom</TD>
<TD ID=t-bot><IMG SRC="logo.gif"></TD>
<!--在TD标签内利用ID选择符，引用t-bot样式-->
</TR>
</TABLE>
</CENTER>
</BODY>
</HTML>
? 首行缩进
text-indent:数字|百分比
<html>
<head>
<title>text-indent属性</title>
<style type="text/css">
.indent1{text-indent:30pt}
</style>
</head>
<body bgcolor=lightyellow>
<center>
<font size=5 color=red>text-indent属性的应用效果</font>
</center>
<font size=4 color=blue>首行不缩进效果:</font>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
<font size=4 color=blue>首行缩进30pt:</font>
<p class=indent1> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
</body>
</html>
? 

whjwhja6
关注
【HTML基础-4】CSS样式详解
m0_64378913的博客
03-27 2487
目录1 CSS样式概述2 CSS与HTML的三种组合方式2.1 内联样式2.2 内部样式表2.3 外部引用3 总结参考文章 1 CSS样式概述 定义： CSS是Cascading Style Sheets的简称，中文名称为层叠样式表、级联样式表或样式表。 作用：实现内容与样式相分离，提高代码的可重用性和可维护性。 CSS样式：①元素内容的颜色color；元素内容的背景色background-color；③字体大小font-size等等。 CSS与HTML： 对比关系：HTML好比好比定义了一个文章
清理无用的CSS样式比较有用的几个工具
12-12
Dust-Me是一个很有用也很好用的Firefox插件，它可以分析到你的页面中调用的所有CSS文件并分析那些在页面中没有被用到。 支持本地和远程样式文件，包括使用link标签、< ?xml-stylesheet?>处理指令、@import语句...
CSS样式详解
程展威的博客
07-11 2783
其中包含了大量关于CSS的内容，篇幅有些长，但作者已经尽力剪短了，需要某一部分的内容可以查看我的其他博客，我会将这些分开写，争取更加详细，望大家一起进步，如有不好的地方，欢迎指正。
css样式详解
zhongqiu911的博客
11-24 332
前端书写样式的几种方式（详解） 作为一个前端人员，我们都知道样式对于页面的重要性，所以掌握样式的各种写法是至关重要的，话不多说进入正题吧！！ css样式的使用主要分为3种： 行内样式 头部样式 外部样式 行内样式要尽量少用，不然会造成后期维护困难；头部样式要视情况而定，通常在只此一个页面特有的情况下用；我们要习惯使用外部样式；当然外部样式也可以通过@import来引入，但是我们不推荐。 在使用外部样式的时候，我们要配合类型或者ID名来进行选择哪个标签要进行什么样的样式设置；我们也可以在命名
css样式讲解大全,CSS样式类的讲解（附实例）
weixin_32676541的博客
08-04 316
这样的标签，HTML 的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息。同时文档布局由浏览器来完成，而不使用任何的格式化标签。所有的主流浏览器均支持层叠样式表div和span的理解div是一个html标签, 一个块级元素(单独显示一行), 单独使用没有任何意义, 必须结合CSS来使用, 主要用于页面的布局;span是一个html标签, 一个内联元素(显示一行), 它单独使用没有任何意...
CSS要点解析
m0_70013049的博客
04-25 391
一、复合选择器 选择器 作用 特征 使用情况 隔开符号及用法 后代选择器 用来选择后代元素 可以是子孙后代 较多 符号是空格.nav a 子代选择器 选择最近一级元素 只能选亲儿子 较少 符号是大于.nav>p 并集选择器 选择某些相同样式的元素 可以用于集体声明 较多 符号是逗号，.nav, a 链接伪类选择器 选择不同状态的链接 跟链接相关 较多 重点记住a..
【HTML基础】CSS样式表
Fighting_hawk的博客
02-10 3806
1. 理解HTML与CSS各自的功能及配合原则； 2. 掌握HTML与CSS的三种组合方式。
android TextView 支持CSS样式
05-11
通过上述分析，我们可以看到虽然Android原生SDK并未完全支持CSS样式，但是通过合理的利用HTML标签以及借助第三方库的帮助，我们仍然可以实现较为丰富的文本样式效果。这对于提升应用的用户体验是非常有帮助的。...
形考任务五 使用 元素以及CSS样式表对下面的内容进行的布局设计.zip
11-24
2. **CSS样式表简介** CSS（Cascading Style Sheets）是用于控制网页外观和布局的样式语言。它可以改变字体、颜色、间距、布局和更多视觉效果。在本任务中，我们将用CSS来定义`<div>`的样式，以实现特定的布局设计...
jquery实现动态改变css样式的方法分析
01-21
本文实例讲述了jquery实现动态改变css样式的方法。分享给大家供大家参考，具体如下： jquery 几乎成了现在开发WEB应用的标准JS库，这与其简单性和易用性是分不开的。作为一个后端开发人员，要做一些前端页面时，CSS ...
css样式总结，持续更新
BMG-Princess
05-11 2076
状态驱动的动态 CSS 内核浏览器私有属性 el-tree中更改鼠标移动时、点击时和失去焦点时的背景色 关于背景色 表格 去掉定位： 换行总结 三元表达式 根据渐变的两个色值+据百分比，取对应的色值。...
CSS 样式书写规范,css样式书写规范
weixin_42535703的博客
08-04 5155
在工作当中css样式是非常重要的，但是咋样书写css样式更重要。一、css书写规范1、定位属性：position display float left top right bottom overflow clear z-index2、自身属性：width height padding border margin background3、文字样式：font-fami...
CSS——CSS样式的几种写法
weixin_56226042的博客
10-19 5397
CSS概念：Cascading Style Sheet，简称为css，中文名称层叠样式表或者级联样式表，主要指的是用来装饰HTML页面的一种技术。 在页面开发的时候，一般CSS有如下几种写法： -->在标签的属性style中编写 -->在页面中的style标签中编写 -->在页面外的XX.css文件中编写，使用link标签引入 -->使用@import导入需要的css文件 一、行内样式 行内样式，又叫做标签样式，主要是写在标签的style属性上，好处是优先级别较高，坏
css样式的格式是什么,css样式的书写格式详解示例
weixin_42356803的博客
08-03 1036
css的书写格式一共有三种行内样式：意思是在行内中写样式例如说用行内样式编写我的颜色只适用于(字体颜色和背景颜色)和里面的标签，但不适用于之外的例如:head，title，之类的标签内嵌样式:使用style，把所有样式都卸载style里面。例如说：p{color:red;background:blue;border:1px solid green;}用内嵌方式编写我的样式外联样式:通俗点就是外部样...
CSS 样式详解
运维@小兵的博客
01-30 1432
文章目录一、CSS介绍二、CSS使用方法`2.1.内联方式（行内样式）``2.2.内部方式（内嵌样式），在head标签中使用``2.3.外部导入方式（推荐），在head标签中使用`三、选择器`3.1.元素`3.1.1.示例1：h1元素设置样式3.1.2.示例2：多个元素设置样式3.1.3.示例3：子元素会继承最高级元素所有属性`3.2.ID`3.2.1.特点：3.2.2.第一步：给标签指定id3.2.3.第二步：针对id设置样式`3.3.类`3.3.1.第一步：给标签指定类3.3.2.第二步：针对类设置样式
css简析
low666的博客
05-12 1932
css选择器 标签选择器：针对一类标签（如：body,div,p,ul,li） ID选择器：针对某一个特定的标签使用（如：id=“demo”） 类选择器：针对你想要的所有标签使用（如：class=“demo”） 通用选择器（通配符）：针对所有的标签都适用（如：*号） 后代选择器（继承选择器）：用空格隔开（如：div p,注意两选择器用空格键分开） 交集选择器（组合选择器）：（如：.head .head_logo,注意两选择器用空格键分开）。 并集选择器：（群组选择器）：用逗号隔开 伪类选择器：（如：就是链
css的三种样式分析之优缺点
月月猴的博客
06-08 5086
css----(cascading (层叠) , style(样式),sheets(表))—修饰html css的写法: 行内样式:—直接将样式属性写在开始标签style属性中 <div style="属性名称:属性值;属性名称:属性值;"> 缺点:1.结构样式没有分离 不利于后期维护 2.样式不能重复使用(推荐不使用) </div> 内嵌样式–在...
Html基础学习之标签和样式
chunjunlu的专栏
07-05 531
1.tag标签(一般成对出现包含元素):h1(header)主标题,h2副标题,p(paragraph)段落.img(image)图片自封闭标签src="url"    注释标签 2.style样式:1)inline style内嵌样式 style="properyname:propertyvalue;", 2)style:a.tag style tagname{propertyname:
【基于MPC飞行器最佳控制】针对固定翼飞行器的最短时间航迹的最佳控制策略，考虑航路点约束研究（Matlab代码实现）
最新发布
11-23
【基于MPC飞行器最佳控制】针对固定翼飞行器的最短时间航迹的最佳控制策略，考虑航路点约束研究（Matlab代码实现）内容概要：本文围绕基于模型预测控制（MPC）的固定翼飞行器最短时间航迹优化展开研究，重点考虑航路点约束条件下的最佳控制策略。通过建立飞行器动力学模型，结合MPC算法框架，实现对飞行轨迹的实时优化与精确控制，旨在最小化飞行时间的同时满足路径精度与安全性要求。文中提供了完整的Matlab代码实现方案，涵盖系统建模、约束处理、目标函数构建及数值求解等关键环节，有助于读者深入理解MPC在飞行器轨迹规划中的实际应用。; 适合人群：具备自动控制、航空航天或机器人等相关背景，熟悉Matlab编程，有一定优化算法基础的研究生、科研人员及工程技术人员。; 使用场景及目标：①掌握MPC在飞行器轨迹优化中的建模与实现方法；②学习如何处理航路点约束与最短时间目标的多目标优化问题；③为无人机、固定翼飞行器等自主导航系统的开发提供算法支持与仿真验证手段； 阅读建议：建议结合Matlab代码逐段分析算法实现流程，重点关注状态空间建模、预测时域设置、约束条件编码及QP求解器调用等核心步骤，并可通过修改航路点序列或权重参数进行仿真实验，加深对MPC调控机制的理解。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值