CSS

1.直接在标签的style属性进行设置(行内式)

//写在数据单元格td标签内的stytle，设置color颜色和font-size字体大小；

<td rowspan="3" style="color: red;font-size: 12px;">Web技术与应用</td>

2.写在head标签中的stytle

 <style>
        table{
            border-collapse: collapse;  /*单框线*/
            width:100%;
            height:100%;
        }
    </style>

3.链接外部样式，编写.css文件，并引用类

<link rel="stylesheet" type="text/css" href="CSS/web.css">
/*写在head标签中的链接link*/
/*href是表示引用了哪个css文件*/
/*rel表示在页面中使用了这个外部的样式表*/
/*type指的是文本的类型是样式表文本*/

 <td rowspan="3" class="web">Web技术与应用</td>
/*在需要定义的标签内定义class值*/

4.导入外部样式表

在stytle标签中使用【注意分号】

<style type="text/css">
    @import url("style.css");
</style>

注意链接link和导入import的区别

link 是 html 的标签，而@import是CSS提供的一种方式；

当一个页面被加载的时候，link引用的CSS会被同时加载，而@import引用的CSS会等到页面全部被下载完再被加载；

选择器

1.元素选择器

img{ border-width:0; }

2.ID选择器--文档中唯一存在的

<p id="into">测试文本</p>
#into{front-weight:bold;}

3.class类选择器

<p class="into">测试文本1</p>
<p class="into">测试文本1</p>
.class{ front-weight:bold;}

4.选择器的组合

(1) 分组选择器

利用 逗号 分割选择器组合（逗号前后可以有空格）可以看作 并 操作

<style>
    h1,p{    
        front-size:12px;
    }
</style>

<h1>大标题</h1>
<p>段落1</p>

(2)嵌套(后代)选择器

在选择器之间加空格作为连接符，可以多级嵌套；对于选择器的两个元素间隔不做要求；

可以看作 交 操作

/*CSS样式：*/
p strong {
    color: blue;
}
/*HTML结构：*/
<p><em>天使<strong>投资</strong></em>是投资方式的一种</p>

(3)子元素选择器

用子组合器(>)放置在两个CSS选择器之间，匹配被第二个选择器匹配的元素，这些元素是被第一个选择器匹配的所有元素中的直接子元素；

而不是孙子元素，下例中第一个strong标签是em的直接子元素，是p标签的孙元素，第二个strong元素是p的第一个直接子元素，第三个strong元素是p的第二个直接子元素，但是也是p的直接子元素，因此第二三个strong属于被筛选的元素；

【儿子选择器，可以选择多个儿子，但不能选择孙子】

/*CSS样式：*/
p > strong {
    color: blue;
}
/*
HTML结构：*/
<p><em>天使<strong>投资</strong></em>是<strong>投资</strong>方式的<strong>一种</strong></p>

 (4)相邻兄弟选择器

把加号+放置在两个选择器之间，第二个元素在第一个元素的后边，两个元素都是属于同一个父元素，选中第二个元素；

<!--CSS样式：-->
h2+p{
    color: blue;
}

<!--因为h2和p标签属于body中的子元素，选中直接跟在h2后边的p元素-->
<!--HTML结构：-->
<h2>HTML</h2>
<p>超文本标记语言</p>   <!--被选中-->
<p>用于构建网页结构，添加内容。</p>
<h2>CSS</h2>
<p>层叠样式表</p>       <!--被选中-->
<p>用于构建网页样式，美化页面。</p>

(5)通用兄弟选择器 

把 ~ 放在两个选择器之间，匹配到第二个选择器的所有元素，（不需要是紧邻的第一个，但要有相同的父级元素）

<!--CSS样式：-->
h2~p{
    color: blue;
}
<!--HTML结构：-->
<h1>HTML</h1>
<p>超文本标记语言</p>
<p>用于构建网页结构，添加内容。</p>
<h2>CSS</h2>
<p>层叠样式表</p>                     <!--被选中-->
<p>用于构建网页样式，美化页面。</p>    <!--被选中-->

5.属性选择器

[attribute]  : 选中带有特定属性的标签；

[attribute=value] ：选中带有特定属性和值的标签；

[attribute~=value] : 属性中包含value的标记；

[attribute|=value] :属性值是value或以value开头的值的标记；

[attribute^=value] :以value开头的标记；

[attribute$=value] :以value结尾的标记；

6.通配选择器

星号(*)，用来匹配所有HTML的元素；

7.伪类选择器

PE  E:nth-child(exp)

祖先元素PE的第exp个E类型后代元素。exp可为数字、表达式（an+b形式,a、b为常量,n为变量，从0开始取值）,先计数后判断类型。

PE  E:nth-of-type(exp)

祖先元素PE的第exp个E类型后代元素。exp可为数字、表达式（an+b形式,a、b为常量,n为变量，从0开始取值）,先按类型E找出所有元素，再取第exp个。 PE  E:nth-last-child(n)

PE  E:nth-last-of-type(n)

PE :not(selector) 在祖先元素PE中匹配非指定选择器的每个元素。

E:hover 将鼠标悬停在元素E上时状态。

E:active 元素E获得焦点，处于活动状态时。

E::before 在元素E的内容之前插入一个内容，使用 content 属性来指定要插入的内容。 E::after 在元素E的内容之后插入一个内容，使用 content 属性来指定要插入的内容。

：visited  已经被访问了的样式          a：visited{}  //已经访问的样式
：active   当被鼠标点击那一刻时的样式  a：active{}   //当超链接被鼠标点击那一刻时的样式
：hover    当鼠标移上去的样式          div：hover{}  //当鼠标移在这个层上时的样式
：focus    选择获取焦点的元素          input：focus{}//选择获取焦点的输入框
::before   在该元素前添加的内容样式    p::before{}   //在所有的p元素前添加的内容及内容样式 在{}中的content属性中设置属性值 即确定需要添加的内容;
::after    在该元素后添加内容及样式    p::after{}    //选择所有的p元素在其后添加内容及样式 在{}中的content属性中设置属性值 即确定需要添加的内容;
：first-letter   选择该元素的第一个字母    p：first-letter{}  //选择所有p元素的第一个字母
：first-line     选择该元素的第一行        p：first-line{}    //选择所有p元素的第一行
：first-child    该元素为其父元素的第一个子元素    p：first-child{}  //指定p元素为其父元素的第一个子级
：first-of-type  该元素的父元素的第一个该元素      p：first-of-type{} //选择作为父元素的第一个p元素
：last-of-type   该元素的父元素的最后一个该元素    p：last-of-type{} //指定其父元素的最后一个p元素
 
：last-child     该元素为其父元素的最后一个子元素  p：last-child{}    //选择其父元素最后一个子元素为p元素

：nth-child(n)   该元素其父元素的第n个该子元素     p:nth-child(2){}   //选择其父元素正数的第2个p元素
：nth-of-type(n) 该元素其父元素的的第n个子元素 
：root           根元素
：emmpty         没有子元素的元素
：target         当前活动的#news元素（包含锚名）
：enabled        当前启用的元素
：disabled       当前禁用的元素
：checked        每个选中的元素
：not            除该元素外的元素
::selection      匹配元素中被用户选中或处于高亮状态下的部分
：out-of-range   匹配值在指定值域外时的样式
：in-range       匹配值在值域内时的样式
：require        匹配设置了require的元素
：optional       匹配可选的元素
：valid          匹配合法时的样式
：invalid        匹配不合法时的样式

.fancy {
  text-shadow: 2px 2px 3px gold;
}

<!--类名不是 `.fancy` 的 <p> 元素-->
p:not(.fancy) {
  color: green;
}

<!-- 非 <p> 元素 -->
body :not(p) {
  text-decoration: underline;
}

<!-- 既不是 <div> 也不是 <span> 的元素 -->
body :not(div):not(span) {
  font-weight: bold;
}

<!--不是 <div> 或 `.fancy` 的元素-->
body :not(div, .fancy) {
  text-decoration: overline underline;
}

<!-- <h2> 元素中不是有 `.foo` 类名的 <span> 元素 -->
h2 :not(span.foo) {
  color: red;
}

CSS的两个特性

 (1)层叠性

因为CSS具有的层叠性导致元素筛选时会有冲突，因此需要考虑选择器的优先级

选择器的优先性：内联/行内样式表>id>class>tag；

用类似(1,0,0,0)的四元组来表示优先级的高低；

(2)继承性

若父元素和子元素没有发生冲突，那么子元素将会继承父元素的样式格式；

不是所有的CSS属性都具有继承性的；

单位

 像素单位用 px--绝对单位；

em和rem都是相对单位，区别在于em是相对当前字符的大小，rem是相对于html元素的大小；

颜色

color : #ff0000;	//红
color : #00ff00;	//绿
color : #0000ff;	//蓝
color : #ffff00;	//黄
color : #000000;	//黑
color : #ffffff;	//白
<!--红色的#ff0000可以写作#f00-->
<!--十六进制-->

rgb函数
color : rgb(255,0,0); 		// 红
color : rgb(0,255,0); 		// 绿
color : rgb(0,0,255); 		// 蓝
color : rgb(0,0,0);			// 黑
color : rgb(255,255,255); 	// 白

<!--第四个参数表示透明度，0.5是半透明；1是不透明，0是全透明-->
color : rgba(255,0,0,0.5);		//红(半透明)
color : rgba(0,255,0,0.5);		//绿(半透明)
color : rgba(0,0,255,0.5);	 	//蓝(半透明)
color : rgba(0,0,0,0.5);		//黑(半透明)

字体样式

其中，light-height一行内的文字具有垂直居中的特性； 

background-clip:content box; 仅仅设置内容区，默认是border box; 

超链接样式

<style>
    a:link{		/*默认状态*/
        color: black;
    }
    a:visited{	/*浏览过的*/
        color:darkgrey;
    }
    a:hover{	/*悬浮状态*/
        color:yellow;
    }
    a:active{	/*激活过的*/
        color: red;
    }
</style>

//编写时要严格按照上图顺序来编写

设置超链接样式需要遵守一定顺序，即。 a:link -> a:visited -> a:hover -> a:active;

以下代码可以去除超链接下的下划线； 

<style>
    a{
        text-decoration:none;
}
</style>

列表样式 

盒子模型

content | padding | border | margin 

--->块元素

h1-h6 | p | div | ul | ol | table

不自动设置宽高的时候，块元素宽度自动伸长，高度包裹内容；

--->行内元素
span | b | strong | img | input | textarea | br

不自动伸展，包括内容的最小宽高；

盒子大小

盒子模型的内容区域设置宽高后，在默认情况下，填充、边框和边界值的变化，不会影响内容区域的大小，而是整体上盒子的大小发生变化。此时css的box-sizing属性默认是content-box，即内容区大小不变；

若设置box-sizing属性为border-box，则盒子的整体大小不变，内容区随之变化； 

盒子的margin和padding属性只能设置大小；

边框border可以设置宽度、颜色和样式。border属性主要有三个：border-width、border-color、border-style【线型】;

border-bottom:none;  //下边框无，所以高度也无；

border-bottom-color:transparent;//下边框存在，也有高度，但是透明不显示；

 盒子边界、填充或边框宽度的缩写

如只给定一个值，则表示其上下左右的值都相同；

如给定两个值，则分别表示上下、左右的值；

如给定三个值，则分别表示上、左右、下的值；

如给定四个值，则分别表示上、右、下、左的值；//多个赋值空格隔开；

 margin:0 auto;    //上下是0，左右自动是水平居中的效果；

上述css表达作用于块元素，实现在父元素的基础上水平居中；

如果是行内元素，设置其父元素的text-align属性为center即可以实现；

边框border属性的缩写

border: border-width | border-style | border-color

可以分别设置border-style和border-color

可以类似这样：border-right-color 、border-top-color

大多数HTML元素的盒子属性（margin、padding、border-width）默认值为0。

有少数HTML元素的margin和padding的默认值 不为0，如：body、p、ul、li等。

表单元素中大部分 input 元素的边框属性默认值 不为0。

 定位方式

一、块级元素

独占一行
默认width是父元素的100%，height取决于内容的height
设置width、height有效
设置margin，上下左右有效
设置padding，上下左右有效

二、内联元素

不会独占一行
默认width取决于内容的width，height取决于内容的height
设置width、height无效
设置margin，左右生效、上下无效
设置padding，左右生效、不建议使用上下内边距（与块内元素不同，其内容相对上下位置不变，如背景颜色会覆盖上下元素）

三、行内块元素

不会独占一行
设置width、height有效
设置margin，上下左右有效
设置padding，上下左右有效

Display属性

（1）取值none：元素不显示。

（2）取值block：显示为块元素。

（3）取值inline：显示为行元素。

（4）取值inline-block：显示为行内块元素。

visibility: hidden，则元素被隐藏。

注意： visibility: hidden  表示元素被隐藏，但是元素占位还在；

display:none        表示元素不显示，其占位也不在文档流中了。 

 水平排列盒子的相邻间隙是左右margin的和；垂直排列盒子的相邻间隙是取最大值；

---

层定位

①确定定位方式：static(标准流定位)

relative：相对定位，相对于元素原来位置(元素在标准流中)进行定位；

absolute：绝对定位，相对于static定位以外(已定位但不是static)的最近的父元素进行定位。

②确定元素位置：设置left right top bottom 属性决定元素位置

③确定元素层叠顺序：z-index设置上下层叠 z-index值大的在上边；

浮动定位

float属性:用于设定浮动   影响别人

float: left | right | none 

left | right 表示浮动元素在左 | 右边，元素向左 | 右浮动的 ； none表示不浮动，是默认值；

clear属性:清除浮动元素的影响  影响自己

left | right 表示不允许在某元素的左 | 右 边有浮动元素 ；both表示在某元素左右两边都不允许有浮动元素；none表示在某元素左右两边都允许有浮动元素；

一个浮动盒子：①浮动后的盒子将以块级元素显示，但宽度不会自动伸展；②浮动的盒子将脱离标准流，即不再占据浏览器原来分配给它的位置；③未浮动的盒子将占据浮动盒子的位置，同时未浮动盒子内的内容会环绕浮动后的盒子；

多个浮动盒子：①多个浮动元素不会相互覆盖，一个浮动元素的外边界（margin）碰到另一个浮动元素的外边界后便停止运动；②若包含的容器太窄，无法容纳水平排列的多个浮动元素，那么最后的浮动盒子会向下移动。但如果浮动元素的高度不同，那当它们向下移动时可能会被卡住；③容器中所有子元素都浮动后，父元素高度将塌陷；

弹性盒子布局

【注意：当将一个元素设为Flex布局以后，子元素的 float、clear和vertical-align 属性将失效】

采用Flex布局的元素，称为Flex容器，简称”容器”。它的所有子元素称为Flex项目，简称”项目”；

容器默认存在两根轴：水平主轴(main axis)和垂直交叉轴(cross axis)；主轴 | 交叉轴的开始位置(与边框的交叉点)叫做main start | cross start，结束位置叫做main end | cross end；

项目默认沿主轴排列。单个项目占据的主轴 |交叉轴 空间叫做main size | cross size；

容器属性 

• flex-direction 决定主轴的方向（即项目的排列方向）

row(默认)：主轴为水平方向，起点在左端；row-reverse：主轴为水平方向，起点在右端；column：主轴为垂直方向，起点在上沿； column-reverse：主轴为垂直方向，起点在下沿；

• flex-wrap 

默认情况下，项目都排在一条轴线上；flex-wrap说明如何换行：

nowrap(默认)：不换行；wrap：换行，第一行在上方； wrap-reverse：换行，第一行在下方；

• justify-content 项目在主轴上的对齐方式

flex-start(默认)：左对齐；flex-end：右对齐；center：居中 ；space-between：两端对齐，项目之间的间隔都相等。 space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

•  align-items 项目在交叉轴上对齐方式

flex-start：交叉轴的起点对齐； flex-end：交叉轴的终点对齐；center：交叉轴的中点对齐； baseline: 项目的第一行文字的基线对齐； stretch(默认)：如果项目未设置高度或设为auto，将占满整个容器的高度；

• align-content 只适用多行的flex容器，其作用是当flex容器在交叉轴上有多余的空间时，将项目作为一个整体进行对齐。

flex-start：与交叉轴的起点对齐；flex-end：与交叉轴的终点对齐； center：与交叉轴的中点对齐； space-between：与交叉轴两端对齐，轴线之间的间隔平均分布； space-around：每根轴线两侧的间隔都相等；所以，轴线之间的间隔比轴线与边框的间隔大一倍； stretch(默认值)：轴线占满整个交叉轴;

• flex-flow flex-direction和flex-wrap的合集

项目属性

• flex-grow  项目的放大比例

默认为0，划分的是剩余空间；

• flex-shrink  项目的缩小比例

默认为1

• flex-basis 主轴空间的大小

它的默认值为auto，即项目的本来大小；flex布局默认的主轴都是横向的，所以在这里可以先理解成 宽（width）属性，只是优先级比 width 更高；

• flex 

flex-grow, flex-shrink 和 flex-basis的简写；flex:  flex-grow    flex-shrink    flex-basis

• order  定义项目的排列顺序

数值越小，排列越靠前，默认为0；

• align-self  允许单个项目有与其他项目不一样的对齐方式

可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch；

---

border-radius

border-radius:水平方向取值 垂直方向取值；如果两个值相同，则可以合并成一个；

border-radius属性细分：border-top-left-radius ; border-top-right-radius ; border-bottom-left-radius ; border-bottom-right-radius ;   

box-shadow

box-shadow: inset|outset(默认) 水平偏移 垂直偏移 模糊距离 扩散半径 颜色;

text-shadow

text-shadow:水平偏移 垂直偏移 阴影大小 颜色;

transform-origin

用于设置变化元素的基点位置

过渡

必须设置 transition-duration 属性，否则时长为 0，就不会产生过渡效果

过渡效果的时间曲线：

动画设计

①使用 @key-frames 规则对动画命名，并定义动画的关键帧。 ②使用animation属性调用动画，animation属性如下表所示：

视口

视口可以理解为设备或文档对象的逻辑尺寸；移动设备（可以缩放的浏览器中都具有三个视口)上三个viewport: 布局视口、 理想视口、视觉视口 ；

布局视口可以理解为文档对象的逻辑尺寸，单位为逻辑像素；理想视口是与设备相关的，是布局视口的一个理想尺寸，只有当布局视口的尺寸等于设备屏幕的尺寸时才是理想视口，此时文档对象宽度与屏幕宽度相同；用户正在看到的网页的区域。用户可以通过缩放来查看网站的内容。如果用户缩小网页，看到的网页区域将变大，此时视觉视口也变大了，同理，用户放大网页，能看到的网页区域将缩小，此时视觉视口也变小了。不管用户如何缩放，都不会影响到布局视口的宽度；

移动设备的默认布局视口（一般是980px）往往大于理想视口，此时就会在横向出现滚动条才能完整的容纳页面。因此，需要的是将页面的布局视口设置为理想视口；

meta标签设置浏览器的视口(viewport)的宽度：<meta name="viewport“ content="width=device-width,initial-scale=1.0,maximum-scale=1.0,   user-scalable=0" />

视口的相关属性设置

媒体查询

媒体查询语法:

@media 设备名 only（选取条件）not（选取条件）and（选取条件） {           CSS样式规则 }

 

媒体查询在网页使用中有两种方式  ①在样式表中内嵌 @media； ② 在 link 中使用 media 属性； 

<!--适合低分辨率桌面浏览器和横屏iPad--> 
<link rel=“stylesheet” type=“text/css” media=“all and (max-width: 768px)” href=“ipad.css”/>

@media all and (max-width: 1024px) {
    /* 适合低分辨率桌面浏览器和横屏iPad */
}
@media all and (max-width: 768px) {
    /* 适合很低分辨率桌面浏览器和竖屏iPad */
}