HTML与css 关于style位置与功能

最新推荐文章于 2021-06-17 16:06:24 发布
最新推荐文章于 2021-06-17 16:06:24 发布
阅读量2.6k 收藏 1
点赞数
文章标签： css html
原文链接：https://www.cnblogs.com/regit/p/8888993.html
版权

标签定义及使用说明

<style> 标签定义 HTML 文档的样式信息。

在 <style> 元素中，您可以规定在浏览器中如何呈现 HTML 文档。

每个 HTML 文档能包含多个 <style> 标签。

提示和注释

提示：如需链接外部样式表，请使用 <link> 标签。

注释：如果没有使用 "scoped" 属性，则每一个 <style> 标签必须位于 head 头部区域。

 

 

 

来自网上摘抄部分：css样式可以放在head或body标签中的，大站数据多，不可能维护到每个静态页面上，而且有时候会出现不同的标签，所以会在body出现css样式，而且他们对网站维护不只有几个人，而是几个团队，如前端、后端、编辑等等

 

有三种方法可以在站点网页上使用样式表：
外部样式：将网页链接到外部样式表。
内页样式：在网页上创建嵌入的样式表。
行内样式：应用内嵌样式到各个网页元素。
每一种方法均有其优缺点：当要在站点上所有或部份的网页上一致地应用相同样式时，可使用外部样式表。在一个或多个外部样式表中定义样式，并将它们链接到所有网页，便能确保所有网页外观的一致性。如果人们决定更改样式，只需在外部样式表中修改一次，而该更改会反映到所有与该样式表相链接的网页上。通常外部样式表以 .css 做为文件扩展名，例如 Mystyles.css。当人们只是要定义当前网页的样式，可使用嵌入的样式表。嵌入的样式表是一种级联样式表，“嵌”在网页的 <HEAD> 标记符内。嵌入的样式表中的样式只能在同一网页上使用。使用内嵌样式以应用级联样式表属性到网页元素上。如果网页链接到外部样式表，为网页所创建的内嵌的或嵌入式样式将扩充或覆盖外部样式表中的指定属性。

 

一. 三种样式引入方式

 

1. 内联式-直接写在div标签中,不推荐用

1

2

3

4

<div style="color:red;font-size:20px;font-family:'Microsoft Yahei';line-height:30;">

你好，我叫韩妹妹<br\>

你叫什么名字

</div>

　　

 

2. 内嵌式，一般用在首页，加载速度快

把style属性写在head标签中, 使用标签选择器,比如div，这样，定义的样式会应用到所有body中div标签中的内容

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<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. 外联式，实际项目中用这个

1

2

3

4

5

6

7

8

9

10

11

12

新建一个样式文件夹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

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

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

}

臻于一处登峰造极
关注
HTML CSS的使用以及style标签和属性
09-02 7676
CSS(Cascading Style Sheets)用于渲染HTML元素标签的样式。 CSS可以通过以下方式添加到HTML中： 内联样式：在HTML元素中使用“sytle”属性 内部样式表：在HTML文档头部<head>区域使用<style>元素来包含CSS 外部引用：使用外部CSS文件 最好的方式是通过外部引用CSS文件。 本文主要讨论以内联样式将CSS添加到...
javascript、style在html中的位置
cxy_zj97的博客
07-27 1634
html基础 js位置 在head标签中写js 但是影响页面加载速度，等待js加载完毕进行页面渲染 <head> <script type="text/javascript" src="file1.js"></script> <link rel="stylesheet" type="text/css" href="styles.css"> </head> 在body标签中写js 为了尽量减少对整个页面
爬虫
qq_42424228的博客
09-17 320
定义 爬虫：使用python程序模拟浏览器向服务器发送请求，接受服务器响应 爬虫与反爬虫：想要获取大量数据，需要频繁的向服务器发请求，当服务器检测到短时间 请求次数过多，会评定为恶意请求，直接封禁IP。 为了解决封禁IP的问题，使用IP代理池，可以频繁更换IP，但IP代理池并不稳定，而且需要付费 爬虫时应尽量规避特大型网站，以一二线网络公司为主 爬虫库安装： python的爬虫、数据分析、机器学习都需要安装对应的库 pip 是安装爬虫库的工具，，python安装库的管道 爬虫的请求库reques..
html 布局-相对位置及绝对位置
热门推荐
alane1986的专栏
01-15 4万+
 来源：http://zhykhs.javaeye.com/blog/338563   Div + CSS Example, Wayhomes Blog  body,td,th{font-family:Verdana;font-size:9px;} -->    　position: absolute; 　top: 5px; 　righ
爬虫文章换行问题
weixin_37281967的博客
01-01 5344
原来爬出来的文章没有换行，在每个段落后增加\n，结果出来两个\n，因为字符换行的不同，需要使用\r\n来在windows下显示，比如： title=html.xpath('//h1/text()')[0] contents=html.xpath('//*[@id="content"]/text()') content='' for i in contents: ...
HTML css/style/关键字位置不同
weixin_30505043的博客
06-13 216
<head> <meta charset="UTF-8"> <title>Title</title> <style> .box{ background-color:red; width: 100px; ...
CSS_style.rar_jsp css sty_style_style css_style.css
09-22
本资源“CSS_style.rar”提供了一个关于CSS样式的全面指南，特别是聚焦于“jsp_css_sty”、“style”、“style_css”以及“style.css”这些关键概念。以下是针对这些主题的详细解释： 1. **JSP（JavaServer Pages）...
CSS-style.rar_css_style_style.css
最新发布
09-24
"CSS-style.rar"是一个压缩包文件，其中包含了关于CSS的资源，如"css_style_style.css"可能是一个示例样式文件，而"dhtmlet_css2.chm"则可能是CSS的参考手册或者教程。 "css_style_style.css"是CSS样式文件的典型...
html-css.zip_style
09-20
你可以精确的控制主页里的每一个元素，比如一个字，用CSS你可以给它控制它的前景色、背景色、背景图片、在页面的精确位置，四周加入边框等。可以说CSS的功能是无比的强大。W3C 也极力向世界推广这一先进技术。
HTML5+CSS3 精美登陆界面源码
01-19
在这个“HTML5+CSS3 精美登陆界面源码”压缩包中，包含了三个精心设计的登录界面，每一个都充分利用了HTML5的新特性与CSS3的动画效果，以提供卓越的用户体验。 首先，我们来详细了解一下HTML5。HTML5是超文本标记...
style.css
12-31
style.css
style.min.css
07-04
使用v-charts组件时，需要在css文件加载的css文件。
CSS style属性大全
02-14
CSS style属性大全,使css使用起来不在一头雾水
css模板 通用库style.css
08-17
css模板 通用库style.css 通用库style.css
HTML与CSS前台页面设计
10-30
HTML（HyperText Markup Language）...总之，HTML与CSS是前端开发的基本技能，掌握它们能让你构建出美观、功能丰富的网页。通过不断学习和实践，你可以进一步提升页面设计的水平，满足用户对视觉效果和交互体验的需求。
CSS学习笔记——样式书写位置
weixin_43900407的博客
01-25 1642
1.内部样式表（内嵌式） 将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义，style标签一般放在head标签中，也可以放在HTML文档的任何地方。 <style type="text/CSS"> div { font-size:24px; color:red; } </style> 2.内联样式（行内式） 通过标签的...
python爬虫新闻_爬取新闻 - python代码库 - 云代码
weixin_40001025的博客
11-23 176
[python]代码库from urllib.request import urlopenfrom urllib.parse import urljoinfrom re import findall, sub, S #S表示正则表达式中的.可以匹配换行符from os.path import basename,isdirfrom os import mkdirurl = r'网站地址'...
html中style布局放哪,CSS样式表与格式布局详解
weixin_42124743的博客
06-17 1430
样式表CSS(Cascading Style Sheets 层叠样式表)，作用是美化HTML网页。内联样式表： 例：内联样式表内嵌样式表：必须写在head标签里例：p{ 样式;}hei外部样式表：新建一个CSS文件用来放置样式表 在HTML中 右键--CSS样式--附加样式表例：*{ margin:0px; padding:0px;} //网页边距为0像素 字体间距为0像素.mian /...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值