第2篇-css样式

实体化三属性

实体化三属性有：
width-----宽度；
height------高度；
background-------背景颜色（值可以是：十六进制、英文）；

标签的显示模式（display）

标签的类型(显示模式)
HTML标签一般分为块标签和行内标签两种类型，它们也称块元素和行内元素。具体如下：

块级元素（display:block）

常见的块元素有

~

、

、

、

、
、
1. 等，其中
   标签是最典型的块元素。
   块级元素的特点：
   1、块级元素可实体化
   2、块级元素无法同行显示

   行内元素(display:inline)

   行内元素（内联元素）不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。

   常见的行内元素有、、、、、、、、、等，其中标签最典型的行内元素。
   

   行内元素的特点：
   1、行内元素无法实体化
   2、行内元素默认是同行显示
   注意：

   1. 只有文字才能组成段落，因此p标签里面不能放块级元素，同理还有这些标签h1,h2,h3,h4,h5,h6,dt，他们都是文字类块级标签，里面不能放其他块级元素。
   2. 链接里面不能再放链接。

   行内块元素（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

   
     
     
   
   
     G
     o
     o
     g
     l
     e
   
   

   多类名选择器

   我们可以给标签指定多个类名，从而达到更多的选择目的。

   
   

   

   lei.png

   
   

   注意：

   1. 样式显示效果跟HTML元素中的类名先后顺序没有关系,受CSS样式书写的上下顺序有关。
   2. 各个类名中间用空格隔开。
   

   多类名选择器在后期布局比较复杂的情况下，还是较多使用的。

   亚瑟
   刘备
   安其拉
   貂蝉
   

   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选择器如何区分大小：
   标签选择器 < 类选择器 ​ 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;
   

   总结：只要盒子给了内边距和边框都会把盒子变大，所以我们要内减，因为盒子大了就会把页面撑开，下面的内容就会被挤下去。（给了边框和内边距别忘了减掉就可以了。---外边距不需要减）