3 CSS学习

CSS是什么？

• 层叠样式表 (Cascading Style Sheets)
• css可以用来为网页创建样式表，通过样式 表可以对网页进行装饰。
• 所谓层叠，可以将整个网页想象成是一层 一层的结构，层次高的将会覆盖层次低的。
• 而css就可以分别为网页的各个层次设置样式
• 属于结构 表现 行为中的 表现

基本语法

• CSS样式表由一个一个的样式构成，一个样式由选择器和声明块构成

选择器{样式名:样式值;样式名:样式值;....}
如 p {color:yellow ; font-size:30px;}

写在哪里？

1. 行内样式 可以直接写在属性中用style="样式"即可如

<p style="color: rgb(123,232,122);font-size: 30px;">ppp</p>

但是不常用直接写到了HTML标签内部导致结构和表现耦合,样式不能服用所以这种方式一般用于测试不推荐使用

2. 内部样式 使用<style>标签如

	<style>
			p {
				color: #ff0000;
				font-size: 30px;
			}
	</style>

这样CSS独立于HTML代码可以同时为多个元素设置样式
但是这种方式只能在一个页面中服用不能多个页面服用

3. 外部样式 现将样式保存到CSS外部文件然后引入页面

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

这种方式将样式放到外部解耦合,多个页面引入时游览器可以使用缓存开发中使用较多的方式

4. @import导入

	<style>
			@import "css1.css";
	</style>
	和link标签一样都是导入文件不同的是link方式是现加载好css文件先显示html页面而导入的方式是现在显示html效果在在加载css脚本 所以推荐使用link标签的方式

选择器

1. 元素选择器

标签名{}
如 p{}

2. 类选择器

.className{}
如 .ppp{} 选择标签中class属性为ppp的标签
<p class="ppp">p1</p>
<p class="ppp">p2</p>

3. ID选择器

#id1{}
选中标签属性id=id1的标签
<p id="id1">p id1</p>

4. 复合选择器

选择器1选择器2{}
选中符合所有选择器条件的标签
如何p.p3 就会选择p标签中class=p3的元素

5. 群组选择器

选择器1,选择器2,选择器3 { }
只要标签复合其中一个条件就可以
p,.p2,#id3 会选择p元素,class=p2,id=id3的所有元素

6. 通用选择器

*{}
选择所有元素

7. 后代选择器

	祖先元素 后代元素 后代元素 { }

8. 子元素选择器

父元素 > 子元素{}

其他子元素选择器
:first-child
– 选择第一个子标签

 :last-child
选择最后一个子标签

:nth-child
选择指定位置的子元素
• :first-of-type
• :last-of-type
• :nth-of-type
选择指定类型的子元素

9. 兄弟选择器

查找后边一个兄弟元素
 兄弟元素 + 兄弟元素{}
 查找后边所有的兄弟元素
 兄弟元素 ~ 兄弟元素{}

10. 伪类和伪元素
    选择本身没有标签,但是仍然易于是别的网页部位,css提供了一些选择器:伪类和伪元素
    伪类:专门用来标识元素的一种特殊的状态比如访问过的超链接,比如普通的超链接 比如获取焦点的文本框…

		
		a:link
		正常链接
		a:visited（只能定义字体颜色）
		访问过的链接
		a:hover
		鼠标滑过的链接
		a:active
		正在点击的链接
	
	这些优先级都是一样的,要时候样式都生效最好按照以上顺序

伪元素:使用伪元素来表示元素的特殊位置
在CSS1和CSS2中，伪元素和伪类都采用单冒号进行表示，在CSS3中为了区分伪元素和伪类，规定使用双冒号代表伪元素，单冒号代表伪类，即CSS3标准中应该这么写：​selector.class::pseudo-element {property:value;}​

 首字母
:first-letter
 首行
:first-line

否定伪类

:not(选择器){}
p:not(.hello)表示选择所有的p元素但
是class为hello的除外。

11. 属性选择器

[属性名]
[属性名="属性值"]
[属性名~="属性值"]
[属性名|="属性值"]
[属性名^="属性值"]
[属性名$="属性值"]
[属性名*="属性值"]

继承

CSS中祖先元素的样式会被子元素继承
继承是指应用在一个标签上的哪些CSS样式同时被应用到其他内嵌标签上。
不是所有的标签都被继承 字体颜色会被继承，背景不会被继承

选择器的权重

多个选择对同一个标签起作用这时候睡生效呢？这时候就有选择武器权重问题

• 第一级别 !important 这个在CSS 样式属性后面直接覆盖掉所有此页面定义的元素
• 第二级别 在标签属性中直接添加style 也就是内联样式 分值1000
• 第三级别 ID选择器 分值100
• 第四级别 类选择器 属性选择器 伪类选择器 分值10
• 第五级别 元素选择器 分值1
• 第六级别 通配选择器 分值0
• 第七级别 继承样式 没有分值
  把选择器相加分数高的就起效 但是同级别的分值不能超过此级别数量级,比如第四级别无论怎么相加都不会超过第三级别，如果相加后分数相同的谁写在的代码在后面谁起效

长度单位

	像素PX 屏幕是有像素点构成的一个像素点构成 分标率如1366 * 768
	百分比% 游览器会根据父元素的样式计算该值,创建自适应页面时经常使用百分比作为单位
	em 和百分比类似是按照当前元素的字体大小来计算

颜色

	直接用英文可以表示颜色如
		红色:red 蓝色:blue 绿色:green
		color: red
	RGB值也可以表示不同的颜色,RGB就是指光学三原色:红、绿、蓝的浓度来表示
		通过三种颜色不同的浓度来表示不同的颜色,浓度的值在0-255之间也可以用%来表示0%=0 100%=255
		color: rgb(123,232,122) color: rgb(10%,20%,30%)
		可以使用十六进制来表示
		color: #ff0000;

行高

	css中没有直接提供设置行间距的方式但是可以间接通过line-height设置行间距。
	网页中的文字在看不见的线中文字默认一行一行线的距离就是行高,文字在行高中垂直居中显示所以推导出行间距=行高 - 字体大小

.p1{
				font-size: 20px;
				/*
				 * 通过设置line-height可以间接的设置行高，
				 * 	可以接收的值：
				 * 		1.直接就收一个大小
				 * 		2.可以指定一个百分数，则会相对于字体去计算行高
				 * 		3.可以直接传一个数值，则行高会设置字体大小相应的倍数
				 */
				/*line-height: 200%;*/
				/*line-height: 200px;*/
				line-height: 2;
			}