一. 三种样式引入方式
1. 内联式-直接写在div标签中,不推荐用
<div style="color:red;font-size:20px;font-family:'Microsoft Yahei';line-height:30;"> 你好,我叫韩妹妹<br> 你叫什么名字 </div>
2. 内嵌式,一般用在首页,加载速度快
把style属性写在head标签中, 使用标签选择器,比如div,这样,定义的样式会应用到所有body中div标签中的内容
<head> <style type="text/css"> div{ color:red; font-size:20px; font-family:'Microsoft Yahei'; line-height:30; } </style> </head> <body> <div> 你好,我叫韩妹妹 </div> </body>
3. 外联式,实际项目中用这个
新建一个样式文件夹css,并在其中新建一个css文件,比如main.css,在其中写入 div{ color:red; font-size:20px; font-family:'Microsoft Yahei'; line-height:30; } 然后在原先网页上头部写入如下, 同样会把所有body中<div>标签中的内容应用指定样式 <head> <link rel="stylesheet" type="text/css" href="css/main.css"> </head>
二. 设置标签样式,基本示例
1. 如果文本中有某个词汇使用了<em>标签,要想使<em>标签中的文本不倾斜,可以在main.css中定义标签选择器<em>,如下,那么文本中所有的<em>标签都不会倾斜了 em{ font-style:normal; } 2. 使用span标签使某个字段加粗,同样在main.css中写入 span{ font-weight:bold; } 3. 不想让<h2>样式加粗,并且用微软雅黑字体,在main.css中写入 h2{ font-family:'Microsoft Yahei'; font-weight:normal; } 4. 使用font,用一句来设置是否加粗,字体大小,行高,字体类型,需要按顺序写 div{ font:normal 30px/40px 'Microsoft Yahei'; #normal不写的话,默认是normal,对于<h1>也适用 } 5. 去掉<a>标签中的下划线 a{ text-decoration:none; } 6. 设置<div>标签中的文字首行缩进2个字 div{ color:red; font-size:20px; text-indent:40px; #想缩进几个,就是几倍的font-size值 font-family:'Microsoft Yahei'; line-height:30; } 7. 设置文本居中,也就是设置文字水平对齐方式 h2{ font:normal 30px/40px 'Microsoft Yahei'; text-align:center #默认值是left, 也可以写成right,右对齐 }