Day30：CSS相关
一、CSS介绍
CSS主要由两个部分组成：选择器，以及一条或多条声明。
selector {
property: value; property: value; property: value }-size:14px;}1 <p style="background-color: rebeccapurple">hello yuan</p>
2、嵌入式
嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下：
1 <head> 2 <meta charset="UTF-8"> 3 <title>Title</title> 4 <style> 5 p{ 6 background-color: #2b99ff; 7 } 8 </style> 9 </head>
3、链接式
将一个.css文件引入到HTML文件中
<link href="mystyle.css" rel="stylesheet" type="text/css"/>
4、导入式
将一个独立的.css文件引入HTML文件中，导入式使用CSS规则引入外部CSS文件，<style>标记也是写在<head>标记中，使用的语法如下：
<style type="text/css"> @import"mystyle.css"; 此处要注意.css文件的路径 </style>
注意：
导入式会在整个网页装载完后再装载CSS文件，因此这就导致了一个问题，如果网页比较大则会儿出现先显示无样式的页面，
闪烁一下之后，再出现网页的样式。这是导入式固有的一个缺陷。 使用链接式时与导入式不同的是它会以网页文件主体装载前装载CSS文件，
因此显示出来的网页从一开始就是带样式的效果的，它不会象导入式那样先显示无样式的网页，然后再显示有样式的网页，这是链接式的优点。
三、CSS选择器
- 基本选择器
1、标签选择器：span{color:red}
2、id选择器：#info{font-size:30px}
3、class选择器：.info{background-color:blue}
4、通配选择器：*{margin:0;
padding:0;}
- 组合选择器
1、E,F 多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号分隔
2、E F 后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔
3、E > F 子元素选择器，匹配所有E元素的下面第一级F元素
4、E+F 毗邻元素选择器，匹配所有紧随E元素之后的同级元素F
5、E~F 普通兄弟选择器
注意，关于标签嵌套：
一般，块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。需要注意的是，p标签不能包含块级标签。
- 属性选择器
1、E[att] 匹配所有具有att属性的E元素，不考虑它的值。 p[title] { color:#f00; }
2、E[att=val] 匹配所有att属性等于“val”的E元素。 div[class=”error”] { color:#f00; }
3、E[att~=val] 匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素 td[class~=”name”] { color:#f00; }
4、E[att^=val] 匹配属性值以指定值开头的每个元素 div[class^="test"]{background:#ffff00;}
5、E[att$=val] 匹配属性值以指定值结尾的每个元素 div[class$="test"]{background:#ffff00;}
6、E[att*=val] 匹配属性值中包含指定值的每个元素 div[class*="test"]{background:#ffff00;}
- 伪类
a:link（没有接触过的链接）,用于定义了链接的常规状态。
a:hover（鼠标放在链接上的状态）,用于产生视觉效果。
a:visited（访问过的链接）,用于阅读文章，能清楚的判断已经访问过的链接。
a:active（在链接上按下鼠标时的状态）,用于表现鼠标按下时的链接状态。
伪类选择器 : 伪类指的是标签的不同状态
四、选择器的优先级
- CSS的继承
继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，
还可以应用于它的后代。例如一个BODY定义了的颜色值也会应用到段落的文本中。但继承的权重是及其低的，比普通元素还要低，
任何显示申明的规则都可以覆盖其继承的样式。但CSS的继承也是有限制的，例如border, margin, padding, background这样的属性就
不会被继承。
- CSS优先级
CSS优先级是指CSS样式在浏览器中被解析的先后顺序。
他的基本规则是：
1 内联样式表的权值最高 －－－－－－－－－－－－1000；
2 统计选择符中的ID属性个数。 #id －－－－－－－－－－－－－－100
3 统计选择符中的CLASS属性个数。 .class －－－－－－－－－－－－－10
4 统计选择符中的HTML标签名个数。 p －－－－－－－－－－－－－-－1
按这些规则将数字符串逐位相加，就得到最终的权重，然后在比较取舍时按照从左到右的顺序逐位比较。
注意：
1、文内的样式优先级为1,0,0,0，所以始终高于外部定义。
2、有!important声明的规则高于一切。
3、如果!important声明冲突，则比较优先权。
4、如果优先权一样，则按照在源码中出现的顺序决定，后来者居上。
5、由继承而得到的样式没有specificity的计算，它低于一切其它规则(比如全局选择符*定义的规则)。
五、属性选择器
- CSS text
1、文本颜色： color
颜色属性被用来设置文字的颜色。
2、水平对齐方式：text-align
该属性规定元素中的文本的水平对齐方式（默认值：由浏览器决定）。
left 把文本排列到左边。
right 把文本排列到右边。
center 把文本排列到中间。
justify 实现两端对齐文本效果。
3、字体大小：font-size
4、line-height：文本行高，即文字高度加上文字上下的空白区域的高度
5、vertical-align：设置元素内容的垂直对齐方式 ,只对行内元素有效，对块级元素无效
6、text-decoration：该属性用来设置或删除文本的装饰。一般用来删除链接的下划线
7、font-family：设置字体样式
8、font-weight：设置字体粗细
9、text-indent：首行缩进
10、letter-spacing：字母间距
11、word-spacing：单词间距
12、text-transform: capitalize/uppercase/lowercase 文本转换，用于所有字句变成大写或小写字母，或每个单词的首字母大写
六、背景属性
- 属性介绍
- background-color：设置背景色
- background-image：设置背景图片
- background-repeat：该属性定义了图片的平铺模式
- background-position：设置背景图片的定位
- 边框属性
border：1px red solid；
宽度 颜色 线型
- 列表属性
list-style-type 设置列表项标志的类型。
list-style-image 将图像设置为列表项标志。
list-style-position 设置标志的位置
list-style 简写属性。用于把所有用于列表的属性设置于一个声明中
- display属性
1、none 隐藏标签
注意与 visibility:hidden 的区别：该方式可以隐藏某个元素，但其占用的空间依然存在，会影响布局。
而display：none 不会
2、block 内联标签设置为块级标签
注意：一个内联元素设置为display:block是不允许有它内部的嵌套块元素。
3、inline 块级标签设置为内联元素
4、inline-block：将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。
- 外边距和内边距
盒子模型
margin：用于控制元素与元素之间的距离，margin的最基本用途就是控制元素周围的空间，从而在视觉上达到相互隔开的效果
padding：用于控制内容与边框之间的距离
border：围绕在内边距和内容外的边框
content：盒子里的内容
- float属性
1、文档流：指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。
2、脱离文档流：也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会把脱离文档流的元素当做不存在而进行定位。
3、非完全脱离文档流： 左右结构div盒子重叠现象，一般是由于相邻两个DIV一个使用浮动一个没有使用浮动。
- 解决父级坍塌问题
1、固定高度
给父级设置高度或者给父级加一个固定高度的div
但是这样限定高度会让页面操作不灵活，所以不推荐
2、 清除浮动（推荐）：clear
1）none:默认值，允许两边都可以有浮动对象。
2）left：不允许左边有浮动对象
3）right：不允许右边有浮动对象
4）both：两边都不允许有浮动对象
注意：clear属性只会对自身起作用，而不会影响其他元素。即当值为left时，若左边有浮动元素，则会自己切换到下一行
3、overflow：hidden
其含义是超出的部分要裁剪隐藏。float的元素虽然不在普通流中，但是他是浮动在普通流之上的，可以把普通流元素+浮动元素想象成一个立方体。
如果没有明确设定包含容器高度的情况下，它要计算内容的全部高度才能确定在什么位置hidden，这样浮动元素的高度就要被计算进去。
这样包含容器就会被撑开，清除浮动。
- position
1、static：默认值，无定位，不能当作绝对定位的参照物，并且设置标签对象的left、top等值是不起作用的的
2、position：relative/absolute
relative：相对定位
相对定位是相对于该元素在文档流中的原始位置，即以自己原始位置为参照物。
但即使设定了元素的相对定位以及偏移值，元素还占有着原来的位置，即占据文档流空间。
注意：position：relative的一个主要用法：方便绝对定位元素找到参照物。
absolute: 绝对定位
设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，
那么它的位置相对于最初的包含块（即body元素）。如果父级设置了position属性，例如position:relative，那么子元素就会以父级的左上角为原始点进行定位。
这样能很好的解决自适应网站的标签偏离问题，即父级为自适应的，那我子元素就设置position:absolute;父元素设置position:relative;
然后Top、Right、Bottom、Left用百分比宽度表示。
3、 position:fixed
对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。
注意： 一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float，但relative可以。
七、默认高度宽度问题
1、父子都是块级元素时
<!DOCTYPE html> <html> <head> <title>fortest</title> <style> div.parent{ width: 500px; height: 300px; background: #ccc; } div.son{ width: 100%; height: 200px; background: green; } </style> </head> <body> <div class="parent"> <div class="son"></div> </div> </body> </html>
1）对于块级元素，子元素的宽度默认为父元素的100%
2）当我们给子元素添加padding和margin时，可以发现宽度width是父元素的宽度减去子元素的margin值和padding值。
3）如果去掉子元素的height，就会发先子元素的高度为0，故height是不会为100%的，一般我们都是通过给子元素添加内容将父元素撑起来
2、父：块级元素；子：内联元素
如果内联元素是不可替换元素（除img，input以外的一般元素），元素是没有办法设置宽度的
如果内联元素是可替换元素（img，input本身可以设置长和宽），不管怎么设置父元素的宽度和高度，而不设置img的宽和高时，img总是表现为其原始的宽和高。
浙公网安备 33010602011771号