各种样式属性的作用
1.文字相关的样式属性
p {
color: blue; /**文字的颜色**/
font-size: 20px; /**文字的大小**/
<!----font-family属性，如果写了多个。则默认选择第一个字体，系统里面没有会再选择第二个。如果字体名中包含空格、#、$等符号该字体必须加英文状态下的单引号或者双引导 例如font-family: "Microsoft YaHei"; 尽量使用系统默认字体,尽量写unicode字体 写宋体和微软雅黑 "\5B8B\4F53" "5FAE\8F6F\96C5\9ED1"-->
font-family: "Microsoft YaHei", tahoma; /**文字的字体**/
font-weight: 400;/**文字的粗细 400等于normal ,700的bold**/
font-style: italic; /**文字斜体还是正常的**/
/**font：综合设置字体样式 font属性用于对字体样式进行综合设置，基本语法如下：{font: font-style font-weight font-size font-family} 不能更换顺序*/
font: normal 900 30px "宋体";
/**必须保留 font-size 和 font-family 否则 font 不起作用**/
font: 30px "宋体";
}
strong {
font-weight: normal; /**粗体标签设置font-weight:让粗体变为不加粗**/
}
em {
font-style: normal; /**斜体标签设置font-style：让斜体变为不斜体*/
}
#line-height {
line-height: 50px; /*每行的高度*/
text-align: left; /*文字对齐方式*/
text-indent: 2em; /*首行缩进,建议用em设置 1em就是一个字的宽度*/
letter-spacing: 10px; /*每个字的间距*/
text-decoration: none; /**取消下划线 文本装饰**/
word-spacing: 20px; /*单词的间距*/
color: rgba(0, 0, 0, 0.5); /*颜色透明度 css3*/
text-shadow: 4px 5px 5px red; /*文字阴影 css3， text-shadow带了4个参数水平位置 垂直位置 模糊距离 颜色*/
}
2.块级元素、行内元素、行内块元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- link 标签就是把外面的css 引入到当前的html页面中，就是css 和 html页面的桥梁 -->
<link rel="stylesheet" type="text/css" href="xxx.css">
<!-- 内部样式表：H写在HTML文档 的head头部里面 -->
<style type="text/css"> /*--type 类型 css 文本,type="text/css"在HTML5文档里面可以省略-*/
.demo {
color: pink;
}
.demo2 {
display: inline; /* 块元素转成行内元素*/
width: 300px; /* 因为是行内元素所以宽高无效*/
height: 200px;
color: pink;
}
.demo3 {
display: block; /* 行内元素转成块元素*/
width: 300px;
height: 200px;
background: pink;
}
.demo4 {
display: inline-block; /* 转成行内块元素*/
width: 300px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<!-- css样式表：行内式(内联样式表)、内部样式表(内嵌样式表)、外部样式表(链入样式表) -->
<!-- 我们修改一小点样式的时候，可以通过内联样式表 快速完成,直接在标签内部写样式 -->
<!-- 内部样式表：H写在HTML文档 的head头部里面 -->
<div style="color: #FFF232; font-size: 15px">SDK叫啥的的</div>
<div class="demo">山东矿机</div>
<!-- HTML 标签一般分为块标签和行内标签两种类型，也可以称块元素和行内元素 -->
<!-- 块级元素(block-level) 通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用语网页布局和网页结构的搭建。-->
<div>div就是块级元素，最典型的块级元素</div>
<fieldset>
<legend> 块级元素特点</legend>
<ul>
<li>1.总是从新行开始</li>
<li>2.高度、行高、外边距及内边距都是可以控制</li>
<li>3.宽度默认是100%</li>
<li>4.可以容纳内联元素和其他块元素。</li>
</ul>
</fieldset>
<!--行内元素(内联元素 inline-level)不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等熟悉，常用于控制页面中文本的样式，如<a> <strong> <em> <span>等,span是典型的行内元素-->
<span>123 </span>
<span>345</span>
<span> 567 </span>
<fieldset>
<legend> 行内元素特点</legend>
<ul>
<li>1.和相邻行内元素在一行上</li>
<li>2.宽、高是无效的，但水平方向的padding和margin可以设置，垂直方向无效</li>
<li>3.默认宽度就是它本身的内容宽度</li>
<li>4.行内元素只能容纳文本或其他行内元素（a 标签除外，比较特殊）</li>
</ul>
</fieldset>
<!--行内块元素(inline-block) 在行内元素中有几个特殊的标签 <img /> <input /> <td> 可以对它们设置宽、高、对齐属性，有些资料会称它们为行内块元素-->
<input type="text" name="" /> <img src="#" />
<fieldset>
<legend> 行内块元素特点</legend>
<ul>
<li>1.和相邻 行内元素（行内块）在一行上，但之间会有空白间隙</li>
<li>2.默认宽度就是它本身内容的宽度</li>
<li>3.高度、行高、外边距、内边距都可以控制</li>
</ul>
</fieldset>
<!-- 标签显示模式转换属性：display -->
<fieldset>
<legend> 标签显示模式转换</legend>
<ul>
<li>1.块转行内：display: inline;</li>
<li>2.行内转块：display: block;</li>
<li>3.块、行内元素转换为行内块：display: inline-block;</li>
</ul>
</fieldset>
<div class="demo2">块级转行内</div>
<span class="demo3">行内转块级</span><br />
<a href="#" class="demo4">百度</a>
</body>
</html>
3.背景样式属性
div {
width: 600px;
height: 300px;
background-color: pink; /*背景图片*/
background-image: url(test.png); /*背景图片*/
/*background-repeat：照片是否平铺，repeat-x水平平铺，repeat-y 垂直平铺，repeat水平垂直平铺， no-repeat不平铺*/
background-repeat: no-repeat;
/* 1.利用方位名词 top bottom center left right来更改背景图片位置。（如果方位名词只写一个那么另外一个默认是center）*/
background-position: left bottom;
background-position: center center;
background-position: left;
/**2.利用精确单位更改背景图片位置： 第一个是x坐标,第二个是y 坐标**/
background-position: 10px 30px;
/**3.利用精确单位和方位更改背景图片位置**/
background-position: center 20px; /**代表水平居中 垂直距离20px**/
/*background-size：指定对象背景图的尺寸大小：宽度 高度, 尽量只改一个值，另外一个会等比例缩放，防止图片失真、变形*/
background-size: 80px;
background-size: 50%; /**通过百分比缩放图片大小***/
/*cover 会自动调整缩放比例，保证图片始终填充满背景区域，如果溢出部分则互被隐藏*/
background-size: cover;
/*contain 会自动调整缩放比例，保证图片完整的显示在背景区域。如何背景区域宽高比例不相同，不会填充背景区域*/
background-size: contain;
/**background-attachment背景图固定：默认是scroll可以滚动的，fixed代表不可滚动*/
background-attachment: fixed;
/**背景属性简写: background属性的值的书写顺序官方并没有强制标准的为了可读性，建议大家如下写：
background 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置*/
background: #000 url(test.png) no-repeat scroll bottom right;
/*放多张图，为了避免背景色将图片盖住，背景色通常都定义在最后一组上，不定义在前面是防止颜色被后面的覆盖掉*/
background: url(test.png) no-repeat scroll bottom right,
url(test.png) no-repeat scroll top right #ccc;
}
a:hover { /**鼠标经过给我的链接添加背景图片**/
background: url(test.png) no-repeat;
}
4.css3样式特性
- 1.重叠性(重叠的属性以最后样式为准)
- 2.继承性:所谓继承性是指书写css样式表时，子标签会继承父标签的某些样式，如字体、字号、文字颜色，跟文字类有关系的属性可以继承
- 3.优先级性: 0, 0, 0, 0。特殊性公式：从左往右，左边最大
- 标签选择器 0, 0, 0, 1
- 类选择器 0, 0, 1, 0
- 伪类选择器 0, 0, 1, 0
- id选择器 0, 1, 0, 0
- 行内式更高，就是在标签内写样式 1, 0, 0, 0
- 最大的 不是选择器，是!important 一旦出现优先执行
- 特别注意：继承的权重为0
p {
color: orange!important; /**级别最大**/
}
ul li { /*权重叠加 0 0 0 2*/
color: green;
}
li { /**0 0 0 1**/
color: red;
}
<nav class="daohanglan">
<ul>
<li>继承的权重为0</li>
</ul>
</nav>
