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

css样式引入方式，及常用设置标签样式相关推荐

徐志摩题要求：•使用外部引入CSS样式的方式为网页设置样式 •标题使用＜h3＞标签，其他文本均放在段落标签＜p＞中 •使用标签选择器设置标题h3的字体颜色为#ddf111 •使用ID选择器设置p段
徐志摩题要求: •使用外部引入CSS样式的方式为网页设置样式 •标题使用<h3>标签,其他文本均放在段落标签<p>中 •使用标签选择器设置标题h3的字体颜色为#ddf111 • ...
CSS样式引入方式和部分CSS样式的设置
一.三种引入方式以及其应用场景 1.行间样式,当样式非常少.在一组选择器内需要优先样式,缺点是不是人看的代码样式,影响布局结构的视觉效果 a.写在起始标签的style属性里,各样式之间用": ...
python 全栈开发，Day46(列表标签,表格标签,表单标签,css的引入方式,css选择器)
一.列表标签列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,"无序列表"的 ...
Day46（列表标签，表格标签，表单标签，css的引入方式，css选择器）
一.列表标签列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,"无序列表"的 ...
好程序员HTML5前端教程-css的引入方式和选择器
好程序员HTML5前端教程-css的引入方式和选择器 01.引入css方式(重点掌握) 行内样式内接样式外接样式 3.1 链接式 3.1 导入式 css介绍现在的互联网前端分三层: HTML:超 ...
css的引入方式和选择器
目录 1.css介绍 2.css的引入方式 3.css的元素选择器 1.基本选择器 2.组合选择器 3.属性选择器 4.伪类选择器 5.伪元素选择器 1.css介绍层叠样式表(英文全称:Cascad ...
css层叠引入方式有,前端1-----CSS层叠样式表了解,css的引入方式,三大选择器(标签,类,id),高级选择器...
前端1-----CSS层叠样式表了解,css的引入方式,三大选择器(标签,类,id),高级选择器一丶CSS简介叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTM ...
前端1-----CSS层叠样式表了解,css的引入方式,三大选择器(标签,类,id),高级选择器...
前端1-----CSS层叠样式表了解,css的引入方式,三大选择器(标签,类,id),高级选择器一丶CSS简介叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTM ...
html 三种插入css样式的方式
三种插入css样式的方式一.外链式引入css样式二.内嵌式使用css样式三.行内式引入css样式一.外链式引入css样式在head标签中使用<link rel="styles ...

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

一. 三种样式引入方式

二. 设置标签样式，基本示例

css样式引入方式，及常用设置标签样式相关推荐

最新文章

热门文章