CSS书写位置

时间: 2019-11-20阅读: 504标签: 样式

css 书写位置

行内样式,style标签link标签


行内样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css书写位置</title>
</head>
<body>
    <p style="color: red;">生当作人杰,死亦为鬼雄</p>
</body>
</html>

注意这句:

<p style="color: red;">生当作人杰,死亦为鬼雄</p>

p 标签有 style 属性,可以给p标签设置样式,这种称为行内样式,又叫内联样式。

注意: 除了 body 元素之外的标签,所有HTML标签都能设定style属性。行内样式只对当前元素起作用,不方便复用,假如另一个元素也要使用相同的样式,那么只能复制一份,不推荐使用

如下:两个标签内的相同样式,使用行内样式只能复制一份。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css书写位置</title>
</head>
<body>
    <p style="color: red; font-size: 30px">生当作人杰,死亦为鬼雄</p>
    <p style="color: red; font-size: 30px">至今思项羽,不肯过江东</p>
</body>
</html>


style标签

为了解决上面的问题,使用style标签可以解决,将样式写入到style标签里面,各个元素可以复用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css书写位置</title>
    <style type="text/css">
        p {
            color: red;
            font-size: 30px
        }
    </style>
</head>
<body>
    <p>生当作人杰,死亦为鬼雄</p>
    <p>至今思项羽,不肯过江东</p>
</body>
</html>

这里面主要关注的是:

  <style type="text/css">
        p {
            color: red;
            font-size: 30px
        }
   </style>

在style标签中,p 是要选中的标签名称,大括号里面的是样式,上面的意思是所有 p 标签内容都设置为红色、30个像素大小。这里就解决了在同一个文本中样式不能复用的问题。但是如果想在不同的文件中复用样式呢?这种方式不能解决。


link标签

为了解决不同文件共享同一种样式,link 标签出现了,这需要我们把css写在外部,然后html文件引入样式即可,做到了结构和样式的分离。

首先需要编写 css 样式文件: style.css,内容如下:

p {  
    color: red;  
    font-size: 30px  
}

然后在 html 文件中引入即可:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css书写位置</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <p>生当作人杰,死亦为鬼雄</p>
    <p>至今思项羽,不肯过江东</p>
</body>
</html>

这里最关键的是:

<link rel="stylesheet" type="text/css" href="style.css">

link 的前两个属性是固定的,href 属性是要引入外部css的相对位置。如果还有别的 html 文件想用到这个样式文件,同样也引入即可,实现了样式复用的效果,提高了访问速度。

注意:link标签在同一个文档中可以加载多个外部样式。


总结

上面我们使用了三种方式为 html 标签添加样式,归结起来就三种:

1.元素内部: 行内样式
2.文档内部: style标签
3.外部样式: link标签

一般工作中都是使用外部样式,其余两种可以在学习测试的时候使用,不建议在生产工作中使用。

站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/6956

关闭

原生js获取、添加、修改_非行间css样式

在html中样式分为:浏览器默认样式,引用样式(link外部样式文件,stle标签定义样式)、行间样式(及节点style属性定义的样式)。这篇文章主要讲解使用原生js获取、添加非行间css样式。

什么是层叠样式表?

层叠样式表(Cascading Style Sheets)简称CSS,它是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

css样式大全,完整的Css样式大全(整理)

CSS样式被称为为“层叠样式表”,是一种网页制作做不可或缺的技术,是用于装饰网页,达到设计效果的一种样式语言。

JS设置CSS样式的几种方式

用JS来动态设置CSS样式,常见的有以下几种:直接设置style的属性 某些情况用这个设置 !important值无效;直接设置属性(只能用于某些属性,相关样式会自动识别)

css z-index的层级关系

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。注释:元素可拥有负的 z-index 属性值。

好看css搜索框样式_分享8款纯CSS搜索框

最简单实用的CSS3搜索框样式,纯CSS效果无需任何javascript,其中部分搜索框在点击的时候有动画特效,搜索框的应用也是比较普通的,代码如下!

引入CSS样式的三种方式

行内式:该语法中style是标记的属性,实际上任何HTML标记都拥有style属性,用来设置行内式。内嵌式<style>标记一般位于<head>标记中的<title>标记之后,也可以把它放在HTML文档的任何地方。

为什么css初始化中不推荐使用 *(通配符)

在进行css初始化的时候,因为我们图方便而使用了*{},为什么不推荐使用:这里我个人理解涉及到css权重问题,举例说明:

vue样式加scoped后不能覆盖组件的原有样式解决方法

为了vue页面样式模块化,不对全局造成污染,建议每个页面的style标签加上scoped,表示他的样式只属于当前的页面,父组件的样式不会泄漏到子组件中。但是scoped也会造成一些额外的负担

美化修改radio、checkbox、select的样式

原理:大致原理都是使用原生的checkbox或input标签,在其后面设置相关联的label元素。给<input>元素设置为透明,然后通过定位让用户看到的是<label>元素,利用css的原生属性来判断用户的操作,设置选中后的label样式

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!