一、css的基本概念
1、css的介绍
层叠样式表(英文全称:Cascading Style Sheets)
2、css基础语法
3、样式的建立
3.1 样式表的种类
a、内部样式表
语法
<style type="text/css">
css语句
</style>
注:使用style标记创建样式时,最好将该标记写在<head></head>;
b、外部样式
a:外部样式表的创建
b:外部样式表的导入
语法: <link rel="stylesheet" type="text/css" href="目标文件的路径及文件名全称" />
说明:
使用link元素导入外部样式表时,需将该元素写在文 档头部,即<head>与</head>之间。
rel:用于定义文档关联,表示关联样式表;
type:定义文档类型
演示:
在index.html下的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/my.css"/>
</head>
<body>
<div style="background: yellow;">
大家状态还需要调整
</div>
</body>
</html>
在my.css文件下的代码
div {
width: 300;
height: 300;
background: green;
}
c、内联样式
语法:<标签 style=“属性:属性值;属性:属性值;”></标签>
例如:<div style="width:100px;"></div>
3.2 样式表的优先级
内联样式表的优先级别最高
内部样式表与外部样式表的优先级和书写的顺序有关,后书写的优先级别高
4、css选择符
选择符的定义
选择符表示要定义样式的对象,可以是元素本身,也可以是一类元素或者制定名称的元素.
常用的选择符有十种左右 类型选择符,id选择符,class选择符,通配符,群组选择符,包含选择符,伪类选择符,伪对象选择符。
4.1 7种选择符
a、元素选择符
语法:元素名称{属性:属性值;}
元素选择符是根据html语言中的标记来直接定义
说明:
a)元素选择符就是以文档语言对象类型作为选择符,即使用结构中元素名称作为选择符。例如body、div、p,img,strong,span......等。
b)所有的页面元素都可以作为选择符; 用法:如果想改变某个元素得默认样式时,可以使用类型选择符;
用法:
(1)如果想改变某个元素的默认样式时,可以使用类型选择符;(如:改变一个p段落样式)
(2)当统一文档某个元素的显示效果时,可以使用类型选择符;(如:改变文档所有p段落样式)
案例:搭色块
演示:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
width: 300px;
height: 200px;
background: red;
}
</style>
</head>
<body>
<div style="background: yellow;">
大家状态还需要调整
</div>
</body>
</html>
b、id选择符
语法:#id名{属性:属性值;}
说明:
1、当我们使用id选择符时,应该为每个元素定义一个id属性; 如:<div id="top"></div>
2、id选择符的语法格式是“#”加上自定义的id名; 如:#box{width:300px; height:300px;}
3、起名时要取英文名,不能用关键字:(所有的标记和属性都是关键字)
4、一个id名称只能对应文档中一个具体的元素对象,因为id只能定义页面中某一个唯一的元素 对象。
5、最大的用处:创建网页的外围结构
c、class选择符
语法:.class名{属性:属性值;}
说明:
当我们使用类选择符时,应先为每个元素定义一个类名称,
类选择符的语法格式是:"如:<div class="top"></div>"
用法:class选择符更适合定义一类样式;
d、伪类选择符
a:link {color: red;} /* 未访问的链接状态 */
a:visited {color: green;} /* 已访问的链接状态 */
a:hover {color: blue;} /* 鼠标滑过链接状态 */
a:active {color: yellow;} /* 鼠标按下去时的状态 */
说明:
1)当这4个超链接伪类选择符联合使用时,应注意他们的顺序,正常顺序为: a,a:link,a:visited,a:hover,a:active,错误的顺序有时会使超链接的样式失效;
2)为了简化代码,可以把伪类选择符中相同的声明提出来放在a选择符中; 例如:a{color:red;} a:hover{color:green;} 表示超链接的三种状态都相同,只有鼠标划过变化颜色。
演示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
a:link{
color: aqua;
}
a:visited{
color: purple;
}
a:hover{
color: #FF0000;
}
a:active{
color: #008800;
}
</style>
</head>
<body>
<div >
<a href="index1.html">京东商品</a>
</div>
</body>
</html>
e、群组选择
语法:选择符1,选择符2,选择符3......{属性:属性值;}
说明:当有多个选择符应用相同的样式时,可以将选择符用“,”分隔的方式,合并为一组。
实例:.top, #nav, p{width:100px;}
f、包含选择器
语法:选择符1(父) 选择符2(子){属性:属性值;}
说明:选择符1和选择符2用空格隔开,含义就是选择符1中包含的所有选择符2;
实例: div ul li{height:200px;}
g、通配符
语法:*{属性:属性值;}
说明:通配选择符的写法是“*”,其含义就是所有元素。
用法:常用来重置样式。
二、核心属性和浮动
1、css属性组成和作用
属性:属性值
1)每个css样式都必须由两部分组成:选择符(Selector)和声明(Decleration) 注:声明又包括属性(Properyt)和属性值(Value)
2)css属性:属性是指定选择符具有的属性,他是css的核心,css2共有150多个属性;
3)css属性值:属性值包括法定属性值和常规的数值加单位。 div{width:400px;}
2、文本文字属性
2、1 字体属性
a、字体大小
em:表示元素字体高度,em值是根据父元素值(本节点没有设置字体大小)来确定; 如:font-size:12px;line-height:2em(行高为字号的两倍); 则行高为24px;
单位还可以是1em , 默认情况下:1em=16px,0.75em=12px;
b、字体的类型
{font-family:字体1,字体2,;}
说明:
*当字体是中文字体时需加引号;
*当英文字体中有空格时需加引号: 如“Times New Roman”;
Windows中文版本操作系统下,中文默认字体为宋体或者新宋体,英文字体默认为Arial.
c、文本颜色
{color:颜色值;}
d、字体加粗
{ font-weight:bolder/bold/normal/100-900 ;}
说明:
bolder(更粗的)/bold(加粗)/normal(常规)
1)在css规范中把字体的粗细分为9个等级,分别从100-900,其中100对应最轻的字体变形,而900对应最重的字体变形。 100-500常规字体 600-900加粗字体
e、字体倾斜
{ font-style:italic/oblique/normal;}
说明:
取值为:italic/oblique/normal italic和oblique都表示倾斜,不过oblique的幅度要大一点。但一般浏览器对它们的区分不是很明显
2.2 文本属性
f、文本大小写
text-transform这个属性有3个值分别为;
text-transform: uppercase 把文字变成全大写
text-transform: lowercase 把文字变成全小写
text-transform: capitalize 变成首字母大写
g、文本对齐方式
水平对齐方式{text-align:left/right/center;}
垂直对齐方式{vertical-align:top/bottom/middle;}
h、文本行高
{line-height:normal/数值;}
说明:
当单行文本的行高等于容器高时,可实现单行文本在容器中垂直方向居中对齐;
当单行文本的行高小于容器高时,可实现单行文本在容器中垂直中齐以上任意位置的定位;
当单行文本的行高大于容器高时,可实现单行文本在容器中垂直中齐以下任意位置的定位。
i、文本修饰
text-decoration:none/underline/overline/line-through/blink
说明:
none:没有修饰
underline:添加下划线
overline:添加上划线
line-through:添加删除线
blink:闪烁
j、首行缩进
首行缩进:{text-indent:value;}
说明:
说明: text-indent可以取负值; text-indent属性只对第一行起作用
k、字间距和词间距
{letter-spacing:value;}
说明:控制英文字母或汉字的字距
word-spacing:value;
说明:控制英文单词词距
3、css列表属性
3.1 定义列表符号样式
{list-style-type: }
说明:取值: disc(实心圆) circle(空心圆) square(实心方块) none(去掉列表符号);
3.2 使用图片作为列表符号
{list-style-image:url(图像路径); }
说明:url(所使用图片的路径及全称)
3.3 定义列表符号的位置
list-style-position: ;}
说明:取值: outside(外边) inside(里边);
4、css边框属性
语法:{border: ; }
说明:
属性1:边框样式 border-style:solid/dashed/dotted/double solid:实线,dashed:虚线,dotted:点状线,double:双线,none/0(去掉边框)
属性2: 边框厚度 bosrder-width:取值;
属性3:边框颜色 border-color:取值;
单独设置某个方向的边框属性:
border-top:上边框
border-bottom:下边框
border-left:左边框
border-right:右边框
例如: border-top-style:取值; border-top-width:取值; border-top-color:取值;
宽度按时间原则取值,从top开始取
优先取自己,然后取对面,最后取最右边
5、css背景图属性
5.1 背景颜色
语法:选择符{background-color:颜色值;} 简写:background:color值;
5.1 背景图片
a、设置图片
语法:background-image:url(背景图片的路径及全称);
说明:
网页上有两种图片形式:插入图片、背景图; 插入图片:属于网页内容,也就是结构。
背景图:属于网页的表现,背景图上可以显示文字、插入图片、表格等。
背景图片的显示原则
1)容器尺寸等于图片尺寸,背景图片正好显示在容器中;
2)容器尺寸大于图片尺寸,背景图片将默认平铺,直至铺满元素;
3)容器尺寸小于图片尺寸,只显示元素范围以内的背景图。
4)加载背景图必须有容器区域;
b、平铺图片
语法:选择符 {background-repeat:no-repeat/repeat/ repeat-x/repeat-y }
no-repeat:不平铺
repeat:平铺 (默认)
repeat-x:横向平铺
c、图片位置
语法:选择符{background-position:水平方向属性值 垂直方向属性性;}
水平方向值:left/center/right或数值
垂直方向值: top/center/bottom或数值
说明:
水平向右 垂直向下移动 是正数值
水平向左 垂直向上移动 是负数值
两个值 :第一个值表示水平位置的值, 第二个值表示垂直的位置。 *例如:当两个值都是center的时候写一个值就可以代表的是水平位置和垂直位置。
6、css浮动属性
float:定义网页中其它文本如何环绕该元素显示
有三个取值:
left:元素活动浮动在文本左面
right:元素浮动在右面
none:默认值,不浮动。
浮动产生负作用
1、背景不能显示
由于浮动产生,如果对父级设置了(CSS background背景)CSS背景颜色或CSS背景图片,而父级不能被撑开,所以导致CSS背景不能显示。
2、边框不能撑开
如上图中,如果父级设置了CSS边框属性(css border),由于子级里使用了float属性,产生浮动,父级不能被撑开,导致边框不能随内容而被撑开。
3、margin padding设置值不能正确显示
由于浮动导致父级子级之间设置了css padding、css margin属性的值不能正确表达。特别是上下边的padding和margin不能正确显示。
clear:清除浮动
none:允许两边都可以有浮动对象
both:清除两边浮动
left:清除左边浮动
right:清除右边浮动
注:浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。 浮动框是脱离了普通的文档流
清除浮动的几种方法
1、clear:both清除浮动
2、父级添加overflow:hidden;缺点:父级这个盒子不能放其他元素
3、万能清楚浮动
.clearfix:after{
conten:"";
display:block;
height:0;
clear:both;
}
.clearfix{
zoom:1;
}
演示
清楚浮动的代码
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#container {
border: #800080 solid;
}
#one {
background-color: red;
/* float: left; */
width: 200px;
height: 200px;
float: right;
}
#two {
background-color: green;
/* float: left; */
width: 200px;
height: 200px;
float: right;
}
#three {
background-color: blue;
/* float: left; */
width: 200px;
height: 200px;
float: right;
}
p {
clear: both;
}
.fix_float::after{
content: "";
clear: both;
display: block;
}
.fix_float::before{
content: "click twice 666";
/* display: block; */
}
</style>
</head>
<body>
<div id="container" class="fix_float">
<div id="one">
</div>
<div id="two">
</div>
<div id="three">
</div>
<!-- <p></p> -->
</div>
</body>
</html>
7、css定位属性
目标:元素定位设置、滚动条设置
7.1 position定位属性
属性 | 描述 |
---|---|
static | 默认值。位置设置为 static 的元素会正常显示,它始终会处于文档流给予的位置 |
absolute | 相对于父级元素的绝对定位,浮出、脱离文档流 |
relative | 是相对于默认位置的偏移定位,相对于自己的开始的位置发生的位置上的移动 |
fixed | 相对浏览器的绝对定位 |
除了static不能用top、bottom、left 和 right
其他三个属性都可以用
7.2 包含块的概念和作用
包含块是绝对定位的基础,包含块就是为定位元素提供坐标,
偏移和显示范围的参照物,即确定绝对定位的偏移起点和百
分比 长度的参考;
定义元素为包含块:给绝对定位元素的父元素添加声明position:relative
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#container{
width: 200px;
height: 200px;
border: 1px red solid;
position: relative;
}
#box{
width: 50px;
height: 50px;
background: red;
position: absolute;
left: 20px;
top: 50px;
}
</style>
</head>
<body>
<div id="container">
<div id="box">
</div>
</div>
</body>
</html>
7.3 让一个元素始终在窗口水平、垂直位置居中
<style type="text/css">
#container{
width: 200px;
height: 200px;
border: 1px red solid;
position: fixed;
background-color: #FF0000;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
</style>
<style type="text/css">
#container{
width:200px;
height:200px;
background:#f00;
position:fixed;
left:50%;
top:50%;
margin:-100px 0 0 -100px;
}
</style>
7.4 命名锚点链接
定义: 是网页制作中超级链接的一种,又叫命名锚记。
命名锚记像一个迅速定位器一样是一种页面内的超级链接
制作锚标记:
1)给元素定义命名锚记名 语法:<标记 id="命名锚记名"> </标记>
2)命名锚记连接 语法:<a href="#命名锚记名称"></a>
7.5 滚动条overflow
属性 | 描述 |
---|---|
overflow | 水平及垂直方向内容溢出时的设置 |
overflow-x | 水平方向内容溢出时的设置 |
overflow-y | 垂直方向内容溢出时的设置 |
属性值 | 描述 |
---|---|
visible | 默认值,其中的内容无论是否超出范围都将被显示 |
hidden | 效果与visible相反。任何超出“width”和“height”的内容都会隐藏 |
scroll | 无论内容是否超越范围,都将显示滚动条 |
auto | 当内容超出范围时,显示滚动条,否则不显示 |
<!-- 没有水平滚动条 -->
<div style="overflow-x:hidden">test</div>
<!-- 没有垂直滚动条 -->
<div style="overflow-y:hidden">test</div>
<!-- 没有滚动条 -->
<div style="overflow-x:hidden;overflow-y:hidden">test</div>
<div style="overflow:hidden">test</div>
<!-- 自动显示滚动条 -->
<div style="height:100px;width:100px;overflow:auto;">test</div>
三、元素类型
元素类型的转换
元素分类
1、块状元素
a 以矩形区域显示
b 默认占一行 自上而下排列
c 可以定义自己的宽度
d 可以作为容器 容纳其他元素
常见块级元素
元素 | 描述 |
---|---|
div | 最常用的块级元素 |
dl | 和dt-dd 搭配使用的块级元素 |
form | 交互表单 |
h1 -h6 | 大标题 |
hr | 水平分隔线 |
ol | 有序列表 |
p | 段落 |
ul | 无序列表 |
2、内联元素
a 以行内逐个进行显示
b 不能定义宽高
c 遵循盒模型基本规则
常见内联元素
元素 | 描述 |
---|---|
a | 超链接 锚点 |
br | 换行 |
i | 斜体 |
em | 强调 |
label | 标签 |
span | 内联容器 |
strong | 粗体强调 |
textarea | 多行文本输入框 |
select | 项目元素 |
元素的转变
使用displace属性转换
属性值 | 描述 |
---|---|
block | 块状显示,其他元素不能并列 |
inline | 内联显示 |
inline-block | 行内块元素显示 如input |
none | 此元素不会被显示 |
四、css盒模型
1、盒模型的概念
盒模型是css布局的基石,它规定了网页元素如何显示以及元素间相互关系。
css定义所有的元素都可以拥有像盒子一样的外形和平面空间。
即都包含内容区、补白(填充)、边框、边界(外边距)这就是盒模型。
2、padding属性
Padding是设定页面中一个元素内容到元素的边框之间的距离。 也称补白
用法:
1)用来调整内容(子元素)在容器(父元素)中的位置关系
2)用来调整子元素在父元素中的位置关系。 注:padding属性需要添加在父元素上。
3)padding值是额外加在元素原有大小之上的,如想保证元素大小不变,需从元素宽或高上减掉添加的padding值大小。
可单独设置某一方向填充
上方向padding-top:10px;
右方向pahdding-right:10px;
下方向padding-bottom:10px;
左方向padding-left:10px;
注意:padding值不允许是负值
padding区域在border与content之间;背景色和背景图像会覆盖padding和content组成的区域;
3、margin属性
边界:margin,在元素外边的空白区域,被称为边距。
属性值的4种方式:
四个值:上 右 下 左 {margin:10px 2px 4px 3px ;}
三个值:上 左右 下 {margin:2px 4px 6px;}
二个值:上下 左右 {margin:2px 4px;}
一个值: 四个方向 {margin:2px;}
可单独设置某一方向填充
上方向margin-top:10px;
右方向margin-right:10px;
下方向margin-bottom:10px;
左方向margin-left:10px;
4、盒子大小的计算
盒子实际占有宽度区域=
margin-left + border-left + padding-left+width+
padding-right+border-right+margin-right
盒子实际占有高度的区域=
margin-top + border-top + padding-top + height +
padding-bottom+ border-bottom + margin-bottom
5、溢出
a、容器溢出
{overflow: visible/hidden/scroll}
visible:默认值,内容不会被修剪,会呈现在元素框之外;
hidden:内容会被修剪,并且其余内容是不可见的;
scroll:内容会被修剪,但是浏览器会显示滚动条,以便查看其余的内容;
b、文本溢出
{text-overflow: clip / ellipsis;}
取值:
clip:不显示省略号(...),而是简单的裁切;
ellipsis:当对象内文本溢出时,显示省略标记;
c、省略号设置
text-overflow属性仅是:当文本溢出时是否显示省略标记,并不具备其它的样式属性定义,要实现溢出时产生省略号的效果还需定义:
1、容器宽度:width:value;(px、%,都可以)
2、强制文本在一行内显示:white-space:nowrap;
3、溢出内容为隐藏:overflow:hidden;
4、溢出文本显示省略号:text-overflow:ellipsis;
注:必须是单行文本才能设置本文溢出!!!