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


    一. 三种样式引入方式

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

      

  • 相关阅读:
    <%%>,<%!%>,<%=%>,<%@%>,<jsp:include><%@ include%>区别
    struts2学习
    struts2标签
    OGNL
    Andriod XML Editor cannot process this input
    Error 错误: 找不到或无法加载主类
    Class<T> 与T区别
    poi
    POI-java读取Excel(包含合并单元格)
    SQL-字符串连接聚合函数
  • 原文地址:https://www.cnblogs.com/regit/p/8888993.html
Copyright © 2020-2023  润新知