一,css的优势
1,内容与表现分离:
html内容和css样式分别写入各自文件中。
2,减少网页代码量:
网站中不同网页引入同一个css样式,可以有效减少代码量。
3,有利于被搜索引擎收录:
运用独立于页面的css,有利于网页被搜索引擎收录。
4,提高网页浏览速度:
网页中使用css在减少代码量的同时,可以提高用户的浏览速度,节省流量。
5,网页布局灵活:
css提供了丰富的样式文档,使开发者更方便灵活的对网页进行布局和美化。
6,网页风格统一:
网站中不同网页引入同一个css样式,保证风格同一。
二,css选择器
1,类(class)选择器
类选择器定义:
body标签中的所有标签都有class属性。
注:class名称可以重复使用。
类选择器使用:
类(class)选择器使用标志符(句点)开头
后面写上类的名称。
2,id选择器
id选择器定义:
body标签中的所有标签都有id属性。
注:一个页面中只能使用一个id名,id名必须是唯一。
id选择器使用:
id选择器使用散列符号(#)开头,后面写上id的名称。
3,标签选择器
<style>
//标签选择器
div{
color: aqua;
font-size: 30px;
}
//类选择器
.demo{
color: blue;
font-size: 40px;
}
//id选择器
#text{
color: yellow;
font-size: 50px;
}
</style>
<body>
<div class="demo" id="text">学习css基本选择器</div>
</body>
4,css选择器优先级
id选择器 > 类选择器 > 标签选择器
即上图运行结果为:
三,网页中引入css样式
1,内部样式表
将html代码和css样式做简单分离,在网页头部创建style标签,在其中写入css样式。
2,内联(行内)样式
html中的所有标签都有style属性,在style属性中直接写入css样式。
示例:
<div style=“color:red;font-size:20px;”>
这是内联样式
</div>
3,外部样式表
将css样式单独写入到一个 xxx.css外部文件中。
(1)使用link标签引入外部css文件。
(2)使用@import导入外部css文件
link标签引入外部样式文件:
<link rel="stylesheet" href="./css/index.css">
<style>
.one{
color: burlywood;
font-size: 80px;
}
</style>
<body>
<div style="color: blue; font-size: 90px" class="one">学习css样式优先级</div>
</body>
样式优先级(就近原则)
行内(内联)样式 > 内部样式表 > 外部样式表
(上图运行结果如下):
四,css基础样式
1,字体样式
font-style | 字体风格 | normal 默认值,标准文档样式 italic 斜体 |
font-weight | 字体粗细 | bold 定义粗体字符 100-900 定义由细到粗的字符 |
font-size | 字体大小 | 像素:px |
font-family | 字体类型 | “隶书”“楷体”其他 |
2,文本样式
color | 设置文本颜色 |
red
#362596
rgb(32,250,50 |
text-align | 设置元素水平对齐方式 |
•
left
•
center
•
right
|
text-indent | 设置首行文本的缩进 | |
line-heighttext- | 设置文本的行高 | |
decoration | 设置文本的装饰 |
•
none:
默认,标准文本
•
underline:定义文本下划线
•
overline:定义文本上划线
•
line-through:定义穿过文本的一条线
|
3,鼠标样式(cursor)
defalut | 默认光标 |
help | 指示可用的帮助 |
text | 指示文档 |
crosshair | 鼠标呈现十字状 |
wait | 等待状态 |
pointer | 超链接指针 |
4,背景样式
background-color | 背景颜色 |
red
#536256
rgb(30,250,13) |
background-image | 背景图片地址 |
图片绝对路径
图片相对路径 |
background-repeat | 背景重复方式 |
no-repeat
不重复
repeat-x
水平重复
repeat-y
垂直重复
repeat 默认重复 |
backgroposition | 背景定位 |
•
像素:
px
•
水平方向:
left
、
center
、
right
•
垂直方向:
top
、
center
、
bottom
|
背景样式简写:
background:图片地址,图片重复方式,背景颜色,背景定位
(属性值之间没有先后顺序)
5,列表样式
list-style-type | (1)无序列表 disc 实体圆心(默认) circle 空心圆 square 实体方心 none 无列表标记 (2)有序列表 1 / a / A / i / I |
list-style-image | 自定义列表标记为图片 属性值:url(图片路径) |
list-stposition | 列表标记定位 outside inside |
列表样式简写:
list-style:1,列表标记属性2,自定义列表标记图片3,列表标记定位
6,css伪类
link | 单击访问前 |
visited | 单击访问后 |
hover | 鼠标悬浮其上 |
active | 单击未释放 |
五,css高级选择器和盒子模型
1,并集选择器
多个选择器通过逗号连接而成
div,p,span,.codeup,#helloid{
color:red;
font-size:20px;
}
2,交集选择器
div.codeup{
color:red;
font-size:20px;
}
div#codeup{
color:red;
font-size:20px;
}
3,后代选择器
(1)外层的选择器写在前面,内层的选择器写在后面,之间用空格分隔
(2)标签嵌套时,内层的标签成为外层标签的后代
(3)使用标签选择器、id选择器、类选择没有先后顺序
div .codeup{
color:red;
font-size:20px;
}
4,子元素选择器
通过>号连接在一起而成,仅作于子元素。
div>.codeup{
color:red;
font-size:20px;
}
5,属性选择器
选取带有指定属性的元素
选取带有指定属性和值的元素
input[name]{
border:1px soild red;
}
input[type=”text”]{
border:1px soild red;
}
div[ class=“codeup”]{
color:red;
}
六,盒子模型
1,外边框(border)
(1)边框样式
属性 | 说明 | 样式值 |
---|---|---|
border-top-style | 上边框样式 |
none
:无边框
solid
:实线边框
dashed
:虚线边框
dotted
:点状边框
double
:双线边框
hidden
:与
none
相同,应用于解决边框冲突
|
border-right-style | 右边框样式 | |
border-bottom-style | 下边框样式 | |
border-left-style | 左边框样式 | |
border-style | 设置四个边框样式 |
(2)边框颜色
border-top-style
border-bottom-style
border-left-style
border-right-style
(3)边框粗细
border-top-width
border-right-width
border-bottom-width
border-left-width
简写:border-width:上,右,下,左
2,内边距(padding)
padding-top:顶部内边距
padding-bottom:底部内边距
padding-right:右边内边距
padding-left:左边内边距
box-sizing属性:box-sizing:border-box----->•盒子的实际高度和宽度包括元素内容、边框和内边距
3,外边距(margin)
margin-top:顶部外边距
margin-bottom:底部外边距
margin-left:左部外边距
margin-right:右部外边距
简写:margin:上下边距,左右边距;
4,标准文档流
(1)块级元素:
<h1> - <h6>、<p>、<div>、列表等
它可以容纳内联元素和其他块元素
(2)行内(内联)元素
<span>、<a>、<img>、<strong>等
属性值 | 作用 |
---|---|
none 设置元素不会被显示 | 控制元素的显示和隐藏 块级元素和内联(行内)元素的转变 |
inline 元素显示为内联(行内)元素 | |
block 元素会被显示为块级元素 | |
inline-block 行内块元素 |
七,css浮动
floa属性:
left:元素向左浮动。
right:元素向右浮动。
none:默认不浮动。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
*{
padding: 0;
margin: 0;
}
div.one{
background: red;
float: right;
}
div.two{
background: blue;
float: left;
}
div.three{
background: green;
float: left;
clear: left;
}
h1{
background: rgb(239, 43, 187);
}
</style>
<body>
<div class="one">
<img src="./img/course.jpg">
</div>
<div class="two">
<img src="./img/photo.jpg">
</div>
<div class="three">
<img src="./img/tx.jpg">
</div>
<h1>学习css浮动</h1>
</body>
</html>
运行结果:
clear属性:
left:不允许右侧有浮动元素。如果右侧有浮动元素,则重启一行。
right:不允许右侧有浮动元素。
both:左右两侧都不允许有浮动元素。
overflow属性:
auto:自适应,如果内容被修剪,则浏览器会显示滚动条来查看超出内容。
scroll:内容会被修剪,但是浏览器会显示滚动条以便查看超出内容。
hidden:内容会被修剪,并且超出的内容是不可见的。
visible:默认值。内容不会被修剪,会呈现在盒子之外。
八,css定位
1,position属性
(1)static:默认值,没有定位,元素会以标准文档输出。
(2)相对定位(relative)
相对自身位置偏移
<1>设置相对定位的元素会相对它原来的位置,通过指定偏移,到达新的位置。
<2>设置了相对定位的网页元素,无论是在标准流中还是在浮动流中,都不会对它的父级元
素和相邻元素有任何影响,它只针对自身原来的位置进行偏移。
<3>相对定位可进行top、right、bottom、left方向的定位。
<style>
div.one{
height: 50px;
background: rgb(177, 16, 240);
}
div.two{
height: 50px;
background: rgb(243, 6, 6);
position: relative;
top: 10px;
left: 50px;
}
div.three{
height: 50px;
width: 200px;
margin: 0 auto;
background: rgb(22, 6, 242);
position: relative;
/* bottom: 30px;
right: 50px; */
}
</style>
<body>
<div class="one">11111111</div>
<div class="two">22222222</div>
<div class="three">33333333</div>
</body>
运行结果:
(3)绝对定位(absolute)
根据离本身最近的已经定位的祖先元素进行偏移。
<1>使用了绝对定位的元素以它最近的一个“已经定位”的“祖先元素” 为基准进行偏移。如果没有已经定位的祖先元素,那么会以浏览器窗口为基准进行定位。
<2>相对定位可进行top、right、bottom、left方向的定位,定位偏移单位为 px。
<3>绝对定位的元素从标准文档流中脱离,这意味着它们对其他元素的定位不会造成影响。
<style>
*{
margin: 0;
padding: 0;
}
div.oneone{
position: relative;
}
div.one{
height: 50px;
background: rgb(177, 16, 240);
position: absolute;
top: 50px;
}
div.two{
height: 50px;
background: rgb(243, 6, 6);
position: absolute;
}
div.three{
height: 50px;
background: rgb(22, 6, 242);
position: absolute;
bottom: 50px;
}
</style>
<body>
<div class="oneone">
<div class="one">11111111</div>
</div>
<div class="two">22222222</div>
<div class="three">33333333</div>
运行结果:
(3)固定定位(fixed)
相对于浏览器窗口进行定位。不会根据滚动条的滚动而进行偏移 。
2,z-index属型
调整元素定位时重叠层的上下位置。
<1>z-index属性值:整数,默认为 0。
<2>设置了positon属性时,z-index属性可以设置各元素之间的重叠高低关系。
<3>z-index值大的层位于其值小的层上方。