一、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;
注：必须是单行文本才能设置本文溢出！！！
537
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
