html之CSS设计（文本、边框、列表标签、display设置、内外边距）

文章目录

一、文本属性
二、边框属性
三、列表标签
四、display设置
五、内外边距

本篇文章主要介绍CSS设计中的文本属性、边框边距、列表标签、display的几种用法，还有一个最容易被忽视的点，就是内外边距的设定，在网页设计中，边距的控制是极为重要的。（在“二、边框边距”中有各种边框样式总结）

一、文本属性

1、属性

文本大小：font-size: 10px;
对齐方式：text-align: center;
文本行高：line-height: 200px;
垂直对齐方式：vertical-align:－4px （只对行内元素有效，对块级元素无效）
首行缩进：text-indent: 150px;
字母间距：letter-spacing: 10px;
单词间距：word-spacing: 20px;
首字母大写：text-transform: capitalize;

2、测试代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>div{height:100px;background-color: chartreuse;text-align:center;line-height:100px;}</style>
</head>
<body><div>一个文本属性<p>一个P标签</p>
</div></body>
</html>

二、边框属性

1、属性

边框粗细：border-width:5px;
边框样式：border-style:dashed;
边框颜色：border-color: red;
简便写法：border:5px dashed red;

2、边框样式总结
无边框
点线式边框
槽线式边框
脊线式边框
内嵌效果的边框
突起效果的边框
破折线式边框
直线式边框
双线式边框

3、测试代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.div1{width:1000px;height:100px;border:5px dashed red;/*border-width:5px;*//*border-style:dashed;*//*border-color: red;*/border-left-color:chartreuse;border-bottom-width:10px;border-right-style:solid;}</style>
</head>
<body><div class="div1"></div></body>
</html>

三、列表标签

1、属性

<ol>是有序列表
<ul>是无序列表
<dl>是多级标签
… <dt>
… … <dd>

2、测试代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>ol{list-style: none;}ul{list-style: circle;}</style>
</head>
<body><ol><li>大笨钟</li><li>小狐仙</li><li>黑煤球</li>
</ol><ul><li>扬州炒饭</li><li>铁板烧</li><li>鸡排套餐</li>
</ul><dl><dt>四川省</dt><dd>成都市</dd><dd>绵阳市</dd><dd>眉山市</dd><dd>广安市</dd><dd>德阳市</dd>
</dl>
</body>
</html>

四、display设置

1、属性

隐藏内容：display:none
转化为块级标签：display:block
转化为内联标签：display:inline
既是块级又是内联：display:inline-block

2、测试代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>/*当有需要同种样式时，可以同时设置*/.div1,p,span,a{width:100px;height: 100px;}/*不同种样式的地方，再做细调*/.div1{background-color: green;/*display:inline;*//*隐藏标签：*//*display:none;*/}p{background-color: blue;/*display:inline;*/}span{background-color: red;display:inline-block;}a{background-color: yellow;display:inline-block;}/*减少块级标签间的间距，有默认间距的加负数就可以靠的更近*/.div2{word-spacing:-8px;}</style>
</head>
<body><div class="div1">divvvvvvv</div>
<p>ppppppppp</p><div class="div2"><span>spannnnnn</span><a href="">aaaaaaaa</a>
</div></body>
</html>

五、内外边距

1、属性

margin外边距：用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的
padding内边框：用于控制内容与边框之间的距离
border外边框：围绕在内边距和内容外的边框
content内容：盒子的内容，显示文本和图像

2、边框位置图解

3、测试代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>/*设置body标签的边框（其实body与html之间也有间隙）*/body{border:3px solid darkblue;/*将body与html之间的间隙去掉*/margin:0px;}.div3{width:500px;height: 150px;background-color: midnightblue;}.div_father{background-color: paleturquoise;border:3px solid darkgreen;}.div1{width: 200px;height: 200px;background-color: cyan;border:20px solid red;padding:20px;/*margin:50px;*/margin-bottom:20px;margin-top:20px;}.div2{width: 200px;height: 200px;background-color: yellow;border:10px dashed darkblue;}</style>
</head>
<body><div class="div3"></div>
<div class="div_father"><div class="div1">I am div one</div><div class="div2">I am div two</div>
</div></body>
</html>

html之CSS设计（文本、边框、列表标签、display设置、内外边距）相关推荐

【CSS】盒子模型案例 ( 盒子模型尺寸计算 | 盒子模型水平居中 | 盒子模型内外边距设置 | 背景图片及位置设置 | 盒子嵌套设置 )
文章目录一.实现效果二.基本 HTML 结构三.设置最外层盒子样式 ( 盒子模型内外边距设置 ) 四.设置标题盒子样式 ( 盒子模型尺寸计算 | 盒子模型水平居中 ) 五.设置列表盒子样式 ( ...
CSS边框、边距、轮廓（边框宽度/颜色/各边/简写属性/圆角边框/内外边距/高度宽度/框模型/轮廓宽度/颜色/属性/偏移）——万字长文|一文搞懂
目录 CSS边框 CSS 边框属性 CSS 边框样式实例 CSS 边框宽度实例特定边的宽度实例 CSS 边框颜色实例特定边框的颜色实例 HEX 值实例 RGB 值实例 HSL 值实 ...
html盒子左右边框边距,CSS盒子模型、内外边距、边框、行高、背景
1.盒子模型所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子,也就是一个盛装内容的容器.每个矩形都由元素的内容.内边距(padding).边框(border)和外边距(margin)组成. ...
前端笔记（5）盒子模型，边框，内外边距，盒子模型布局，ps基本操作，列表样式，圆角边框，盒子阴影
css样式表/层叠样式表(3) (1)盒子模型 (2)盒子边框 (3)表格的细线边框 (4)内边距padding 内盒尺寸计算(元素实际大小) padding不会影响盒子大小的情况 (5)外边距mar ...
2021-04-05 web前端CSS之权重，盒子边框内外边距
视频学习:黑马程序员pink老师笔记:层叠性相同选择器给设置相同的样式--如果样式冲突,就近原则样式不冲突,不会层叠 <!DOCTYPE html> <html lang=&q ...
css --- [读书笔记] 盒模型(边框、内外边距)
说明源代码学习盒子模型(css重点) css学习三大重点: css盒子模型. 浮动. 定位目标: 能说出盒子模型由哪四部分组成: 内容.边框.内外边距能说出内边距的作用,设置不同数值分别代表 ...
CSS盒子模型（内容区、边框、内外边距）
一.盒子模型 1.什么是盒子模型.为什么要设置盒子模型,盒子模型具体怎么构成,怎么设置? 把各种元素布局到页面,就像想买个桌子,放到家里,要知道桌子的大小,形状,然后才能放到家里所以我们把所有的元素都 ...
html定义盒子距离顶底端像素,css - 盒子内外边距
css - 边距元素内边距内边距是指元素包含的内容离元素边框之间的间距,内边距不能设负值.内边距(padding).(边框)border都会撑大盒子,在浏览器中显示的元素的尺寸可能包含了盒子的pa ...
【css】浮动和定位对元素的宽度-外边距或其他元素的影响
一.width:auto和width:100%的区别 1.width:100%的作用是占满它的参考元素的宽度.(一般情况下参考元素 == 父级元素,这里写成参考元素而不是父级元素,在下面我会再细说) ...

html之CSS设计（文本、边框、列表标签、display设置、内外边距）

文章目录

一、文本属性

二、边框属性

三、列表标签

四、display设置

五、内外边距

html之CSS设计（文本、边框、列表标签、display设置、内外边距）相关推荐

最新文章

热门文章