189 8069 5689
CSS样式分为：内联式css样式、嵌入式css样式、外部式css样式。
创新互联建站主要从事网页设计、PC网站建设（电脑版网站建设）、wap网站建设（手机版网站建设）、响应式网站开发、程序开发、网站优化、微网站、微信小程序开发等，凭借多年来在互联网的打拼，我们在互联网网站建设行业积累了丰富的成都网站制作、成都网站设计、外贸营销网站建设、网站设计、网络营销经验，集策划、开发、设计、营销、管理等多方位专业化运作于一体。
对CSS三种样式定义及其实例：
内联式css样式。
内联式css样式表就是把css代码直接写在现有的HTML标签中，如下面代码：
1 p style="color:red"这里文字是红色。/p
css样式代码要写在style=""双引号中，如果有多条css样式代码设置可以写在一起，中间用分号隔开（英文状态下;）。
嵌入式css样式。
嵌入式css样式，就是可以把css样式代码写在标签之间。如下面代码实现把三个标签中的文字设置为红色：
1 style type="text/css"span{color:red;}/style
嵌入式css样式必须写在之间，并且一般情况下嵌入式css样式写在之间。
外部式css样式。
外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名（也可以为调用其他网站CSS）。
1 link href="style.css" rel="stylesheet" type="text/css" /
注意事项： 1、css样式文件名称以有意义的英文字母命名，如 main.css。 2、rel=”stylesheet” type=”text/css” 是固定写法不可修改。 3、标签位置一般写在标签之内。
掌握好三种CSS三种样式使用方法在Web开发中将节省很多时间。
学习导航
1、css中的长度与颜色
2、css中的文字属性
3、css中的文本属性
1、文字样式属性
font-family 字体属性
作用：元素内文字以什么字体来显示
语法：font-family:[字体1],[字体2],[......];
说明：含空格字体名和中文，用英文引号（"）括起；多个字体用英文逗号隔开；引号嵌套，外使用双引号，内使用单引号。
font-size 文字大小
作用：元素内文字大小
语法：font-size:绝对单单位，相相对单位
color 文字颜色
语法：颜色名|十六进制|RGB
font-weight 文字粗细
语法：font-weight:normal 正常 | bold 加粗 | bolder 加粗 | lighter 细体 | 100-900
说明：默认值：normal 400等同于normal,而700等同于bold
font-style 文字样式
作用：为元素内文字设置样式
语法：font-style:normal 正常显示 | italic 文字倾斜 | oblique 文字倾斜（基本不用）
font-variant 字体变形
作用：设置元素中文本为小型大写字母
语法：font-variant:normal 正常显示| small-caps 将英文大小写字母调成为同宽
font 属性简写
语法：font:font-style font-variant font-weight font-size/line-height font-family;
说明：值之间空格隔开，注意书写顺序。
2、CSS文本样式
text-align
作用：设置元素内文本的水平对齐方式
语法：tex-align:left 左对齐 | right 右对齐 | center 居中对齐 | justify 两端对齐
注意：该属性对块级元素设置有效
line-height
作用：设置元素中文本行高
语法：line-height:长度值 | 百分比
说明：一行文字的高度，行高指文本行的基线间的距离
文字基线
注意：基线并不是汉字文字的下沿，看图理解自行理解
行高和行距
行高：基线到基线的距离
行距：底线到顶线的距离
注意：看图自行理解
行框和行内框
注意：看图自行理解
vertical-align
作用：设置元素内容的垂直方式
语法：vertical-align:baseline | sub | super | top | text-top | middle | bottom | text-bottom | 长度 | 百分比
注意：看图自行理解
text-indent 首行缩进
3、文本样式属性
text-transform: capitzlize 首字母大写 | uppercase 字母大写 | lowercase 字母小写 | none 正常
text-decoration: underline 下划线 | overline 上划线 | line-through 删除线 | none 正常
综合实操案例
如果您觉得有用，记得在下方点赞、关注、留言，我会定期奉 上更多的惊喜哦，您的打赏支持才是我继续努力的动力，么么哒。
每日分享在学习过程中总结的学习经验，学习笔记，笔试题，HTML，CSS，JavaScript，jQuery教程，Vue教程，PHP教程，TinkPHP教程等，望大家能以学习为目的，每天阅读一篇文章，了解身边的技术。陪有梦想的人一起成长！
CSS的调用，按照CSS出现在页面的不同位置，可以分为3种方法：
元素中直接使用；
从页面头部调用；
采用链接的形式调用。
不同的调用方法有不同的写法和优先级。下面分别做一下介绍。
一、元素中直接使用
这种调用方式的写法如下：
元素名称 style="属性:属性值;"/元素名称
在样式中直接使用CSS，语法是使用style标签，在双引号中，样式的语法结构和独立样式表中完全相同。例如：
div style="width:240px;height:80px;background-color:#cccccc;text-align:center;font-size:14px"
示例：元素中直接调用。/div
该样式中定义了元素宽、高为360、80像素，背景色为灰色，字体大小为14像素。其应用到页面中的显示如图1。
二、从页面头部调用
从页面头部调用CSS是将CSS写在页面的head元素中，然后在页面中调用。其语法结构如下：
style
选择符{属性:属性值;}
/style
页面上的所有样式都可以写在style和/style中。使用这种方式调用CSS，在页面中必须有相应的调用代码。
其中，类选择符的调用代码如下：
元素名称 class="类选择符名称"/元素名称
ID选择符的调用代码如下：
元素名称 id="id 类选择符名称"/元素名称
下面我们来用一个示例演示一下。
head
titleCSS调用方法/title
style
.content{
background-color: #cccccc;
font-size: 14px;
width: 240px;
height: 80px;
color: Blue;
text-align: center;
}
/style
/head
body
div class="content"示例：从页面头部调用。/div
/body
该样式应用到页面的效果如图2所示。
三、采用链接的形式调用
采用链接的形式调用CSS通常有两种方法：
使用link元素
使用link元素调用CSS的语法如下：
link rel="stylesheet" href="css文件路径" type="text/css"/
其中rel="stylesheet"指这个link和其href之间的关联样式为样式表文件。type="text/css"指文件类型是样式表文本。
使用@import
使用@import调用和使用link元素调用的区别在于，使用@import的调用方法只能使用在样式文件中，即只能在调用的样式文件，或style元素中才能正常使用
CSS即层叠样式表（Cascading Style Sheets），是一种用来表现HTML或XML等文件样式的计算机语言。
CSS样式主要包含以下三种类型：
1、行内样式（内嵌样式）：结构的内部，即写在标签内的样式；写在标签的开始部分内部，style属性当中。
例：标记 style="样式的属性名1：样式的属性值1；属性名2：属性值2；......"/标记
2、内部样式（内联样式）：写在HTML页面内部，存放于head标记当中，样式写在style标记内。
例：style选择器 {属性名：属性值；属性名：属性值；......}/style
3、外部样式（外联样式）：写在css文件内。
例：link type="text/css" rel="stylesheet" href="css/main.css" /
扩展资料：
使用CSS样式的优点：
CSS有助于实现负责任的Web设计。CSS对开发者构建Web站点的影响很大，并且这种影响可能是无止境的。将网页的大部分甚至是全部的表示信息从HTML或XML文件中移出，并将它们保留在一个样式表中有诸多优点，如降低文件大小、节省网络带宽以及易于维护等。
此外，站点的表现信息和核心内容相分离，使得站点的设计人员能够在短暂的时间内对整个网站进行各种各样的修改。
CSS简化了网页的格式代码，外部的样式表还会被浏览器保存在缓存里，加快了下载显示的速度，也减少了需要上传的代码数量（因为重复设置的格式将被只保存一次）。
只要修改保存着网站格式的CSS样式表文件就可以改变整个站点的风格特色，在修改页面数量庞大的站点时，显得格外有用。这就避免了一个个网页的修改，大大减少了工作量。
参考资料来源：百度百科-CSS
在HTML超文本语言里css是一个功能格式样式；就像重点突出一样需要标注出来；你用的CSS按钮上的双引号可以·去掉！