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 */
}