前言：
此时同学们对“css设置行距”大约比较关怀，大家都需要分析一些“css设置行距”的相关文章。那么小编同时在网络上汇集了一些对于“css设置行距””的相关知识，希望咱们能喜欢，兄弟们快快来学习一下吧！1.1 CSS 语法
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。
selector {declaration1; declaration2; ... declarationN }选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。
selector {property: value}下面这行代码的作用是将 h1 元素内的文字颜色定义为红色，同时将字体大小设置为 14 像素。
在这个例子中，h1 是选择器，color 和 font-size 是属性，red 和 14px 是值。
h1 {color:red; font-size:14px;}下面的示意图为您展示了上面这段代码的结构：
image.png
1.1.1 字体属性：
属性 含义 属性值
font-family 字体 各种字体font-style 字体样式 italic、obliquefont-variant 小体大写 small-capsfont-weight 字体粗细 bold、bolder、lighter…font-size 字体大小 absolute、relative、%color 字体颜色 颜色值
1.1.2 颜色与背景属性：
属性 含义 属性值
Color 颜色 颜色值Background-color 背景色 颜色值Background-image 背景图案 图片路径Background-repeat 背景图案重复方式 Repeat-x | repeat-y | no-repeatBackground-attachment 背景的滚动 Scroll | fixBackground-position 背景图案初始位置 % | n em | top | left | right | bottom
1.1.3 文本属性:
属性 含义 属性值
word-spacing 单词间距 n emletter-spacing 字母间距 n emtext-decoration 装饰样式 underline| overline| line-through| blinkvertical-align 垂直方向位置 sub| super |top |text-top| middle| bottom| text-bottomtext-transform 转为其他形式 capitalize| uppercase| lowercasetext-align 对齐 left| right| center| justifytext-indent 缩进 n em| %line-height 行高 pixels、n em、%
1.1.4 边距属性:
属性 含义 属性值
margin-top 上边距 n em | %margin-right 右 n em | %margin-bottom 下 n em | %margin-left 左 n em | %
1.1.5 边框属性:
属性 含义 属性值
Border-top-width 上边框宽度 n em | thin | medium | thickBorder-right-width 右 同上Border-bottom-width 下 同上Border-left-width 左 同上Border-width 四边 同上Border-color 边框颜色 ColorBorder-style 边框样式 Dotted | dash | solid | double | groove | ridge | inset | outsetBorder-top|right|bottom|left 上(右|底|左)所有属性 Border-width | border-style | color
1.1.6 图文混排:
属性 含义 属性值
Width 宽度 n em | %Height 高度 n emFloat 文字环绕 Left | rightclear 去除文字环绕 Left | right | both
1.1.7 列表属性:
属性 含义 属性值
Display 是否显示 Block | inline | list-item | noneWhite-space 空白部分 Pre | nowrap | normal（是否合并)List-style-type 项目编号 Disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|noneList-style-image 项目前图片 Img-urlList-style-position 第二行位置 Inside | outsideList-style 全部属性 Keyword | position | url
1.1.8 鼠标属性:
属性值 含义 属性值 含义
Auto 自动 N-resize 上箭头Crosshair "+" Se-resize 右下Default 默认 Sw-resize 左下Hand 手形 S-resize 下箭头Move 移动 W-resize 左箭头E-resize 右箭头 Text "I"Ne-resize 右上 Wait 沙漏Nw-resize 左上 help 帮助
1.2 CSS选择器
1.2.1 li标签选择器
html:
<li>列表项1</li>（改变标签里的样式类型）
css:
针对所有列表
li{ color: rgb(255,0,0); /*#ff0000 red*/ font-size: 30px;}1.2.2 类选择器 class（把一堆样式划为一类）
<pre style="margin-bottom:18.0pt;line-height:16.5pt;background:#F6F8FA;word-break:break-all">div`.topBar +Tab = <`divclass`=`"topBar"`></`div`>`</pre>
当前页面内可以多个同样 html:
<pre style="margin-bottom:18.0pt;line-height:16.5pt;background:#F6F8FA;word-break:break-all"><li class="blue">`列表项``2`</li></pre>
css:
<pre style="margin-bottom:18.0pt;line-height:16.5pt;background:#F6F8FA;word-break:break-all"> color: #0000ff;</pre><pre style="margin-bottom:18.0pt;line-height:16.5pt;background:#F6F8FA;word-break:break-all"> }</pre>
1.2.3 ID选择器 id（也可控制某个DIV样式）
当前页面内唯一id； 如果页面内出现多个相同id，虽然可以解析出，但不规范，不建议
<li id="item">列表项1</li> #item{ color: #00FF00; font-size:40px; }权重越大，优先级越高，优先级高的覆盖优先级低的
各种选择器可以用在列表li、容器div等中
html:
<div>这是一个Div</div>
CSS:
div{ background-color: #ccc; }1.3 CSS样式规则
1.3.1 三种定义样式的方法
①****在本文件下的表示方法
<head> <style type="text/css"> //样式 选择器（即修饰对象）{ //.g{ } 对象属性1：属性值1； //font： 对象属性2：属性值2； //height：50px； } </style> </head>②在1.css文件中的表示方法
<link rel="stylesheet" type="text/css" href="1.css">
③直接跟着定义样式
<div class=" size show show-1"></div>
每个样式间用空格隔开，有三个样式 size、show、show-1
1.3.2 颜色
red = #FF0000 = rgb(255,0,0) 红色blue = #0000ff = 蓝色green = #00FF00 = 绿色 #ccc = #cccccc 灰色 #fff = #ffffff 白色black = #333 黑色background: #fff; 背景为白色background: #fff; 背景为白色 cursor: pointer; 当移动到当前位置时（配合li:hover）变成小手 transition: all 1s ease; 渐变效果（有些浏览器不支持） -webkit-transition:all 1s ease; -o-transition:all 1s ease; -moz-transition:all 1s ease; -ms-transition: all 1s ease; 对于不支持的浏览器，解决方案
1.3.3 字体font
width: 200px;宽度 font-weight: bold; 字体粗细（粗体） font-size: 12px; 字体大小 color: #ff7300; 字体颜色 background-color: #ccc; 背景色 height 高度width 宽度（可以认为是长度）font-family：隶书；字体
长度单位：
px 像素
颜色
十六进制：#ffffff 颜色名称：red
尺寸属性：
Height、max_height、min_height width、max_width、min_width
字体、字号：
font 缩写形式 font-weight 粗细 font-size 大小 font-family 字体系列 font-style 字体样式
字体颜色
color opacity 透明度 css3
行距、对齐等
line-height 行高 text-align 对齐 letter-spacing 字符间距 text-decoration 文本修饰 overflow 浮动 text-overflow text-indent
1.3.4 列表宽度决定了列表项宽度
height: 100px; line-height: 100px; 使其上下居中对齐 text-align: right; 水平对齐方式：水平靠右 text-align: center; 水平对齐方式：水平居中 letter-spacing: 10px; 字间距 text-decoration: none; 下划线设置（去除） white-space: nowrap; 设为一行显示 overflow: hidden; display: block; 隐藏多余内容
1.3.5 图片
background-image: url(images/1.jpg); 插入图片 background-image: url(../images/1.jpg); 插入上一级文件夹中images文件夹中的图片1.jpg background-repeat: no-repeat; 图片默认多大就是多大（不加自动复制显示） background-position: 50px 50px; 移动图片（正数为右下角，负数为左上角）
1.3.6 块级元素 默认占一行
★float: left; 浮动 将块级元素变为行级元素 让多行在一行 如果一行放不下，自动转第二行 height: 50px; /*使其上下居中对齐*/ line-height: 50px; /*使其上下居中对齐*/ text-align: center; 水平对齐方式：水平居中 margin-right: 5px; 每个元素间间隔5px font-size: 20px; 字体大小
1.3.7 焦点
鼠标移到当前位置时的状态
a:hover{ color: red; } /*鼠标激活选定状态*/ a:active{ color: green; }1.3.8 超链接样式的四种状态
未访问状态 a:link 已访问状态 a:visited 鼠标移上状态 a：hover 激活选定状态 a：active
1.3.9 盒子（矩形方框）
margin（外边距/边界）border（边框）padding（内边距/填充）width 宽度height 高度margin 外边距/边界margin：1px 2px 3px 4px 外边距/边界（上右下左）margin：1px 2px 外边距/边界（上下、左右）margin：1px 外边距/边界（上下左右、通常表现出来上左）
margin
一个值：4边
两个值：上下、左右
四个值：上右下左
margin-left: auto; 左边距自动margin-left: auto; /水平居中/margin-right: auto; /水平居中/margin: 0px auto; /水平居中，有的浏览器不支持/
默认下，div没有边框border（有颜色）
默认不显示border
border-color: blue;border-width: 10px;border-style: solid; 以上三句话使其最终显示 solid实心的border width style colorborder：20px solid green 一句话也可以显示border-top:30px solid #ccc; 设置上边框属性padding-top: 20px; 内边距（上）padding: 20px; 内边距（上下左右）padding: 20px 50px; 内边距（上下、左右）
对同一属性做设置，后面的优先级高
对外边距/边界设置，一般统一格式，不要上边设下边距，下边设上边距；如果设置，按大的显示
margin-bottom: 30px;.topbar .search .topabar .link{float:right;} 共用一种样式{浮动 将块级元素变为行级元素}1.3.10 解决浮动问题，使用尾类
.fix{*zoom:1;*clear:both;} .fix:before,.fix:after{ display: table;clear:both; content: ''; } <div class="wrap fix"> +fix谁的子元素浮动，就可以清除影响 .fix{*zoom:1;*clear:both;} .fix:before,.fix:after{ display: table;clear:both; content: ''; }1.3.11 定位
position: absolute; 绝对定位 position: relative; 相对定位
参照物是距离最近 定位的父元素
1.3.12 对定位元素显示排序
z-index: 1; 数字越大，优先级越高
设置 鼠标指到哪里，哪里在上边
.c4:hover{ z-index: 3; }1.3.13 响应式
viewport 设备方向：Orientation 设备方向：Orientation
1.3.14 其他样式
header、footer、center、left、right
头 尾 中间 左 右
链接 默认带下划线
<div class=" size show show-1"></div>
每个样式间用空格隔开，有三个样式 size、show、show-1
list-style:none; 去除前面的列表序列号border 边框border: 1px solid red; 添加边框<div style="clear: both"></div> 用于消除浮动效果导致的顺序错乱height 高度width 宽度（可以认为是长度）font-family：隶书；字体 top: 25px; 距离上方25px left: 15px; 距离左边15pxdisplay: none;不显示@media screen and (max-width: 900px){ } 当分辨率小于900px时line-height: 1.8; 行高1.4 为CSS单独建立文件（建立链接link）
<link rel="stylesheet" type="text/css" href="style.css"> <link + Enterstyle.css 新建文件@charset 'utf-8';
版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
标签： #css设置行距
