css样式引⼊⽅式,及常⽤设置标签样式
⼀. 三种样式引⼊⽅式
1. 内联式-直接写在div标签中,不推荐⽤
<div >
你好,我叫韩妹妹<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>
你好,我叫韩妹妹
text align center
</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,右对齐}
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论