web前段学习2017.6.13

Posted 2020-09-23

CSS---表现层，修饰和表现html文档，为了解决结构层和表现层分离的问题。
通过CSS极大的提高了工作效率，方便工作人员维护和管理
CSS:层叠样式表，目前用的最广泛的css版本为css2，最新版本是css3

----------------------------------------------------------------
一 CSS的放置位置
1 嵌入式
css里面我们叫html标签为html元素
放置位置：直接将css代码嵌入到html元素中
语法：<tag style="css属性1:css属性值1;css属性2:css属性值2;..."></tag>
<tag style="css属性1:css属性值1;css属性2:css属性值2;..."/>

作用范围：只作用于当前标签

2 植入式
语法：
<style>
选择器{
css属性1:css属性值1;
css属性2:css属性值2;
...
}
</style>
放置位置:放在head标签里面,通过一对style标签引入
作用范围：作用于当前的html页面

3 外联式：
放置位置：通过一个link标签引入外部的层叠样式表,link标签必须放在head标签里面
语法：<link rel="stylesheet" type="text/css" href="相对路径"/>
作用范围：公共的，任何一个html页面都可以引入，一旦引入就可以影响当前页面的样式

CSS放置位置的优先级顺序
嵌入式的优先级最高
植入式于外联式近标签者优先

CSS---表现层，修饰和表现html文档，为了解决结构层和表现层分离的问题。
通过CSS极大的提高了工作效率，方便工作人员维护和管理
CSS:层叠样式表，目前用的最广泛的css版本为css2，最新版本是css3

----------------------------------------------------------------
一 CSS的放置位置
1 嵌入式
css里面我们叫html标签为html元素
放置位置：直接将css代码嵌入到html元素中
语法：<tag style="css属性1:css属性值1;css属性2:css属性值2;..."></tag>
<tag style="css属性1:css属性值1;css属性2:css属性值2;..."/>

作用范围：只作用于当前标签

2 植入式
语法：
<style>
选择器{
css属性1:css属性值1;
css属性2:css属性值2;
...
}
</style>
放置位置:放在head标签里面,通过一对style标签引入
作用范围：作用于当前的html页面

3 外联式：
放置位置：通过一个link标签引入外部的层叠样式表,link标签必须放在head标签里面
语法：<link rel="stylesheet" type="text/css" href="相对路径"/>
作用范围：公共的，任何一个html页面都可以引入，一旦引入就可以影响当前页面的样式

CSS放置位置的优先级顺序
嵌入式的优先级最高
植入式于外联式近标签者优先

----------------------------------------------------------------

二 CSS的语法

语法：<tag style="css属性1:css属性值1;css属性2:css属性值2;..."></tag>
<tag style="css属性1:css属性值1;css属性2:css属性值2;..."/>

语法：
<style>
选择器{
css属性1:css属性值1;
css属性2:css属性值2;
...
}
</style>

选择器1{
css属性1:css属性值1;
css属性2:css属性值2;
...
}

选择器2{
css属性1:css属性值1;
css属性2:css属性值2;
...
}
每条css属性及属性值后面，都要以分号分割，表示该条css代码结束

----------------------------------------------------------------

三 CSS的选择器

选择器：通过选择可以找到相对应的html元素

选择器分类：简单选择器、关系选择器、属性选择器、伪类选择器、伪对象选择器、组合选择器
选择器也可以叫做选择符

1 简单选择器

a 标签选择器
标签名{ css代码 }--->div{ css代码 }

b class选择器(类选择器)
<p class="pTag"></p>
ps:body及body里面所有的元素都有class这个HTML属性，class的属性值我们叫它类名或者class名
.类名{ CSS代码 }--->.pTag{ CSS代码 }
通过一个类名定义了一套样式，只要html元素里面引用了该类名，那么这套样式都会对元素有影响

如何来取类名：类名只能由数字、字母、下划线构成，但是不能以数字开头
1tag--->错误
tag1 navTagName NavTagName nav_tag_name nav-tag-name nav-tag-name1...

推荐方式：一个单词 tag1 nav-tag-name,所取类名必须要知名见意

<div class="header-container"></div>

ps:类名可以重复

c id选择器
<p id="idName"></p>

#id名{ css代码 }---->#idName{ css代码 }

ps:body及body里面所有的元素都有id这个HTML属性，id的属性值我们叫它id名

id的特性：具有唯一性，也就是id名不能重复，相当于咱们身份证号

如何来取id名：类名只能由数字、字母、下划线构成，但是不能以数字开头
1tag--->错误
tag1 navTagName NavTagName nav_tag_name nav-tag-name nav-tag-name1...

推荐方式：一个单词 tag1 navTagName,所取id名必须要知名见意
尽量采用驼峰命名法：第一个单词全部小写，第二个单词及以上首字母大写
id选择器我们尽量不要使用在css里面

d 全局选择器(*)
*{ css代码 }--->可以让当前页面的所有元素都对全局选择器里面所定义的样式产生影响

------简单选择器的优先级顺序-------
id选择器>class选择器>标签选择器>全局选择器

2 组合选择器
a 标签名.类名
<div class="header-container"></div>
div.header-container{ css代码 }

b 标签名#id名
<div id="headerContainer"></div>
div#headerContainer{ css代码 }

c 逗号选择器(,)
<p></p>
<span></span>
p,span{ css代码 }
总结：选择器1,选择器2...{ css代码 } ---->让选择器1、选择器2等等共享这套样式

3 关系选择器
a 相邻选择器(E+F)----E、F分别泛指所有的css选择器，选择紧贴E元素后面的F元素

b 子代选择器(E>F)----选择E元素里所有的F子元素

c 后代选择器(E F)----选择E元素里面所有的F元素