甜橘子，专注成都网站制作网站设计与营销型网站建设与优化
QQ :532337155
电话：028-86922220
color属性：设置文本文字颜色。用法如下：
创新互联建站是专业的同安网站建设公司，同安接单;提供成都做网站、成都网站建设,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行同安网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!
color：颜色值;
color属性可以设置的合法颜色值包括：16进制颜色值（例：#ffffff），rgb颜色值【例：rgb(0,0,0)】，rgba颜色值【例：rgb(0,0,0,0.5)，0.5表示透明度】，hsl颜色值【例：hsl(120,65%,75%)】，hsla颜色值【hsl(120,65%,75%,0.3)，0.3表示透明度】。
2、css文本文字行高（行间距）的属性
line-height属性：设置行间的距离（行高）。用法如下：
line-height：值;
具体cssline-height属性是如何设置文本文字的行间距，大家可以参考之前的文章【css如何设置行间距？css文本文字的行间距设置】，希望对大家有所帮助。
3、css设置文本文字的水平对齐方式的属性
text-align属性：设置元素中的文本文字的水平对齐方式。用法如下：
text-align:left||right||center||justify;
left：设置文本文字左对齐。默认值：由浏览器决定。
right：设置文本文字右对齐。
center：设置文本文字居中对齐。
justify：实现两端对齐文本效果。
4、css文本缩进属性
text-indent属性：设置文本缩进。
具体csstext-indent属性是怎样设置文本缩进的，大家可以参考【css如何实现首行缩进效果？text-indent属性实现首行缩进】。
5、设置文本文字装饰效果
text-decoration属性：定义添加到文本的修饰。
说明：
这个属性允许对文本设置某种效果，如加下划线。如果后代元素没有自己的装饰，祖先元素上设置的装饰会“延伸”到后代元素中。
用法：
text-indent：none||[underline(下划线)||overline(上划线)||line-through(中划线)]||blink;
none：默认值，定义标准的文本。
underline：定义文本下的一条线。
overline：定义文本上的一条线。
line-through：定义穿过文本下的一条线。
blink：定义闪烁的文本。
6、文本字符的大小写转换属性
text-transform属性：控制文本字符的大小写。
用法：
text-transform:uppercase(全大写)||lowercase(全小写)||capitalize(首字母大写)||none;
7、文本文字间距的属性
word-spacing属性：设置文字或单词之间的间距，单词之间的间距=word-spacing+空格大小。
letter-spacing属性：设置字母间的间隔。
8、文本文字阴影的属性
text-shadow属性：向文本文字设置阴影
首先确保你的class或id没错，另外样式是不是兼容，可以在浏览器审查元素，看有没有加载到样式，或者看是不是样式被覆盖了。希望能帮到你
可以用css3中新增的选择器“[attribute=value]”来同时选中指定的属性的标签。
1、新建html文档，添加5个input标签，其中第一个和最后一个“type”属性的属性值为“text”：
2、在head标签和body标签之间添加style标签，添加代码“input[type=text]”，“input”指的是标签名，“type”指的是属性名，“text”指的是属性值，这个就会把所有属性名为“type”、属性值为“text”的input标签选中：
3、为被选择的标签设置背景色为红色，这时属性值为“text”的第一个标签和最后一个标签背景色都变成了红色：
定义CSS样式 (三种方式)
一、在head标签中加载一个CSS文件示例head link rel="stylesheet" type="text/css" href="style.css" //head
此例使用了link标签。
abbr { font-size:12px;}.text10pxwhite { font-size:10px; color: #FFFFFF;}
style.css的内容
二、直接把CSS内容写在HTML文件的head标签中示例head style type="text/css" abbr { font-size: 12px; } .text10pxwhite { font-size: 10px; color: #FFFFFF; } /style/head
此例使用了style标签。
两种方法是殊途同归的(但是推荐使用第一种方法).
三、使用style属性对标签加载样式示例p style="font-size: 12px;color: #000;"使用css/p
此例使用了标签的style属性。
外部样式表
当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。
head
link rel="stylesheet" type="text/css" href="mystyle.css"
/head
内部样式表
当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部分通过 style 标签定义内部样式表。
head
style type="text/css"
body {background-color: red}
p {margin-left: 20px}
/style
/head
内联样式
当特殊的样式需要应用到个别元素时，就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。
p style="color: red; margin-left: 20px"
This is a paragraph
/p
CSS样式分为：内联式css样式、嵌入式css样式、外部式css样式。
对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教程等，望大家能以学习为目的，每天阅读一篇文章，了解身边的技术。陪有梦想的人一起成长！