美文网首页js css html
爬虫_030_在HTML中如何使用css样式

爬虫_030_在HTML中如何使用css样式

作者: 为宇绸缪 | 来源:发表于2023-02-12 21:24 被阅读0次

在HTML中如何使用css样式
1、内联方式(行内样式)
就是在HTML的标签中使用style属性来设置css样式
格式: <html标签 style="属性:值;属性:值;....">被修饰的内容</html标签>
<p style="color:blue;font-family:隶书">在HTML中如何使用css样式</p>
特点:仅作用于本标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行内样式</title>
</head>
<body>
<p style="border: 1px solid red;">Yu is a good man</p>
<p style="color: red; font-size: 40px;">Yu is a good man</p>
<p style="width: 100px;height: 100px;border: 1px solid red;border-radius: 50px;background-color: aqua"></p>
</body>
</html>

2、内部方式(内嵌样式)
就是在head标签中使用<style type="text/css">....</style>标签来设置css样式
格式:

 <style type="text/css">
    ....css样式代码
 </style>

特点:作用于当前整个页面
HTML选择器,也就是给标签名称即可,会给所有的p都设置此样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内嵌样式</title>
    <style>
        /*HTML选择器,也就是给标签名称即可,会给所有的p都设置此样式*/
        p{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            border-radius: 50px;
            background-color: aqua;
        }
    </style>
</head>
<body>
<p></p>
<p></p>
<h2></h2>
</body>
</html>

3、外部导入方式(外部链入)
(推荐)就是在head标签中使用<link/>标签导入一个css文件,在作用于本页面,实现css样式设置
格式:

<link href="文件名.css" type="text/css" rel="stylesheet"/>

特点:作用于整个网站,可以进行整体修改

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内嵌样式</title>
    <link rel="stylesheet" href="basicCSS.css">
</head>
<body>
<p></p>
<p></p>
<h2>Hello</h2>
</body>
</html>

basicCSS.css

h2 {
    width: 100px;
    height: 100px;
    border: 1px solid red;
    border-radius: 50px;
    background-color: aqua;
}

相关文章

  • 爬虫_030_在HTML中如何使用css样式

    在HTML中如何使用css样式1、内联方式(行内样式)就是在HTML的标签中使用style属性来设置css样式格式...

  • HTML样式CSS-11

    如何使用CSS 实例一: 实例二: 实例三: 如何使用CSS 内联样式 HTML 样式实例 - 字体, 字体颜色 ...

  • HTML 样式-CSS

    CSS(Cascading Style Sheets),用于渲染HTML元素标签的样式 如何使用CSS 内联样式-...

  • CSS3的引入和选择器

    一、HTML中引入css 1、行内样式 使用style引入html样式示例: 2、内联样式表 CSS代码写在 的 ...

  • 开始使用CSS

    CSS 指层叠样式表 (Cascading Style Sheets)。 样式定义如何显示HTML元素。 本文使用...

  • css样式表回忆录

    css是一套处理html显示样式的方法,可以独立于html文件之外使用,也可以在html中嵌入使用它。 样式优先级...

  • CSS和JS简介-HTML5极速入门

    CSS CSS,又称层叠样式表,用于渲染HTML元素标签的样式。 我们在创建HTML文档时,如果不使用样式美化页面...

  • 样式- CSS

    CSS 可以通过以下方式添加到HTML中: 内联样式- 在HTML元素中使用"style" 属性内部样式表 -在H...

  • checkbox默认样式

    html部分 保存密码 css部分 使用伪类元素对checkbox样式进行修改 边框样式在before中修改,"\...

  • CSS(了解)

    Cascade Style Sheet 层叠样式表 css和html的结合方式?也就是学习如何在HTML里如何使用...

网友评论

    本文标题:爬虫_030_在HTML中如何使用css样式

    本文链接:https://www.haomeiwen.com/subject/vhadkdtx.html