web前端开发1
一.前端三剑客之css
1.选择器:由标签/类/id单独或组合出现
2.作用域:{}内部区域
3.样式块:满足css链接语法的各种样式
eg:引入的基本样式
<head>
<style> <!-- 选择器div 作用域{} 样式块color: red -->
div {
color: red
background-color: cyan;
font-size: 100px <!-- css语法必须书写;最后一条样式可以省略 -->
}
</style>
</head>
二.再html引入css的三种方式 : 行间式 | 内联式 | 外联式
1.行间式
<!-- 1.在标签头部的style属性内 -->
<!-- 2.属性值满足的是css语法 -->
<!-- 3.属性值用key: value形式赋值,value具有单位 -->
<!-- 4.属性值之间用;隔开 -->
<div style="width: 100px; height: 100px; </div>
2.内联式
<!-- 1.在style标签内(style标签一般作为head的子标签) -->
<!-- 2.属性值满足的是css语法 -->
<!-- 3.属性值用key: value形式赋值,value具有单位 -->
<!-- 4.属性值之间用;隔开(一般独行分开赋值) -->
<!-- 5.格式: 选择器{样式块} -->
<head>
<style>
div {width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div></div>
</body>
3.外联式
<!-- 1.在外部css文件中 -->
<!-- 2.属性值满足的是css语法 -->
<!-- 3.属性值用key: value形式赋值,value具有单位 -->
<!-- 4.属性值之间用;隔开(一般独行分开赋值) -->
<!-- 5.格式: 选择器{样式块} -->
<!-- 6.将html与css文件建立联系:html通过link标签链接外部css(一般head中链接) -->
file: zero.css
div {
width: 100px;
height: 100px;
background-color: red; }
file: zero.html
<head>
<link rel="stylesheet" type="text/css" href="css/zero.css" />
</head>
4.三种引入方式的优先级
注:三种方式间没有优先级 -->
<!-- 1.三种方式协同布局: -->
<!-- 2.不重复的属性一定为唯一位置的唯一值 -->
<!-- 3.重复的属性采用覆盖赋值,保留最后位置的属性值 -->
<!-- 4.行间式一定是逻辑上最后被解析的位置(js正常操作的就是行间式) -->
<!-- 5.!important会影响优先级 -->
一.前端三剑客之css
1.选择器:由标签/类/id单独或组合出现
2.作用域:{}内部区域
3.样式块:满足css链接语法的各种样式
eg:引入的基本样式
<head>
<style> <!-- 选择器div 作用域{} 样式块color: red -->
div {
color: red
background-color: cyan;
font-size: 100px <!-- css语法必须书写;最后一条样式可以省略 -->
}
</style>
</head>
二.再html引入css的三种方式 : 行间式 | 内联式 | 外联式
1.行间式
<!-- 1.在标签头部的style属性内 -->
<!-- 2.属性值满足的是css语法 -->
<!-- 3.属性值用key: value形式赋值,value具有单位 -->
<!-- 4.属性值之间用;隔开 -->
<div style="width: 100px; height: 100px; </div>
2.内联式
<!-- 1.在style标签内(style标签一般作为head的子标签) -->
<!-- 2.属性值满足的是css语法 -->
<!-- 3.属性值用key: value形式赋值,value具有单位 -->
<!-- 4.属性值之间用;隔开(一般独行分开赋值) -->
<!-- 5.格式: 选择器{样式块} -->
<head>
<style>
div {width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div></div>
</body>
3.外联式
<!-- 1.在外部css文件中 -->
<!-- 2.属性值满足的是css语法 -->
<!-- 3.属性值用key: value形式赋值,value具有单位 -->
<!-- 4.属性值之间用;隔开(一般独行分开赋值) -->
<!-- 5.格式: 选择器{样式块} -->
<!-- 6.将html与css文件建立联系:html通过link标签链接外部css(一般head中链接) -->
file: zero.css
div {
width: 100px;
height: 100px;
background-color: red; }
file: zero.html
<head>
<link rel="stylesheet" type="text/css" href="css/zero.css" />
</head>
4.三种引入方式的优先级
注:三种方式间没有优先级 -->
<!-- 1.三种方式协同布局: -->
<!-- 2.不重复的属性一定为唯一位置的唯一值 -->
<!-- 3.重复的属性采用覆盖赋值,保留最后位置的属性值 -->
<!-- 4.行间式一定是逻辑上最后被解析的位置(js正常操作的就是行间式) -->
<!-- 5.!important会影响优先级 -->
三.css中长度级颜色单位
1.长度单位
px：像素(pixel)，屏幕上显示的最小单位，用于网页设计，直观方便
mm：毫米
cm：厘米
in：英寸
pt：点(point)，一个标准的长度单位，1pt＝1/72in，用于印刷业，非常简单易用；
em：相当长度，通常1em=16px，应用于流式布局
div {
width: 100px; <--长-->
width: 720pt; 10in
width: 100mm; 10cm
width: 10em; 通常160px 10rem
width: 50vw; 50% view width <--view width表示页面长度-->
height: 100px; <--宽-->
2.颜色单位*/
rgb()：三个值可为[0-255]数值或百分比，以,相隔（r:Red g:Green b:Blue）
rgba()：前三个值可为像素或是百分比，最后一个为[0, 1]数值，以,相隔（r:Red g:Green b:Blue a:Alpha）
hsl()：第一个值为[0,360]数值，后二个值可为百分比，以,相隔（h:Hue s:Saturation l:Lightness）
hsla()：第一个值为[0,360]数值，中间二个值可为百分比，最后一个为[0, 1]数值，以,相隔（h:Hue s:Saturation l:Lightness a:Alpha）
#AABBCC：六个十六进制位，每两位一整体，分别代表Red、Green、Blue，可以简写#abc
div {
background-color: cyan;
background-color: rgb(255, 0, 0);
background-color: rgba(255, 0, 0, 0);
background-color: #a0c <-- 满足AABBCC形式可以简写为abc -->
}
四.常用样式
1.字体样式
span {
1.大小:符合长度单位
font-size: 30mm;
2.字重: bold(粗字体) normal(更粗字体) lighter(细字体 ) 100~900(100最细,900最粗)
font-weight: 900;
3.行高: 行高设置大于等于字体大小,字体在行高中垂直居中显示
line-height: 50mm;
4.样式: 一般不关心
font-style: normal;
5.字族:可以自定义字族,
font-family: "Segoe UI Emoji", "微软雅黑"; <--当Segoe UI Emoji不存在,或不起作用,再选取 微软雅黑 -->
6.字体样式整体设置 css语法: 空格隔开为多个值赋值, ,隔开为一个值多值赋值
font: lighter 50mm/80mm "Segoe UI Emoji", "微软雅黑";
}
2.文本样式
span {
1.颜色:符合颜色单位
color: red;
2.水平居中方式:left(左) center(居中) right(右)
text-align: center;
3.字划线: underline line-through overline none
text-decoration: overline;
4.字间距
letter-spacing: 3px;
5.词间距
word-spacing: 10px;
}
a {
6.应用场景
text-decoration: none;
}
div {
width: 300px;
7.显示方式
display: inline-block;
}
div {
font-size: 12px;
8.垂直排列方式: top baseline bottom
vertical-align: baseline;
9.缩进
text-indent: 2em;
}
<--遇到连体的英文,html将其解析为一个单词(作为一个整体)-->
.div {
10.按标签的设定宽度强行换行,可以在单词(整体)内部换行
word-break: break-all;
}
3.背景样式
div {
1.背景图片
background-image: url("data/bg_repeat.gif"); url(背景图片地址)
2.平铺: no-repeat repeat-x repeat
background-repeat: no-repeat;
3.定位
10px == 10px center 设置一个值,第二个值默认为center
10px 10px 第一个值控制水平位置,第二个值控制垂直位置
background-position: right center;
4.定位相关的涉及到滚动时的效果: scroll fixed
background-attachment: fixed;
}
div {
5.整体设置(顺序不可变)
background: url("data/bg_repeat.gif") 10px 10px no-repeat red;
}
五.选择器
1.基础选择器*/
1.通配选择器(*): 匹配所有(html,body,body中的所有子标签)(具有显示效果的所有标签)
* {
border: solid;
}
2.标签选择器(标签名):匹配指定标签名的对应所有标签
div {
width: 100px;
height: 100px;
background-color: red;
}
3.类选择器(.):匹配指定类名对应的所有标签
.dd {
font-size: 50px;
}
4.id选择器(#):匹配指定id名对应的唯一标签*
#ele {
color: blue;
}
5.总结:
1.通配选择器一般用于整体reset操作(reset操作:清除系统自定义样式)
2.标签与id选择器运用场景并不多,一般不提倡采用id选择器进行布局
html,css都是标记语言,所有对id可以进行多匹配,但js是编程语言.只能匹配到一个
3.类选择器为布局首选(建议基本全用class选择器进行布局)
6.基本选择器优先级:id > class > 标签 > 通配
1.长度单位
px：像素(pixel)，屏幕上显示的最小单位，用于网页设计，直观方便
mm：毫米
cm：厘米
in：英寸
pt：点(point)，一个标准的长度单位，1pt＝1/72in，用于印刷业，非常简单易用；
em：相当长度，通常1em=16px，应用于流式布局
div {
width: 100px; <--长-->
width: 720pt; 10in
width: 100mm; 10cm
width: 10em; 通常160px 10rem
width: 50vw; 50% view width <--view width表示页面长度-->
height: 100px; <--宽-->
2.颜色单位*/
rgb()：三个值可为[0-255]数值或百分比，以,相隔（r:Red g:Green b:Blue）
rgba()：前三个值可为像素或是百分比，最后一个为[0, 1]数值，以,相隔（r:Red g:Green b:Blue a:Alpha）
hsl()：第一个值为[0,360]数值，后二个值可为百分比，以,相隔（h:Hue s:Saturation l:Lightness）
hsla()：第一个值为[0,360]数值，中间二个值可为百分比，最后一个为[0, 1]数值，以,相隔（h:Hue s:Saturation l:Lightness a:Alpha）
#AABBCC：六个十六进制位，每两位一整体，分别代表Red、Green、Blue，可以简写#abc
div {
background-color: cyan;
background-color: rgb(255, 0, 0);
background-color: rgba(255, 0, 0, 0);
background-color: #a0c <-- 满足AABBCC形式可以简写为abc -->
}
四.常用样式
1.字体样式
span {
1.大小:符合长度单位
font-size: 30mm;
2.字重: bold(粗字体) normal(更粗字体) lighter(细字体 ) 100~900(100最细,900最粗)
font-weight: 900;
3.行高: 行高设置大于等于字体大小,字体在行高中垂直居中显示
line-height: 50mm;
4.样式: 一般不关心
font-style: normal;
5.字族:可以自定义字族,
font-family: "Segoe UI Emoji", "微软雅黑"; <--当Segoe UI Emoji不存在,或不起作用,再选取 微软雅黑 -->
6.字体样式整体设置 css语法: 空格隔开为多个值赋值, ,隔开为一个值多值赋值
font: lighter 50mm/80mm "Segoe UI Emoji", "微软雅黑";
}
2.文本样式
span {
1.颜色:符合颜色单位
color: red;
2.水平居中方式:left(左) center(居中) right(右)
text-align: center;
3.字划线: underline line-through overline none
text-decoration: overline;
4.字间距
letter-spacing: 3px;
5.词间距
word-spacing: 10px;
}
a {
6.应用场景
text-decoration: none;
}
div {
width: 300px;
7.显示方式
display: inline-block;
}
div {
font-size: 12px;
8.垂直排列方式: top baseline bottom
vertical-align: baseline;
9.缩进
text-indent: 2em;
}
<--遇到连体的英文,html将其解析为一个单词(作为一个整体)-->
.div {
10.按标签的设定宽度强行换行,可以在单词(整体)内部换行
word-break: break-all;
}
3.背景样式
div {
1.背景图片
background-image: url("data/bg_repeat.gif"); url(背景图片地址)
2.平铺: no-repeat repeat-x repeat
background-repeat: no-repeat;
3.定位
10px == 10px center 设置一个值,第二个值默认为center
10px 10px 第一个值控制水平位置,第二个值控制垂直位置
background-position: right center;
4.定位相关的涉及到滚动时的效果: scroll fixed
background-attachment: fixed;
}
div {
5.整体设置(顺序不可变)
background: url("data/bg_repeat.gif") 10px 10px no-repeat red;
}
五.选择器
1.基础选择器*/
1.通配选择器(*): 匹配所有(html,body,body中的所有子标签)(具有显示效果的所有标签)
* {
border: solid;
}
2.标签选择器(标签名):匹配指定标签名的对应所有标签
div {
width: 100px;
height: 100px;
background-color: red;
}
3.类选择器(.):匹配指定类名对应的所有标签
.dd {
font-size: 50px;
}
4.id选择器(#):匹配指定id名对应的唯一标签*
#ele {
color: blue;
}
5.总结:
1.通配选择器一般用于整体reset操作(reset操作:清除系统自定义样式)
2.标签与id选择器运用场景并不多,一般不提倡采用id选择器进行布局
html,css都是标记语言,所有对id可以进行多匹配,但js是编程语言.只能匹配到一个
3.类选择器为布局首选(建议基本全用class选择器进行布局)
6.基本选择器优先级:id > class > 标签 > 通配
