CSS的样式

我是楠楠

于 2019-04-04 15:22:02 发布

阅读量122

点赞数

分类专栏：技术文章文章标签： CSS的样式

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/qq_40208605/article/details/89024116

版权

技术文章专栏收录该内容

930 篇文章 12 订阅

订阅专栏

1.1.1 边框和尺寸：border、width、height

l border ：设置边框的样式

n 格式：宽度样式颜色

n 例如：style=”border:1px solid #f00” ，1像素实边红色。

l 样式取值：solid 实线，none 无边，double 双线等

l width、height：用于设置标签的宽度、高度。

[AppleScript] 纯文本查看 复制代码

01

02

03

04

05

06

07

08

09

10

11

12

13

<style type="text/css">

div{

border:1px solid #000; /*1像素，实边，黑色*/

width:200px;

height:200px;

}

</style>

1.1.2 转换：display

HTML提供丰富的标签，这些标签被定义成了不同的类型，一般分为：块标签和行内标签。

l 块标签：以区域块方式出现。每个块标签独自占据一整行或多整行。

n 常见的块元素：<h1>、<div>、<ul>等

l 行内元素：不必在新的一行开始，同时也不强迫其他元素在新的一行显示。

n 常见的行内元素：<span>、<a> 等

在开发中，希望行内元素具有块元素的特性，需要使用display进行转换

[AppleScript] 纯文本查看 复制代码

01

02

03

04

05

06

07

08

09

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

选择器{display:属性值}

常用的属性值：

inline：此元素将显示为行内元素（行内元素默认的display属性值）

block：此元素将显为块元素（块元素默认的display属性值）

none：此元素将被隐藏，不显示，也不占用页面空间。

例如：

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

span{

border :1px solid #000;

width:100px;

height:40px;

}

</style>

</head>

<body>

<span>显示1-1</span>

<span>显示1-2</span>

<span style="display: block;">显示2-1</span>

<span style="display: block;">显示2-2</span>

</body>

</html>

1.1.3 字体：color、font-size

[AppleScript] 纯文本查看 复制代码

1	`color：颜色，字体颜色`

例如：

[AppleScript] 纯文本查看 复制代码

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

<div style="height: 50px;width:200px;border:1px solid #000;">

<a href="">点击</a>

<a href="" style="text-decoration: none;">点击</a>

</div>

<div style="height: 50px;width:200px;border:1px solid #000;">

<a href="" style="line-height: 50px;">点击</a>

<a href="" style="color: red;">点击</a>

</div>

1.1.4 背景色：background-color

[AppleScript] 纯文本查看 复制代码

01

02

03

04

05

06

07

08

09

10

11

<ul style="background-color: #999;color: #FFF;">

<li>点击</li>

<li>点击</li>

<li style="background-color: #000;">点击</li>

<li>点击</li>

</ul>

1.1.5 布局：float、clear

通常默认的排版方式，将页面中的元素从上到下一一罗列，而实际开发中，需要左右方式进行排版，就需要使用浮动

[AppleScript] 纯文本查看 复制代码

1

2

3

4

5

6

7

8

9

选择器{float:属性值;}

常用属性值：

left：元素向左浮动

right：元素向右浮动

none：元素不浮动（默认值）

由于浮动元素不再占用原文档流的位置，所以它会对页面中其他元素的排版产生影响。如果要避免影响，需要使用clear属性进行清除浮动。

[AppleScript] 纯文本查看 复制代码

01

02

03

04

05

06

07

08

09

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

选择器{clear:属性值;}

常用属性值：

left：不允许左侧有浮动元素（清除左侧浮动的影响）

right：不允许右侧有浮动元素（清除右侧浮动的影响）

both：同时清除左右两侧浮动的影响

例如：

<div>

<div>区域1-1</div>

<div>区域1-2</div>

</div>

<hr />

<div>

<div style="float: left;">区域2-1</div>

<div style="float: left;">区域2-2</div>

</div>

<div style="clear:both"></div>

<hr />

<div>

<div style="float: left;">区域2-1</div>

<div style="float: left;">区域2-2</div>

<div style="float: left;">区域2-3</div>

</div>

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS的样式

1.1.1边框和尺寸：border、width、heightl border ：设置边框的样式n 格式：宽度样式颜色n 例如：style=”border:1px solid #f00”，1像素实边红色。l 样式取值：solid 实线，none 无边，double 双线等l width、height：用于设置标签的宽度、高度。[AppleScript]纯文本查看...
复制链接

扫一扫

专栏目录

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

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