一. 三种样式引入方式

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

  

css样式引入方式,及常用设置标签样式的更多相关文章

  1. 前端(二)—— CSS的引入方式、长度与颜色单位、常用样式、选择器

    CSS的引入方式.长度与颜色单位.常用样式.选择器 一.CSS的三种引入方式 1.行间式 <!doctype html> <html> <head> <met ...

  2. CSS的引入方式和样式

    CSS的引入方式和样式 一.样式 行内样式 内接样式 外接样式(1.链接式 2.导入式) <!--行内样式--> <div> <p style="color: ...

  3. python 全栈开发,Day46(列表标签,表格标签,表单标签,css的引入方式,css选择器)

    一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...

  4. Day46(列表标签,表格标签,表单标签,css的引入方式,css选择器)

    一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...

  5. CSS的引入方式

    再用HTML编写的文本中,有是没能达到我们想要的效果,此时此刻我们可以用过引用CSS来控制!这不仅使得效果好而且代码层次清晰.CSS的引入方式可以分为四类: 1.链入外部样式表,就是把样式表保存为一个 ...

  6. 前端1-----CSS层叠样式表了解,css的引入方式,三大选择器(标签,类,id),高级选择器

    前端1-----CSS层叠样式表了解,css的引入方式,三大选择器(标签,类,id),高级选择器 一丶CSS简介    叠样式表(英文全称:Cascading Style Sheets)是一种用来表现 ...

  7. HTML三种样式引入方式

    HTML三种样式引入方式   HTML有三种样式引入方式:行内样式(inline Styles).嵌入式样式表(Embedded Style Sheets).外部样式表(External Style ...

  8. CSS的引入方式和复合选择器

    CSS的引入方式 样式表 优点 缺点 范围 行内样式表 书写方便 结构样式混写 控制一个标签 内部样式表 部分结构和样式相分离 没有彻底 控制一个页面 外部样式表 完全实现结构和样式分离 需要引入 控 ...

  9. css样式清零及常用类

    css样式清零及常用类 @charset "utf-8"; /*CSS Reset*/ /*"微软雅黑","\5FAE\8F6F\96C5\9ED1& ...

随机推荐

  1. vue 项目搭建

    vue init webpack-simple 工程名字<工程名字不能用中文> 简单部署 vue init webpack 工程名字<工程名字不能用中文> 完整部署

  2. react native android 真机调试

    http://localhost:8081/index.android.bundle?platform=android 晕死,设备掉线了 C:\Users\ZHONGZHENHUA\.android\ ...

  3. 53-C++ CH08 01

     http://lx.lanqiao.cn/problem.page?gpid=T407 算法训练 C++ CH08 01   时间限制:1.0s   内存限制:256.0MB      问题描述 已 ...

  4. Python学习笔记_从CSV读取数据写入Excel文件中

    本示例特点: 1.读取CSV,写入Excel 2.读取CSV里具体行.具体列,具体行列的值 一.系统环境 1. OS:Win10 64位英文版 2. Python 3.7 3. 使用第三方库:csv. ...

  5. Setuptool+pip安装

    https://pypi.python.org/pypi/setuptools 1. 下载ez_setup.py文件,cmd进入安装目录: 2. python setup.py install htt ...

  6. Lua与C交换

    1.C调用Lua函数 (1) 首先要进行Lua的初始化,这个主要是lua_open和luaL_openlibs函数 (2)然后是解析并编译lua的代码,这个主要是luaL_dofile函数  (3) ...

  7. idea hibernate jpa 生成实体类

    0,添加mysql数据库连接 1,生成个hibernate.cfg.xml 2,打开Persisitence 3,Import Databases Schema 4,选择表生成实体类

  8. JavaWeb项目导入MyEclipse后变为JAVA项目项目【解决方法】

    问题描述:之前有个项目是Java web的项目,但是后来我导入到我电脑里的myEclipse里后就变成了Java项目.查找了资料解决了,网上大部分都是说在eclipse里解决这个问题,在myEclip ...

  9. HDU 6127 Hard challenge (极角扫描)

    题意:给定 n 个点,和权值,他们两两相连,每条边的权值就是他们两个点权值的乘积,任意两点之间的直线不经过原点,让你从原点划一条直线,使得经过的直线的权值和最大. 析:直接进行极角扫描,从水平,然后旋 ...

  10. C# 单例模式(Singleton)

    摘要 在我们日常的工作中经常需要在应用程序中保持一个唯一的实例,如:IO处理,数据库操作等,由于这些对象都要占用重要的系统资源,所以我们必须限制这些实例的创建或始终使用一个公用的实例,这就是我们今天要 ...