css样式引入方式，及常用设置标签样式

最新推荐文章于 2021-12-15 19:06:47 发布

weixin_30408309

最新推荐文章于 2021-12-15 19:06:47 发布

阅读量341

点赞数

原文链接：http://www.cnblogs.com/regit/p/8888993.html

版权

一. 三种样式引入方式

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，右对齐
}

转载于:https://www.cnblogs.com/regit/p/8888993.html