带你了解CSS基础知识,样式

最新推荐文章于 2022-11-22 07:45:00 发布
最新推荐文章于 2022-11-22 07:45:00 发布
阅读量181 收藏
点赞数
原文链接：https://www.jb51.net/article/217100.htm
版权
本文详细介绍了HTML中嵌套使用CSS的三种方式：内联样式、样式块（内部样式）和外部样式表文件的链入。通过实例代码展示了每种方式的用法，包括设置元素的宽高、背景色、边框等样式，并列举了一些常用的CSS样式。此外，还强调了外部样式表文件在多个页面间的复用性和维护优势。
摘要由CSDN通过智能技术生成

这篇文章主要介绍了一些css基础知识关于CSS样式的分类介绍，包括内部样式，行内样式，外部样式等，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值

目录

什么是CSS

CSS(Cascading Style Sheet):层叠样式表语言。

CSS的作用是：

修饰HTML页面，设置HTML页面中的某些元素的样式，让HTML页面更好看。

在HTML页面中嵌套使用CSS的两种方式

第一种方式：在标签内部使用style属性来设置元素的CSS样式，这种方式称为内联定义方式。语法格式：

<标签 style=“样式名:样式值;样式名:样式值;样式名:样式值;…”></标签>

第二种方式：链入外部样式表文件，这种www.qmia.cn方式最常用。（将样式写到一个独立的xxx.css文件当中，在需要的网页上直接引入css文件，样式就引入了）语法格式：

1

2

3

4

5

6

这种方式易维护，维护成本较低。

        xxx.css文件

            1.html中引入了

            2.html中引入了

            3.html中引入了

            4.html中引入了

三种方式代码展示

内联定义方式

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

<!doctype html>

<html>

    <head>

        <title>HTML中引入CSS样式的第一种方式：内联定义方式</title>

    <head>

    <body>

        <!--

            width   宽度样式

            heght   高度样式

            background-color    背景颜色样式

            display     布局样式（none表示隐藏，block表示显示）

        -->

        <div style="width: 300px;height: 300px;background-color: #CCFFFF; display: block;

        border-color: red;border-width: 3px;border-style: solid"></div>

        <!--样式还可以这样写

            border: width style color

        -->

        <div style="width: 300px;height: 300px;background-color: #CCFFFF; display: block;

        border:  thick double yellow;  "></div>

    </body>

</html>

样式块方式

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

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

<!doctype html>

<html>

    <head>

        <title>HTML中引入样式的第二种方式：样式块方式</title>

        <style type="text/css">

            /*

                这是CSS的注释

            */

            /*

                id选择器

                #id{

                    样式名: 样式值；

                    样式名: 样式值；

                    样式名: 样式值；

                    ........

                }

            */

            #usernameErrorMsg{

                font-size: 12px;

                color: red;

            }

            /*

                标签选择器

                标签名{

                    样式名: 样式值;

                    样式名: 样式值;

                    样式名: 样式值;

                }

            */

            div{

                background-color: black;

                border: 1px solid red;

                width: 100px;

                height: 100px;

            }

            /*

                类选择器

                .类名{

                    样式名: 样式值;

                    样式名: 样式值;

                    样式名: 样式值;

                }

            */

            .myclass{

                border: 2px double blue;

                width: 400px;

                height: 30px

            }

        </style>

    </head>

    <body>

        <!--

            设置样式字体大小12px,颜色为红色

        -->

        <!--<span id="usernameErrorMsg" style="font-size: 12px;color: red">对不起，用户名不能为空！</span>-->

        <span id="usernameErrorMsg"">对不起，用户名不能为空！</span>

        <div></div>

        <div></div>

        <div></div>

        <!--class相同的可以认为是同一类标签。-->

        <br><br><br><br>

        <input type="text" class="myclass"/>

        <br><br><br><br><br>

        <select class="myclass">

            <option>专科</option>

            <option>本科</option>

            <option>硕士</option>

        </select>

    </body>

</html>

链入外部样式表文件

css文件

1

2

3

4

5

6

7

a{

    text-decoration: none;

}

#baiduSpan{

    text-decoration: underline;

    cursor: wait;

}

1

2

3

4

5

6

7

8

9

10

11

12

13

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>HTML中引入CSS样式的第三种方式：链入外部样式表文件</title>

        <!--引入css-->

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

    </head>

    <body>

        <a href="http://www.baidu.com">百度</a>

        <span id="baiduSpan">点击我链接百度</span>

    </body>

</html>

以下是常用的样式

边框

（1）

1

div{ border : 1px solid red; }

 （2）

1

div{ border-width : 1px; border-style : solid; border-color : red; }

隐藏

1

div{ display : none; }

字体

1

div{ font-size : 12px; color : red; }

文本装饰

1

a{ text-decoration : none; }

1

a{ text-decoration : underline; }

列表

1

ul{ list-style-type : none; }

设置鼠标悬停效果

1

:hover

定位

1

div{ position : absolute; left : 100px; top : 100px; }

鼠标小手

1

div{ cursor : pointer; }

总结

本篇文章就到这里了

m0_60156021
关注
style=“width: ___“ VS width=“___“
liuhao9999的博客
07-27 297
尽管它似乎是其他元素的有效属性声明，但它不会产生任何影响。建议直接或通过JavaScript设置画布的。CSS样式属性的优先级高于HTML属性。和属性可用于所有HTML元素。元素，它们不会产生相同的结果。属性，以避免画布被拉伸的问题。属性仅适用于某些元素，例如。属性必须是没有单位的正数。和属性，则将使用默认值。属性默认为300，属性。...
JavaScript之函数传参
weixin_45663697的博客
08-17 413
当函数里有定不下来的东西是可以使用传参 1.改变背景颜色 HTML+css #div1{width: 200px; height: 200px; background:red;} <body> <input type = "button" value = "变绿" onclick = "setColor('green');"/> <input type = "button" value = "变绿" onclick = "setColor('yellow');".
CSS设置style属性的3种方法
热门推荐
韬光养晦
09-14 1万+
CSS：层叠样式表 可以将css样式编写到元素的style属性当中： 1.将样式直接写到style属性中，这种样式我们称为内联样式，内联样式只对当前的元素中的内容起作用，内联样式不方便复用，不推荐使用。 eg： <p style="color:blue;font-size: 50px;">明月几时有，把酒问青天！</p> 2.也可以将CSS样式编写到head中的style...
style="width: ___" 与 width="___"
lio-zero 的博客
12-03 493
有两种方法可以定义图片的尺寸： 使用 height 或 width 属性： <img height="100" /> 或者在 CSS 样式中使用 height 或 width 属性： <img style="height: 100px" /> 区别 CSS width 和 height 属性可用于所有 HTML 元素。但 HTML width 和 height 属性...
style常见属性
qq_38211852的博客
05-12 8529
一、常用属性： 1、Height:设置DIV的高度。 2、Width:设置DIV的宽度。 例： 复制代码代码如下:&lt;div style="width:200px;height:200px;background-color:Black;"&gt; &lt;/div&gt; 3、margin:用于设置DIV的外延边距，也就是到父容器的距离。 例： 复制代码代码如下:&lt;div style="...
vue.js 获取当前屏幕的宽度_Vue动态获取width的方法
weixin_39984661的博客
12-19 2701
vue里想用Bootstrap的进度条，aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"style="width: 20%;">20%主要是把style="width: 20%;"变成动态获取的。:style="'width:' + percent + '%'"这样写就好了。也可是这样：用vue 获取动态元素的宽度。首页，要放在...
CSS基础样式
weixin_47782618的博客
04-05 535
1. 背景属性 1.1 background-color：设置背景颜色 值 说明 color 颜色值 transparent 默认值，透明 inherit 从父元素继承 1.2 background-image：设置背景图像 值 说明 url("url") 图像的url none 默认值，没有背景图像 inherit 从父元素继承 1.3 background-repeat：平铺背景图像的方式 值 说明 rep
一篇文章，带你详细了解CSS基础知识
PICACHU+++的博客
10-25 3634
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 [1] CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。 [2]
html&css入门基础知识点.pdf
10-04
HTML和CSS基础知识点 HTML是用来描述网页的一种语言，指的是超文本标记语言（Hyper Text Markup Language），它不是一种编程语言，而是一种标记语言。HTML使用标记标签来描述网页的结构和内容。 标记语言是一套...
【CSS】CSS文本样式【CSS基础知识详解】
@花无缺
11-22 4830
CSS文本样式最全指南，打造精品前端知识体系，详细解释每一个文本样式相关属性的使用，让CSS的知识清晰明了，每一个属性都有对应的完整代码实例，0基础入门前端！
CSS基础知识.pdf
10-04
【CSS基础知识详解】 CSS，全称为Cascading Style Sheets，中文通常翻译为“层叠样式表”，是用于控制网页布局和样式的规范。它弥补了HTML在表现层设计上的局限性，让网页设计更加灵活多样。自IE 3.0开始，浏览器...
css 基础知识总结以及demo
04-09
相对于“行内样式”和“内嵌样式”而言，“外链样式”即通过标签引用CSS样式有以下好处： 简化了DOM结构，实现了内容和表现的分离，使HTML和CSS文件结构更加清晰，利于维护 大大减少了CSS代码的编写量。项目越大，...
HTML新手入门（二）
Mr_MT1998的博客
06-02 351
HTML（二）表单属性actionmethod元素input标签select标签textarea标签button标签表格列表有序列表无序列表自定义列表 表单 属性 action 表示提交服务器的地址，跳转页面 若省略action属性，则会默认设置为当前页面 method 提交数据方式 get 请求参数在地址栏可见 长度受限 post 请求参数不可见（安全性高） 长度没有限制 元素 input标签 可通过设置type属性来选
css中style用法详解
hnas_better的专栏
11-23 2662
 css样式表按其所在位置分三种：1.内嵌样式表2.内部样式表3.外部样式表下面详细解释一下：1.内嵌样式表是写在使用它的标签(Tag)内的，例如要在标签中使用，其语法为：这段文字使用了内嵌样式表，更改了字体大小为20 2.内部样式表不同于内嵌样式表，其是写在html网页的标签之间的，所以它对本网页全部有效。应注意的是，因为它不是写在某一个标签内的，所以在写的时候要
关于前端学习(1)
qq_45796946的博客
10-25 685
前端学习第一部分 前端方向学习中遇见的问题： ul标签中写了style="text-align: center居中，li标签中的文本居中了，但是li的
input 的size=“”属性和style="width:" 的区别
明天的你会感谢今天的自己
09-30 8360
一般来说，这两个都可以用来设置input type=“text” 文本框的长度，但两者还是有区别：style="width:10px"的长度单位是px，size的长度单位是“字符”，看下图就知道： 当两者同时使用的时候，输入框的长度由style="width:100px" 决定（本人Chrome亲测）！！！...
IFRAME 元素 | iframe 对象
KM3945[BLOG]
10-09 1594
IFRAME 元素 | iframe 对象创建内嵌浮动框架。成员表下面的表格列出了 iframe 对象引出的成员。请单击左侧的标签来选择你想要查看的成员类型。标签属性/属性 显示: 标签属性/属性 行为 集合 事件 滤镜 方法 对象 样式 行为 描述 clientCaps 提供关于 Internet Explorer 支持的特性的信息，以及提供即用即装的方法。 download 下载文件并在下载完
考研复习-英语二真题考试题集-带答案
最新发布
09-14
英语二考研真题复习资料，带答案版
XHTML与CSS基础知识入门指南
本篇教程是关于XHTML与CSS基础知识的教学，旨在为有一定HTML和CSS基础的网页开发者提供一个从表格布局向Web标准（div+css）过渡的学习路径。对于初次接触网页制作的新手，需要具备基本的网页基础知识，包括了解表格...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值