CSS-Day-2 选择器，盒子，层，权重，css引入方法

本文链接：https://blog.csdn.net/believealone/article/details/106572087

Day-2

注：

（1）浏览器遍历父子选择器的顺序是从树的子节点到根节点（从右向左）
（2）权重一样时，后面的CSS代码会覆盖前面的
（3）任何软件设置字体大小时都是设置高
（4）凡是带有inline的元素，都带有文字特性，例如：若不进行任何设置，4 张图并排放置，就会有空隙，相当于俩个字之间的字间距，产生原因img为行级块元素（inline-block）带有inline。解决方式见下。
（5）<body>有天生的margin为8px
（6）选择优先级：
！important > 行间样式 > id > class属性 > 标签选择器
（7）W3C联盟推崇前端在开发时, 尽可能做到:

		   结构(HTML), 样式(CSS), 行为(JS)三者相分离

（8）id和class的命名规则：

            1. 数字不能开头
			2. 名字由字母, 数字, 下划线组成, 汉字(不建议)
			3. 见名知意(规范)

CSS导入方式
**
（1）行间CSS样式

行间css样式的缺点: 代码耦合度高, 没有做到结构(HTML), 样式(CSS), 行为(JS)
                  三者相分离
行间css样式的优点: 优先级比较高, 针对性较强

<body>
     <div style="width:10px;height:100px;background-color:red;">
     </div>
</body>

(2) 内联CSS样式

		优点: 符合W3C的编码理念
		缺点: 公共样式无法抽离
		
		问题: 样式没有针对性了, 不知道设置的样式是给哪个html标签设置的
		
		解决办法:
			1. 先找到要设置样式的html标签 (通过css选择器找到html标签)
			2. 找到之后再书写css样式代码


<head>
     <style type="text/css">
     
     </style>
</head>

(3) 外联CSS样式

两种方法：
		1. 通过link标签引入外部css文件
		2. 通过style标签, 并在内部书写@import方式引入外部css文件
区别：
		1. link是HTML语法, @import是CSS语法
		2. link除了可以引入css文件之外, 还可以引入其他类型的文件;
		   @import只能引入css文件.
		3. 当一个网页加载时, link引入的css文件会同时被加载; 
		   @import要等到页面全部加载完毕之后才会开始加载css文件
		4. 使用link引入的css样式将来可以被JS修改;
		   @import引入的JS不可修改.


优点:
	    完全符合W3C的编码理念
     	抽离公共的样式, 提高编码质量.
缺点: 
    	新建一个文件

<head>
<link rel="stylesheet" type="text/css" href="lesson3.css">
</head>

CSS权重（256进制）
**
在这里插入图片描述

CSS选择器
**

通配符选择器

 *{
       包含所有的东西
    }

ID选择器

 #id{
    # + id值
    }

类名选择器

 .class{
    . + class值
    }

属性选择器

[属性]{ 
              
    }

并列选择器
多个限制条件写到一起并且中间不加空格

div.demo{

}

分组选择器
逗号分割，同组共用一个代码框, 用于多个没有其他关系的标签

 em,strong,span{

}

父子选择器/派生选择器

.sex .box em{
    用于有父子关系或者爷孙关系或者更进一步的关系
}

直接子元素选择器

div > em{

}

CSS代码
**

font-size 字体大小
单位px
font-weight 字体粗细设置
可能的值：
font-style 定义字体样式
italic(斜体)
font-family 字体种类
互联网通用：arial
color 字体颜色
三类：
(1) 纯英文例：color:green;
(2) 颜色代码例：color: #ff4400; 俩位代表一个颜色的饱和度，16进制代码，00~ff 分别为红，绿，蓝三色的饱和度。如果每俩色都重复，可缩写为三位，比如#f40 淘宝红
(3) 颜色函数例： color:rgb(255,255,255);
border:1px solid black; 边框复合属性
/border-width border-style border-color/
border-width: 边框粗细
border-style：边框样式 solid(实体) dotted（点状虚线）dashed（条状虚线）
border-color：边框颜色
border-left-color/border-top/border-right/border-bottom: 可分别设置四面的边框
wdith，height 容器宽高
单位px
transparent 透明色(底色为啥显示啥色儿)
例：border-left-color:transparent;
text-align 文本对齐方式
center,left,right
line-height 单行文本所占高度
注：单行文本垂直居中，让容器高度等于单行文本占高度
text-indent 文本首行缩进
单位：1em 相对单位（px也是相对单位）等于 1-font-size ，一个字的宽度
text-decoration 文本装饰
none（默认）
blink（闪烁）
underline（下划线）
line-through（贯穿线）类似于删除线
overline （上划线）
cursor 鼠标光标显示类型
-
伪类选择器之一

 a：hover{
                background-color：orange；`
}

效果：鼠标移到链接领域内时，链接背景变为橙色

display 改变元素种类（行，块，行级块）

 div{
      display:inline;
  }

这样div就变为了行级元素

margin 元素之间的空隙

img{
      margin-left：-5px；
}

俩图片之间的空隙变为-5px

border-radius 圆角

总结

**
1. 行级元素，（内联元素 inline）
feature：内容决定元素所占位置；不可以通过css改变宽高；不独占一行；不支持垂直方向的margin和padding
eg：span ; strong ; em ; a ; del ;

2. 块级元素 （block）
feature：独占一行；可以通过css改变宽高
div ; p ; ul ; li ; ol ; from ; address；h

3. 行级块元素（inline-block）
feature：内容决定大小；可以改变宽高
img ；input

盒子模型

组成
外边距 margin
盒子壁 border
内边距 padding
盒子内容 width+height（content）

层模型

position 用于层的绝对定位
左右或者上下不可同时设置

 div{
     positon:absolute;
     left:100px
     top:100px
 }

注：absolute 脱离原来位置进行第定位，相对于最近的有定位的父级进行定位，如果没有，那么相对于文档进行定位。

relative 用于层的相对定位

 div{
      positon:relative;
      left:100px
      top:100px
 }

注：保留原来位置进行定位，只相对于自己原来的位置进行定位

fixed 固定定位
悬浮广告
z-index z轴定位层

 div{
 z-index:1;
 }