一、常用的应用文本的css样式
-
1.1、文本的css样式其实也就是给一段文本设置 字体大小、颜色、背景色、是否加粗等等，如下：
-
color设置文字的颜色，如： color:red; -
font-size设置文字的大小，如：font-size:12px; -
font-family设置文字的字体，如：font-family:'微软雅黑';建议使用'Microsoft YaHei',中文容易乱码 -
font-style设置字体是否倾斜，如：font-style:'normal'; 设置不倾斜，font-style:'italic';设置文字倾斜
image
-
font-weight设置文字是否加粗，如：font-weight:bold; 设置加粗 font-weight:normal 设置不加粗 -
line-height设置文字的行高，设置行高相当于在每行文字的上下同时加间距， 如：line-height:24px;
image
-
font同时设置文字的几个属性，写的顺序有兼容问题，建议按照如下顺序写： font：是否加粗 字号/行高 字体；如：font:normal 12px/36px 'Microsoft YaHei';
注意：
font值要求顺序的,不能错，否则会失效-
text-decoration设置文字的下划线，如：text-decoration:none; 将文字下划线去掉
image
-
text-indent设置文字首行缩进，如：text-indent:24px; 设置文字首行缩进24px
image
-
text-align设置文字水平对齐方式，如text-align:center 设置文字水平居中
建议：遇到不会的去 w3school 查找
-
二、css颜色表示法与CSS样式选择器
-
2.1、css颜色表示法(主要有三种)
-
第一种：
颜色名表示，比如：red 红色，gold 金色color: red; -
第二种：
rgb表示，比如：rgb(255,0,0)表示红色color: rgb(255,0,0); -
第三种：
16进制数值表示，比如：#ff0000 表示红色，这种可以简写成 #f00color: #ff0000;
-
-
2.2、CSS样式选择器，常用的选择器有如下几种
-
<1>、标签选择器：(不推荐使用)，此种选择器影响范围大，建议尽量应用在层级选择器中。如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS选择器</title> <style type="text/css"> div { color: green; } </style> </head> <body> <div>这是第 1 个div</div> <div>这是第 2 个div</div> <div>这是第 3 个div</div> </body> </html>提一下：
*{font-size: 20px;},其中的*代表所有的选择器，范围太广，不建议使用，了解一下即可
image
提示：从上面我们看出来，div 选择器会影响所有的 div 标签，如何区分不同的div标签来设置样式，我们看接着往下看
-
<2>、id选择器：(不推荐使用)，通过id名来选择元素，元素的id名称不能重复，所以一个样式设置项只能对应于页面上一个元素，不能复用，损耗资源，id名一般给程序使用，所以不推荐使用id作为选择器。如下
image
id选择器在使用的是：
#+id的名字+{},如上图 -
<3>、类选择器：(推荐使用)，通过类名来选择元素，一个类可应用于多个元素，一个元素上也可以使用多个类，应用灵活，可复用，是css中应用最多的一种选择器。类选择器可以先定义再使用，类选择器使用的是
.,如下代码<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS选择器</title> <style type="text/css"> #div1{ color: palegreen; font-size: 20px; } .fontSet{ font-size: 28px; } </style> </head> <body> <div id="div1" class="fontSet">这是第 1 个div</div> <div class="fontSet">这是第 2 个div</div> <div>这是第 3 个div</div> </body> </html>
image
提一下： class 后面可以设置多个 name，name之间用 空格 隔开，如下
<div class="fontSet colorSet">这是第 2 个div</div>
image -
<4>、层级选择器：主要应用在选择父元素下的子元素，或者子元素下面的子元素，可与标签元素结合使用，减少命名，同时也可以通过层级，防止命名冲突。如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>层级选择器</title> <style type="text/css"> .box{ color: green; } .box em{ color: brown; font-style: normal; } </style> </head> <body> <div class="box">层级选择器：主要应用在选择父元素下的<em>子元素</em>，或者子元素下面的<em>子元素</em>，<br/> 可与标签元素结合使用，减少命名，同时也可以通过层级，防止命名冲突。</div> </body> </html>- 提示：标签选择器一般都是用在层级选择器里面，不要单独使用，个别的地方可以单独使用
- 当然你也可以在内嵌标签里面再定义class,在样式里面进行多层 定义，如上面的
.box em,一般来说最多4层，再多性能就不好了
层级选择器是用 逗号 隔开的
-
<5>、组选择器：多个选择器，如果有同样的样式设置，可以使用组选择器。如下:格式是：各个选择器之间用
,隔开<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>组选择器</title> <style type="text/css"> .box1,.box2,.box3{ font-size: 25px; text-indent: 40px; } .box1{ color: red; } .box2{ color: brown; } .box3{ color: gold; } </style> </head> <body> <div class="box1">我是第 1 个div</div> <div class="box2">我是第 2 个div</div> <div class="box3">我是第 3 个div</div> </body> </html>
image
提示：三个标签的 字体的大小、首行缩进的大小都是一样的，只有字体的颜色不一样，我们可以采用如上的组选择器方式来定义样式
-
<6>、伪类及伪元素选择器：常用的伪类选择器有hover，表示鼠标悬浮在元素上时的状态，伪元素选择器有before和after,它们可以通过样式在元素中插入内容。如下
-
伪类选择器 (在给标签设置鼠标悬浮在其上面的样式，如下面的
.box1:hover)<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>伪类与伪元素的使用</title> <style type="text/css"> .box1{ color: brown; font-size: 20px; } .box1:hover{ color: red; font-size: 28px; } </style> </head> <body> <div class="box1">我是第 1 个div</div> </body> </html> -
伪元素选择器 ：(主要是下面 ：
before与after的使用),都是在添加内容<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>伪类与伪元素的使用</title> <style type="text/css"> .box2,.box3{ color: brown; font-size: 20px; } .box2:before{ content: "前面的内容"; color: green; } .box3:after{ content: "后面的内容"; color: green; } </style> </head> <body> <div class="box2">我是第 2 个div</div> <div class="box3">我是第 3 个div</div> </body> </html>
image
-
-
网友评论