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

  

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/414210.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

微信支付分开发流程

公司要用支付分信用免押功能&#xff0c;于是着手开发。 首先要与微信的技术人员对接&#xff0c;申请支付分功能&#xff0c;申请成功之后&#xff0c;会给商户发送服务ID&#xff1b;等1到3个工作日内自行登录商户平台查看是否有开通成功&#xff0c;如果3个工作日依旧没有支…

运行银联支付系统demo

1、Demo下载 下载地址&#xff1a;https://open.unionpay.com/tjweb/acproduct/list?apiservId448 2、导入项目 注意&#xff1a;非maven项目&#xff0c;在导入idea、或者eclipse时请留意导入方式 3、修改配置 acp_sdk.properties 将backUrl、frontUrl修改为外网可访问的路径…

结对编程收获

结对编程收获 ——我和我的伙伴分到了Core组&#xff0c;他负责生成编写四则运算表达式函数&#xff0c;而我负责编写计算函数以及整体框架和接口 这一次结对编程不仅学到了不少编程技术&#xff0c;更在交流合作中发现了自己以往的问题&#xff0c;因为我一直以来是一个偏爱独…

工作283:从字典表获取数值

order_task() {getAction(/dict, {page: 1,limit: 10,query: {"keywords":"order_status"}}).then(res > {this.status res.data.items;console.log(1)console.log(this.status)})},

微信新的用户信息接口wx.getUserProfile,返回信息解密失败

**关于微信小程序新登录接口wx.getUserProfile的使用方法 和手机号码有几率解密失败的解决办法** 自从2021年4月15号微信发布了小程序登录、用户信息相关接口调整说明之后&#xff0c;4.15之后上线的产品需更改用户登录逻辑&#xff0c;这是比较操*的&#xff0c;尤其是产品逻辑…

Springboot整合ActiveMQ发送邮件

虽然ActiveMQ以被其他MQ所替代&#xff0c;但仍有学习的意义&#xff0c;本文采用邮件发送的例子展示ActiveMQ 文章目录1. 生产者1.1 引入maven依赖1.2 application.yml配置1.3 创建配置类ConfigQueue1.4 创建生产者类Producer1.5 启动类AppProducer2. 消费者2.1 引入maven依赖…

工作284:理解绑定逻辑

<custom-table v-loading"loading"element-loading-text"拼命加载中"element-loading-spinner"el-icon-loading" element-loading-background"rgba(0, 0, 0, 0.8)" size-changes"list" pagination-change"list&…

PHPStudy集成环境下使用laravel框架报错ERR_CONNECTION_REFUSED

环境&#xff1a;php7.2mysqlapachelaravel5.5 因为要搞个新项目&#xff0c;用了laravel&#xff0c;不是很熟悉这个框架&#xff0c;还用了laravel-admin后台系统&#xff0c;配置本地虚拟域名的时候&#xff0c;映射始终报错&#xff0c;能访问到项目跟目录&#xff0c;但是…

MQTT客户端库-Paho GO

为了加深理解&#xff0c;本文是翻译文章。原文地址 Paho GO Client   语言  GO协议EPL AND EDL官网地址http://www.eclipse.org/paho/API类型Asynchronous 描述 回到2013年10月&#xff0c;我转到了关于其他Paho MQTT客户端库的编写&#xff0c;并选择了作为一种新的语言去…

RabbitMQ简单介绍+Windows环境安装

文章目录 文章目录文章目录1、RabbitMQ简介2、RabbitMQ与其他MQ有什么不同3、RabbitMQ环境安装3.1 安装erlang3.2 安装rabbitmq-server4. RabbitMQ管理平台介绍1、RabbitMQ简介 RabbitMQ 是一个由 erlang 开发的 AMQP&#xff08;Advanced Message Queue &#xff09;的开源实…

工作285:判断绑定逻辑

/*绑定id逻辑分析*/dialog() {/*传给当前的account_id进行接收*/putAction("/account/" this.account_id "/bind_ff_account_id", {remote_account_id: this.BindData[this.form.index].id,pavg: this.BindData[this.form.index].avatar_url,plugin_key:…

对象(一)

基本特征&#xff1a;面向对象编程有三个基本特征&#xff1a;封装、继承、多态&#xff1b; 面向对象思想&#xff1a;JavaScript 语言是通过一种叫做 原型&#xff08;prototype&#xff09;的方式来实现面向对象编程的。对象&#xff08;object&#xff09;则是依靠 构造器&…

intellij idea 在Java控制台报java: 错误: 无效的源发行版:16

一共有三个地方要设置 第一个地方File->Project Structure->Project,全部修改为对应的JDK版本&#xff0c;例如如果是1.8&#xff0c;language level就选择8对应的包&#xff0c; 第二个地方File->Project Structure->Modules 也有个language level&#xff0c;一…

RabbitMQ六种队列模式-主题模式

前言 RabbitMQ六种队列模式-简单队列 RabbitMQ六种队列模式-工作队列 RabbitMQ六种队列模式-发布订阅 RabbitMQ六种队列模式-路由模式 RabbitMQ六种队列模式-主题模式 [本文] 从前面的几篇我们依次经历了 exchange 模式从 fanout > direct 的转变过程&#xff0c;在 fanout …

工作286:v-model没有值会报错

</span></el-row><el-form-item label"刊例价"><span>&#xffe5;</span> {{ form.price }}</el-form-item><el-form-item label"任务名称"><!-- {{form.name}}--><el-input :disabled"viewList…

exe4j打包jar包生成exe文件BUG日记

参考了很多资料,生成需要的包以及设置文件目录: 不过我用的是IntelliJ IDEA 2021.3.3,所以java打包成jar的步骤以及配置有点不同; 首先设置导出配置:File->Project Strure->Artifacts MANIFEST.MF最好保存在src目录下,避免生成的jar包再打包成Exe时找不到主类: …

工作283:抽离出新页面优化

<template><!--绑定了一个 控制是否为全屏fullscreen close-on-click-modal 是否通过点击model进行关闭 visible是否显示弹出框 close关闭按钮 --><el-dialog open"open" :title"fullTitle" width"80%" :fullscreen"false&q…

RabbitMQ六种队列模式-路由模式

前言 RabbitMQ六种队列模式-简单队列 RabbitMQ六种队列模式-工作队列 RabbitMQ六种队列模式-发布订阅 RabbitMQ六种队列模式-路由模式 [本文] RabbitMQ六种队列模式-主题模式 本文带大家了解 RabbitMQ 队列模式中的路由模式。 其实只要看过上篇发布模式后&#xff0c;相信路由…

CAS Client 3.2.1 配置详解

CAS Client 3.2.1 配置详解 http://www.pinhuba.com/casclient/101256.htm 摘要: CAS作为开源的单点登陆框架已经非常的流行了。由于它对已有系统的入侵性小&#xff0c;支持的语言多&#xff0c;备受广大开发者关注&#xff1b;CAS作为开源的单点登陆框架已经非常的流行了。由…

已经改成UTF-8了,git提交properties还是乱码

原因idea的File Encoding勾选了Transparent native-to-ascii conversion 如果团队中都勾选了则无所谓、如果有的勾选、有的没勾选合并代码会出现乱码。