web前段学习2017.6.15

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的语法

语法：<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元素

----------------------------------------------------------------
--------
|CSS2属性|
--------
一 文本
1 水平对齐方式
text-align:left/right/center
也可以让img、input等有水平方向的对齐方式

2 垂直对齐方式
vertical-align:top(居顶部)/bottom(居底部)/middle(居中)
多用于table

3 设置行高
line-height:50px/10%;
如果让文本垂直居中与容器，将line-height的值设置跟容器的高度一样。只适用于单行文本

4 首行缩进
text-indent:50px;

5 内容自动换行(css3)
word-break:break-all;---允许在单词内部进行换行
word-break:keep-all;只在空格处或连字符（-）处换行

6 词间距
word-spacing:10px;单词与单词之间的间隙为10px,只要有空格出现就认为是一个词的开始

7 字间距
letter-spacing:5px;设置字(字符)之间的间隙5px

8 设置字体颜色
color:颜色;

9 设置大小字母的转换
text-transform:none/capitalize/uppercase/lowercase;
capitalize:将每个单词的第一个字母大写
uppercase：将单词所有的字母都转换成大写
lowercase：将单词所有的字母都转换成小写

10 文本修饰
text-decoration:none/underline/line-through/overline;
none:不添加或者去掉文本修饰
underline:添加下划线
line-through:添加删除线
overline:添加上划线

如果要去掉a标签默认的下划线，设置text-decoration:none;

二 字体的属性
1 设置字体大小
font-size:50px;

2 字体风格
font-style:italic(斜体)

3 字体加粗
font-weight:bold;

4 设置字体类型
font-family:"黑体"

5 设置小型的大写字母
font-variant:small-caps;

三 边框属性(border)
border-width:5px;设置边框的粗细
border-color:red;设置边框的颜色
border-style:solid(实线)/dotted(点状线)/dashed(块状线);设置边框样式

缩写：
border: 粗细 样式 颜色;

如果给某一边加边框：top right bottom left
border-top-width:5px;
border-top-color:red;
border-top-style:solid;
缩写：
border-top: 粗细 样式 颜色;

四 容器宽高属性(width/height)
width:300px/20%;
height:300px/20%;

-----补充----
常见的块级元素：div ul li ol dt dd hn p table form...
块级元素的特点：可以自动换行、可以直接设置宽高

常见的行内(内联)元素:span a b i s u select option...
内联元素的特点：对宽高没有直接作用、不会自动换行

常见的空元素：link meta br hr input img...
空元素的特点：没有内容 在开始标签中闭合,input、img、hr等可以直接设置宽高