实体化三属性
实体化三属性有：
width-----宽度；
height------高度；
background-------背景颜色（值可以是：十六进制、英文）；
标签的显示模式（display）
标签的类型(显示模式)
HTML标签一般分为块标签和行内标签两种类型，它们也称块元素和行内元素。具体如下：
块级元素（display:block）
常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。
块级元素的特点：
1、块级元素可实体化
2、块级元素无法同行显示
行内元素(display:inline)
行内元素（内联元素）不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。
常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签最典型的行内元素。
行内元素的特点：
1、行内元素无法实体化
2、行内元素默认是同行显示
注意：
- 只有文字才能组成段落，因此p标签里面不能放块级元素，同理还有这些标签h1,h2,h3,h4,h5,h6,dt，他们都是文字类块级标签，里面不能放其他块级元素。
- 链接里面不能再放链接。
行内块元素（display:inline-block;）
有些布局既要一行并存，又要显示宽度和高度。
display:inline-block; 既能显示大小又能一行并存
选择器(重点)
要想将CSS样式应用于特定的HTML元素，首先需要找到该目标元素。在CSS中，执行这一任务的样式规则部分被称为选择器（选择符）。
如上图所以，要把里面的小黄人分为2组，最快的方法怎办？
很多， 比如 一只眼睛的一组，剩下的一组 ：同一类的归到一起
标签选择器
是指用HTML标签名称作为选择器，按标签名称分类，其实我们前面的所有案例都是标签选择器 举例: h2{} h3{} div{} span{}
标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 或者
元素名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
标签选择器最大的优点是能快速为页面中同类型的标签统一样式，同时这也是他的缺点，不能设计差异化样式。
类选择器
类选择器使用“.”（英文点号）进行标识，后面紧跟类名，其基本语法格式如下：
.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
标签调用的时候用 class=“类名” 即可。
类选择器最大的优势是可以为元素对象定义单独或相同的样式。
注意：
1.长名称或词组可以使用中横线来为选择器命名。
2.不建议使用“_”下划线来命名CSS选择器
3.不要纯数字、中文等命名， 尽量使用英文字母来表示。
命名规范： 见附件（Web前端开发规范手册.doc）
命名是我们通俗约定的，但是没有规定必须用这些常用的命名。
课堂案例：
go.png
<head>
<meta charset="utf-8">
<style>
span {
font-size: 100px;
}
.blue {
color: blue;
}
.red {
color: red;
}
.orange {
color: orange;
}
.green {
color: green;
}
</style>
</head>
<body>
<span class="blue">G</span>
<span class="red">o</span>
<span class="orange">o</span>
<span class="blue">g</span>
<span class="green">l</span>
<span class="red">e</span>
</body>
多类名选择器
我们可以给标签指定多个类名，从而达到更多的选择目的。
lei.png
注意：
1. 样式显示效果跟HTML元素中的类名先后顺序没有关系,受CSS样式书写的上下顺序有关。
2. 各个类名中间用空格隔开。
多类名选择器在后期布局比较复杂的情况下，还是较多使用的。
<div class="pink fontWeight font20">亚瑟</div>
<div class="font20">刘备</div>
<div class="font14 pink">安其拉</div>
<div class="font14">貂蝉</div>
id选择器
id选择器使用“#”进行标识，后面紧跟id名，其基本语法格式如下：
#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
该语法中，id名即为HTML元素的id属性值，大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能对应于文档中某一个具体的元素。
用法基本和类选择器相同。
id选择器和类选择器区别
W3C标准规定，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。
类选择器（class） 好比人的名字， 是可以多次重复使用的， 比如 张伟 王伟 李伟 李娜
id选择器 好比人的身份证号码， 全中国是唯一的， 不得重复。 只能使用一次。
id选择器和类选择器最大的不同在于 使用次数上。
CSS选择器的权重
我们学习了这三种选择器：标签选择器、类选择器 、id选择器如何区分大小：
标签选择器 < 类选择器 <id选择器
1 10 100
边框属性
border属性是用来设置标签边框的，它一共有三个值，值与值之间用空格隔开；
基本结构：border：粗细 类型 颜色； 例如：border:1px solid #000;
其中边框类型有三个值：solid------实线；dashed-------虚线；dotted ------点线；
Css中所有的边框都由4部分组成，分别是 上右下左。 Top，right，bottom，left，所以可以对其中一条边进行设置，例如：border-top:1px solid #ccc;
CSS层叠性
所谓层叠性是指多种CSS样式的叠加。
是浏览器处理冲突的一个能力,如果一个属性通过两个选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉
比如先给某个标签指定了内部文字颜色为红色，接着又指定了颜色为蓝色，此时出现一个标签指定了相同样式不同值的情况，这就是样式冲突。
一般情况下，如果出现样式冲突，则会按照CSS书写的顺序，以最后的样式为准。
CSS继承性
所谓继承性是指书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可。
简单的理解就是： 子承父业。
注意：
恰当地使用继承可以简化代码，降低CSS样式的复杂性。子元素可以继承父元素的样式（一般继承文字三属性，字号，字体，颜色...）
line-height:行间距
ine-height属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高。line-height常用的属性值单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素px
CSS 背景(background)
CSS 可以添加背景颜色和背景图片，以及来进行图片设置。
repeat : 背景图像在纵向和横向上平铺（默认的）
no-repeat : 背景图像不平铺
内边距（padding）
padding属性用于设置内边距。 是指 边框与内容之间的距离。
padding-top:上内边距
padding-right:右内边距
padding-bottom:下内边距
padding-left:左内边距
外边距（margin）
margin属性用于设置外边距。 控制盒子外面的距离。
margin-top:上外边距
margin-right:右外边距
margin-bottom:下外边距
margin-left:上外边距
margin:上外边距 右外边距 下外边距 左外边
取值顺序跟内边距相同。
内边距padding和边框撑大盒子尺寸问题
我们的内边距和边框都是把盒子变大，我们不能让盒子变大，解决办法：内减法。（外边距不需要内减，只有内边距和边框）
box-sizing: border-box;
总结：只要盒子给了内边距和边框都会把盒子变大，所以我们要内减，因为盒子大了就会把页面撑开，下面的内容就会被挤下去。（给了边框和内边距别忘了减掉就可以了。---外边距不需要减）
网友评论