css样式语法,css基础语法格式

CSS字体与文本样式详解

学习导航

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教程等，望大家能以学习为目的，每天阅读一篇文章，了解身边的技术。陪有梦想的人一起成长！

相关问答

Q1: css的基本语法

css的基本语法

cascading stylesheet(级联样式表)。为网页提供外观（也就是，网页的表现形式）。将网页的外观写在一个css文件里，方便页面代码的维护（将表现与数据分离）。为方便大家学习css，我为大家分享css的基本语法如下：

css的基本语法

选择器{

属性1:属性值1;

属性n:属性值n;

符合选择器要求的标记，会添加对应的样式。

Chrome浏览器为SVG和CSS添加GPU加速功能

互联网有消息透露，谷歌正在为Chrome浏览器增加新的GPU加速功能。Chrome18浏览器将内建开关选项，让消费者选择使用GPU硬件加速基于矢量的SVG图形和CSS过滤器，让Chrome浏览器在未来网页显示上获得突破性速度，并且达成惊人的视觉效果。

Chrome浏览器的SVG和CSSGPU加速支持Windows，Mac，Linux和谷歌的Chrome操作系统，但目前这个功能仍然主要是实验性质，因为只有几个少数网站部署了SVG和CSSGPU加速。

但也有信息表示，tomshardware测试发现Chrome这项功能在显示目前网页方面，显示速度并没有出现任何显着增加，在WebVizHTML5基准测试当中出现了不稳定和崩溃问题。

评论表示，虽然SVG和CSSGPU加速还有待完善，但是Mozilla火狐、微软IE和其他版本浏览器之间的竞争，肯定会推动这种技术快速发展和完善。

设置容器中的内容垂直居中css代码

如实例1设置网页整体居中的代码中内容是居容器的顶部的，而在表格布局时默认是垂直居中的，当我们需要垂直居中的时候该怎么办呢？别害怕，跟我来，也是比较简单的，只用设置容器内的行高就行了。

line-height:500px;

!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"""

htmlxmlns=""

head

metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/

title标准之路;/title

style

#layout{width:778px;margin:0auto;text-align:center;border:1pxsolid#44b6dc;background:#e1edfb;height:500px;line-height:500px;}

/style

/head

bodypid="layout"标准之路 /p

/body

/html

提示：可以先修改部分代码后再运行

这是一种方法，另外和种方法就是设置的`它内边距padding了，自己可以试试哟～～

CSS对不同浏览器的兼容性解决办法

CSS 对不同浏览器的兼容性解决办法由于CSS 在不同浏览器中存在兼容性问题，所以在使用 p+CSS 布局中，可能导致相同的内容在不同浏览器中出现不同的显示效果，为了解决这些方面的问题，以下针对CSS 某些属性的用法提出相应的一些解决办法。 1、页面居中问题在IE 浏览器下，可以通过定义CSS 样式body {text- align: center;}来实现页面居中，但在FireFox（以下简写为FF）浏览器下此属性就失效了。解决办法：使用"margin- left: auto; margin- right : auto; " 、padding 属性在不同浏览器的显示问题当给p 设置padding 属性后，在FF 浏览器中会导致 width 和height 增加(p 的实际宽度=p 宽+Padding), 但在 IE 浏览器中width 和height 不会增加，这就导致相同的内容在不同浏览器中出现不同的显示效果。解决办法：给p 设定IE、FF 两个宽度，在IE 的宽度前加上IE 特有标记" * " 号。例如： #pwidth{ padding:5px; width:100px; *width:110px; } 3、奇怪的间隙问题有的时候我们明明设好了高度，可在IE6 上却看见一些奇怪的间隙。解决办法：试试在有空隙的p 上加上"font- size:0px;" 4、关于手形光标要将页面内容的光标显示为手形，通常的做法是使CSS 属性cursor: hand; 但这于做法只适用于IE. 解决办法：cursor: pointer; 5、浮动在IE6 产生双倍距离问题例如： #box{ float:left; width:100px; margin:0 0 0 100px; } 这种情况之下IE6 会产生200px 的距离。解决办法：在以上属性的基础上，加上display:inline，使浮动忽略。6、UL 和FORM标签的padding 与margin ul 标签在FF 中默认是有padding 值的, 而在IE 中只有 margin 默认有值。FORM标签在IE 中,将会自动margin 一些边距,而在FF 中margin 则是0；解决办法：css 中首先都使用这样的样式ul,form{margin:0; padding:0;}。 7、截字省略号 .hh { - o- text- overflow:ellipsis; text- overflow:ellipsis; white- space:nowrap; overflow:hidden; } 这个CSS 是定义当内容溢出宽度后会自行的截掉超出部分的文字，并以省略号结尾，但注意Firefox 并不支持。

p+CSS 网页布局的分类

p+CSS 网页布局的分类1、一列固定宽度一列布局是所有布局的基础，也是最简单的布局方式，用 p+CSS 布局的代码如下： XHTML 代码： 一列固定宽度CSS 代码： #main1 { width: 400px; height: 300px; background- color: #EEEEEE; border: 1px solid #999999; } 2、一列自适应宽度自适应的布局能够根据浏览器窗口的大小自动改变其宽度和高度值，是网页设计中一种非常灵活的布局形式，用 p+CSS 布局的代码如下： XHTML 代码： 一列自适应宽度CSS 代码： #main2 { width: 70%; height: 300px; background- color: #EEEEEE; border: 1px solid #999999; } 3、一列固定宽度居中页面整体居中是网页布局中最常见到形式，在传统的表格布局中，使用TABLE 的align="center" 属性来实现，在p+CSS 布局中采用如下代码来实现：XHTML 代码： 一列自适应宽度CSS 代码： p+CSS 网页布局方法探析。如今的网页设计考虑得更多的是搜索引擎以及给用户带来更多的便利，传统的TABLE 网页布局由于其庞大的HTML 代码，使得其在搜索引擎方面显得有些无能为力，而用p+CSS 进行网页布局具有代码精简的优点使得其在这方面又体现出更多的优势。但是又由于CSS 对不同浏览器存在兼容性问题，所以对于初学者来说，在使用p+CSS 进行网页布局过程中可能会遇到各种问题，本文就给大家探讨几点p+CSS 布局的技巧。4、二列固定宽度在有一列固定宽度布局的基础上，实现二列固定宽度也就很简单了，用p+CSS 布局的代码如下：XHTML 代码： 左侧右侧CSS 代码： #left { width: 150px; height: 300px; background- color: #EEEEEE; border: 1px solid #999999; float:left; } #right{ width: 400px; height: 300px; background- color: #EEEEEE; border: 1px solid #999999; float:left; } 5、二列固定宽度居中从一列固定宽度居中的布局方法中，我们就不难完成二列固定宽度居中了，可以使用一个居中的p 作为容器，将二列分栏的p 放置在容器中，从而就实现二列的居中显示。 p+CSS 的代码如下： XHTML 代码： 左侧右侧CSS 代码： #main{ width:554px; margin:0px auto; #left { width: 150px; height: 300px; background- color: #EEEEEE; border: 1px solid #999999; float:left; } #right{ width: 400px; height: 300px; background- color: #EEEEEE; border: 1px solid #999999; float:left; } 这里仅列举了一列、二列的布局方式，实际上三列、四列等多列的布局方式也和二列的布局方式的实现方法是一样的。事实上不管多么复杂的页面设计，在p+CSS 网页布局中，均是以p 为基础，通过一列、二列、三列这些基础的布局方式的相互组合与嵌套来实现复杂的布局。

p+CSS网页布局技巧：设置网页整体居中的css代码

以前用表格布局时设置网页居中非常方便，把表格对齐方式设置为居中就行了，就这么简单，现在呢，用p+CSS样式表控制，好像不是那么容易了，其实也很简单，只不过方式不同而已。

style

#layout { width:778px; margin:0 auto; text-align:center;}

/style

p id="layout"标准之路;/p

请看这段代码，宽度为适合800×600分辨率浏览器的宽度，margin:0 auto; 这句代码就是让居中了，意思是外边距上下设置为0，左右设为自动。这样它就居中了。

那么可能你要问了，text-align:center;为什么还要让内容居中呢？呵呵，别着急，这句是为了适应IE6以下版本的浏览器而加的，IE6以下对margin:0 auto;不能解析为居中，所以用这种方式来补救，以下在设计内容时再用 text-align:left;就可以了。

注：margin和padding的值的顺序为顺时针上右下左，如margin:1px 2px 3px 4px;还可以缩写为上下、左右，如本例，如果为margin:0px;则是各边都为0

提示：可以先修改部分代码后再运行

;

Q2: 谁知道CSS的基本语法

css 样式由选择符和声明组成，而声明又由属性和值组成，如下图所示：

选择符：又称选择器，指明网页中要应用样式规则的元素。

声明：在英文大括号“｛｝”中的的就是声明，属性和值之间用英文冒号“：”分隔。当有多条声明时，中间可以英文分号“;”分隔，如下所示：

p{font-size:12px;color:red;}

注意：

1、最后一条声明可以没有分号，但是为了以后修改方便，一般也加上分号。

2、为了使用样式更加容易阅读，可以将每条代码写在一个新行内，如下所示：

p{

  font-size:12px;

  color:red;

}

Q3: css基础语法

CSS 的出现， 实现了网页的结构和样式分离。美容师！

CSS 规则由两个主要的部分构成： 选择器， 以及一条或多条声明

CSS 规则由两个主要的部分构成： 选择器， 以及一条或多条声明

以内嵌式样式表为例

vs code快捷键： ctrl+/

CSS的英文可以大写，也可以小写

建议全部小写！

颜色名就是使用颜色的英文单词进行表示

更多的颜色名可以通过查询手册得到

颜色值指使用具体颜色的数值表示。 包括： rgb 模式和十六进制模式写法

常用颜色的 rgb 色值：

常用颜色的十六进制色值：

注： 十六进制颜色值简写模式： 如果红、 绿、 蓝三个原色的色值每一个都是由重叠的数字组成， 可以将重叠的数字简化成一个进行书写。 如： 红色 #f00

如果不设置字体属性， 不同的浏览器有自己的默认字体

首选字体需要根据设计图确定， 最后需要设置备用字体

缺点： id 选择器只能实现单选， 不能帮我们完成多选的功能

原子类： 在css中提前设置一些类名， 每个类选择器后面只添加一条css样式属性， 这些属性会在页面中常被使用， 后期可以不需要多次书写属性， 只要将对应的类名添加给需要的标签即可

实际工作中， 通常我们有一个使用规律： 类上样式(CSS)， id 上行为(JavaScript)

优点： 减少 class 属性的使用， 选择效率更高

继承性是一个很好的性质， 可以将页面中出现最多的文字样式设置给一个较大的祖先级标签比如 body， 后期所有的后代标签都可以从 body 进行继承